Widgets for SiteOrigin Documentation

Getting Started

The Widgets for SiteOrigin plugin adds widgets to your WordPress installation. The widgets are built on the SiteOrigin Widgets Bundle framework plugin and works great with the SiteOrigin Page Builder plugin. These widgets can also be used in theme widget areas.

Installation

Install the Widgets for SiteOrigin plugin from Plugins -> Add New, use the search form in the top right of the page to search forWidgets for SiteOrigin. Install and activate.

After purchasing the Widgets for SiteOrigin Pro plugin upload the plugin from Plugins -> Upload, click Choose File and choose the zip file. The Widgets for SiteOrigin plugin has to be Active for the Pro plugin to work.

Installing Required/Optional Plugins

Below is a list of recommended plugins to install that will help you get the most out of this plugin.

SiteOrigin Widgets Plugin (required) : This is a powerful framework for building WordPress widgets on top which the plugin is built.

SiteOrigin Page Builder (optional):  This is the most popular page builder plugin for WordPress.

Jetpack (optional): Required if you are using the portfolio widget.

WooCommerce (optional):  Required if you are using the WooCommerce Products widget in the Pro plugin.

Managing Widgets

Once activated, go to Plugins -> SiteOrigin Widgets, there you’ll find the Widgets Bundle dashboard. The tabs at the top of the page let you view all widgets, enabled widgets only or disabled widgets only. To enable a widget, locate it and click the Activate button, to disable a widget, locate it and click the Deactivate button. If you know the name of the widget you’re looking for, use the search form at the top right to search for it.

Visibility

This is a page builder option, that can help control the visibility of widgets / rows for certain predetermined widths. 

To control this, go to the Widgets/Row -> Attributes. Here you can control visibility by screen size and screen layout.

Animation [PRO]

This is a page builder option, that can help control the entry animation of widgets/rows.

To control this, go to the Widgets/Row -> Layout. Here you can control animation type, animation trigger position and animation delay.

animation type : Select the animation type.

animation trigger position : Distance in pixels from the bottom at which animation triggers.

animation delay : Time delay in milliseconds after the animation is triggered.

Accordion Widget

The Accordion widget allows you to compartmentalise information and improve user experience on your site. Logically very similar to the tabs widget, the accordion stacks items in a vertical list.

This widget also doubles up as a toggle widget by checking the option to open multiple toggles simultaneously. You can also have only one toggle open at a time by checking Close toggle if another is open.

The styling allows customisation of the title, icon and content background.

Alert Widget

Alerts are useful elements that can be dropped into a form or inline on a page to communicate success, warnings, failure or just information. Choose between 6 beautiful alert designs and an option to add a close button.

Audio Widget

The Audio Widget allows you to easily add audio to your site.

The widget lets you upload an audio file or provide a link to an external audio file which will then be wrapped in a custom player. Alternatively you can use the oembed feature to embed content from sites like SoundCloud.

Bar Counter Widget

The animated bar counter is a beautiful way to display useful stats to your visitors.

With the animation turned on, the bars start filling up as they enter the viewport. The repeater field in this module lets you have as many bars as you need.

Blog Widget

Combine the variations of the blog widget to create appealing magazine or news pages. 

Create a custom query using the Select Posts query builder.

Choose from five highly customisable design layouts.

Choose between 1 to 4 columns, this allows for usage in sidebars as well as page builders.

You can create custom archives using the handy navigation feature, using either the default or AJAX pagination feature.

Blog Enhanced Widget [PRO]

The pro widget comes with predesigned article templates. Combine the variations of the blog widget to create appealing magazine or news pages. 

Create a custom query using the Select Posts query builder.

Choose from five highly customisable design layouts.

Choose between 1 to 4 columns, this allows for usage in sidebars as well as page builders.

You can create custom archives using the handy navigation feature, using either the default or AJAX pagination feature.

Blog Slider Widget [PRO]

The Blog Slider Widget lets you easily add eye catching post sliders. This widget is typically used at the top of pages and goes great in conjunction with the Blog Widgets.

Create a custom query using the Blog Post Loop query builder.

Choose from highly customisable slide layouts.

Choose between 1 to 4 columns, this allows for usage in sidebars as well as page builders.

A number of slider settings such as autoplay, navigation and transitions, creates great experiences.

Button Widget

Easily add buttons anywhere on your site.

Choose between 6 beautiful and animated button designs with customisable settings such as colors, shape, size, alignment, icons, button hover effect and button click effect.

The id and onclick attribute options allows for great JavaScript integration.

Call to Action Widget

The call to action widget can be customised to create eye catching user interfaces.

Add a customisable title and subtitle.

The widget also allows for either 1 or 2 customisable buttons.

Chart Widget [PRO]

The Chart Widget allows you to visualise your data in a number of different ways.

Choose from line, bar, radar, pie, doughnut and polar area charts, each of them animated, fully customisable and engaging.

Circle Counter Widget

The animated circle counter is a great way to display a single statistic. Using three to four of these circles side by side, lets your visitors learn a lot about you a single glance.

With the animation turned on, the circle will gracefully fill up, till it reaches its preset value.

Divider Widget

The divider widget is useful as a separator between different sections of your content. It is also a simple way to add horizontal spacing between different elements on your page.

Filter Accordion Widget

The Filter Accordion Widget extends on the accordion widget with the use of filters. The already compartmentalised accordion items can be further categorised and sorted using the filter bar above it.

Please give the accordion a unique id, in addition the filter term slugs should be unique strings without spaces.

The toggle slugs should have the same value as the filters. If you more that one slug for an item leave a space between them.

This widget also doubles up as a toggle widget by checking the option to open multiple toggles simultaneously. You can also have only one toggle open at a time by checking Close toggle if another is open.

The styling allows customisation of the title, icon and content background.

Flip Box Widget [PRO]

The Flip Box widget is a simple and elegant combination of text and media. This widget is a fantastic way to highlight small bits of information, such as skills, features or services you offer.

Choose between horizontal and vertical animations. In addition you can easily link to other webpages using a highly customisable button.

Present your image collections in a visually rich masonry layout.

The widget is packed with a lightbox feature. You can also control the number of widget columns, image styling and caption placement.

Image Widget

Display your images in different shapes, with or without shadows. 

Display titles and descriptions on your images.

In addition the widget also has a lightbox feature which is activated with the pro plugin.

Media Box Widget

The Media Box widget is a simple and elegant combination of text and media. This widget is a fantastic way to highlight small bits of information, such as skills, features or services you offer.

Choose to use icons, images or an oEmbed link. In addition you can easily link to other webpages using a highly customisable button.

Number Counter Widget

The number counter is an engaging way to display numerical statistics to your visitors. 

Customise the start and stop numbers, the animation speed and the size.

Person Widget

The Person Widget is a great way to highlight your personnel.

This widget combines text, imagery and social media links to create a personal profile block.  You can increase the interactivity of the profile by choosing to place the social icons or the about me text over the profile image.

Person Slider Widget [PRO]

The Person Slider Widget is a great way to highlight your personnel, in an interactive slider.

This widget combines text, imagery and social media links to create a personal profile block.  You can increase the interactivity of the profile by choosing to place the social icons or the about me text over the profile image.

The slider comes with options such as autoplay, navigation and transitions.

You can also choose to opt for the carousel mode.

Portfolio Widget

The Portfolio Widget allows you to show off your work in a neat grid.

Create a custom query using the Select Projects query builder.

The widget makes use of an optional customisable project type filter. When a project type is selected, only the projects from that category are listed.

Choose between 1 to 6 columns, this allows for usage in sidebars as well as page builders.

The projects can be displayed with either the default or gallery designs.

Portfolio Enhanced Widget [PRO]

The Portfolio Enhanced Widget builds up on the portfolio widget. 

Create a custom query using the Select Projects query builder.

Choose either a vertical or horizontal layout for project type filters.

The widget makes use of an optional customisable project type filter. When a project type is selected, only the projects from that category are listed.

Choose between 1 to 6 columns, this allows for usage in sidebars as well as page builders.

The projects can be displayed with either the default, gallery or types below designs.

Pricing Table Widget

This widget allows you to easily create pricing tables for your products or services.
 
Create as many plans as you want, and control the title, features and pricing for each. You can also choose to make one or more plans featured.

Service Box Widget [PRO]

The Service Box widget is a simple and elegant combination of text and media. This widget is a fantastic way to highlight skills, features or services you offer.

Choose to use icons or images. The box has a number of styling options to give it a number of unique looks.

Slider Widget

Choose from a number of slider settings  such as autoplay, dots and arrow navigation, transitions and infinite loops to create simple image slider.

Slider Pro Widget [PRO]

The Slider Pro widget lets you leave a great impression with combination of text, media and animations.

The widget also comes with a number of slider and navigation settings, such as autoplay, dots and arrow navigation, transitions and infinite loops.

Social Icons Widget

Redirect user to your social media profiles to increase user engagement.
You can use the same styling options for all widgets by setting the color options in the styling section. Alternatively, you can give each icon a unique look by setting colors in the Icons section.

Tabs Widget

Create any number of tabs that will look great inside any sized column.

Choose between a horizontal and vertical layout for tab titles which can be accompanied by icons.

On smaller screens the tabs buttons stack up and are easy to use. Further customisation is possible with the use of icons for each tab.

Testimonial Widget

The Testimonial Widget is the best way to showcase quotes from your customers.

The widget combines a quote, it's author, his/her image and a link back to their website.

Choose from 9 design options.

Testimonial Slider Widget [PRO]

TheTestimonial Slider Widget is a great way to showcase quotes from your customers in an interactive slider.

The widget combines a quote, it's author, his/her image and a link back to their website.

Choose from 9 design options.

The slider comes with options such as autoplay, navigation and transitions.

You can also choose to opt for the carousel mode.

Vertical Bar Counter Widget

Animated vertical bars to display your stats.
With the animation turned on, the bars start filling up as they enter the viewport. The repeater field in this module lets you have as many bars as you need. It is important to adjust the breakpoint width depending on the number of vertical bars you have.

Video Widget

The Video Widget allows you to easily add videos to your site.

The widget lets you upload an video file which will be wrapped in a custom player. Alternatively you can use the oembed feature to embed content from sites like YouTube and Vimeo.

WooCommerce Products Widget [PRO]

Requires the WooCommerce plugin to be active.

Create a custom query using the Select Products query builder.

Choose from two highly customisable product designs.

Choose between 1 to 4 columns, this allows for usage in sidebars as well as page builders.

Plugin Support

If you have queries or issues to report related to the plugin, feel free to contact us via our support forum.

Scroll to top