YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Widget Plugins

A widget plugin determines how your widget will be displayed in the frontend, for example as a Slideshow or a Grid. You can also add custom widget plugins. Each plugin accepts a set of configuration parameters. These can be set in the Settings panel of the Widget Manager.

Accordion

The Accordion widget displays content inside a list of items that can be expanded and collapsed by clicking each of their headers.

Section Description
Accordion Determine whether or not multiple items can be opened at the same time.
Media Determine, if and how media and overlay of all items are rendered. You can apply different animations to the overlay and the images.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
Content Determine, if and how the content of all items is rendered.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Gallery

The Gallery widget displays images and videos in a grid, automatically creating thumbnails for your media items. Use the widget configuration to change the appearance of the gallery.

Section Description
Layout Configure the behavior of the gallery grid, the number of columns for different screen sizes (for responsive behaviour) and add animations to the gallery items.
Media Determine, if and how media and overlay of all items are rendered. You can apply different animations to the overlay and the images.
Content Determine, if and how the content of all items is rendered.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
Lightbox Enable a lighbox to display your media fully sized or set a fixed width and height. You can use the title or the content field as a text caption.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Grid

In a Grid widget, all items will be displayed as single items of a grid. The height of grid items can be matched or displayed in a dynamic grid, always applying the same spacing between items regardless of their height.

Section Description
Layout Configure the behavior of the grid, number of columns for different screen sizes (for responsive behaviour) and set the panel appearance. The gutter property determines the spacing between columns and rows. To link the entire panel, you can add a link in the Widget Content.
Media Determine, if and how media and overlay of all items are rendered. You can apply different animations to the overlay and the images.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
Content Determine, if and how the content of all items is rendered.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Grid Slider

A Grid Slider widget allows you to display multiple Slideshows within one grid. Mind that when creating content for this widget, you need to add another media field for every slide your slideshow is going to have. Each slide will be displayed with the same content and title field within one item.

Section Description
Layout Configure the behavior of the grid, number of columns for different screen sizes (for responsive behaviour) and set the panel appearance. The gutter property determines the spacing between columns and rows. To link the entire panel, you can add a link in the Widget Content.
Media Configure the dimensions, alignment and general behavior of the media items.
Slideshow Configure the appearance and behaviour of the slideshow. Settings for the navigation and animations can be found here as well.
Content Determine, if and how the content of all items is rendered.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Grid Stack

In a Grid Stack, all items from your selected content will be rendered below each other. This can easily be used for a paired display of an image (taken from the media field of your content item) and a short text (taken from the content field of your content item).

Section Description
Layout Configure the appearance of the grid, for example the relation of content and media. The grid gutter determines the spacing between items in the grid. You can individually set animations for the media and content columns.
Media Determine, if and how media and overlay of all items are rendered. You can apply different animations to the overlay and the images.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
Content Determine, if and how the content of all items is rendered.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Map

A Map widget displays a Google map on your website. Make sure to add a custom field Location to your content element and select a location you want to display in the map. The other fields of your content will be displayed when you click on the location marker (provided the Popup is enabled). You can add several pins and popup boxes by adding more items to your content element. For more information, read the Manage fields doc.

Section Description
Map Configure the appearance and behaviour of the map and enable the Popup that will display media and content of each item.
Style Configure the styling of the map, for example invert the colours or set custom colours.
Media Determine, if and how media and overlay of all items are rendered. You can apply different animations to the overlay and the images.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
Content Determine, if and how the content of all items is rendered.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Parallax

A Parallax widget allows you to animate different properties of your content, such as opacity and translation, depending on the scroll position of your site.

Section Description
Parallax Define which animations should be used for background, title and content.
Media Here you you can set the image proportions.
Content Determine, if and how the content is rendered.
NOTE The link can be added in the Widget Content.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Popover

The Popover widget allows you to position each item through coordinates on top of a main image and display content inside a dropdown. The main image is chosen in the widget settings.

Section Description
Popover Configure the main image of the popover. You can choose different icons for the popover toggles, the direction in which the dropdowns are to open and whether they should open on hover or click.
Media Here you can set the image proportions and enable an overlay.
Content Determine, if and how the content is rendered.
NOTE The link can be added in the Widget Content.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Slider

A Slider displays the contents as a series of items that you can scroll through using the mouse, touch gestures or a regular navigation. You can apply overlays and several styles to slider items.

Section Description
Slider Configure the appearance and behaviour of the slider. Settings for the navigation and animations as well as the option to set the number of columns and height are available. The slider can also be fullscreen.
Media Here you you can set the image proportions and enable an overlay. The overlay content is taken from the title and content fields in your content item.
Content Determine, if and how the content of all items is rendered.
NOTE The link can be added in the Widget Content.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Slideset

A Slideset presents groups of images in sets that you can loop through. You can apply different navigations, transitions, filter items by tag and the title and content fields can be displayed in an overlay or under the image.

Section Description
Slideset Configure the appearance and behaviour of the slideset. Settings for the navigation and animations can be found here as well as the option to set the number of columns and items panel.
Media Here you you can set the image proportions and enable an overlay. The overlay content is taken from the title and content fields in your content item.
Content Determine, if and how the content of all items is rendered.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Slideshow

A Slideshow widget turns your selected content element into a sequence of slides. Each item in your content element will represent one slide. Select a media element as the slide's background. The title and content fields can be displayed in an overlay on top of that image.

Section Description
Slideshow Configure the appearance and behaviour of the slideshow. Settings for the navigation and animations can be found here as well as the option to enable a fullscreen slideshow.
Media Here you you can set the image proportions and enable an overlay. The overlay content is taken from the title and content fields in your content item.
Content Determine, if and how the content of all items is rendered.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Slideshow Panel

The Slideshow Panel publishes a slideshow and the item’s content inside a panel instead of an overlay. The items can be positioned left, right, above or below the slideshow.

Section Description
Slideshow Configure the appearance and behaviour of the slideshow panel. Settings for the panel style, navigation and animations can be found here as well as the option to enable a fullscreen slideshow.
Media Here you can set the image proportions and enable an overlay. The overlay content is taken from the title and content fields in your content item.
Content Determine, if and how the content of all items is rendered.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Switcher

A Switcher consists of a number of navigation toggles and their related content items. Switchers are useful for realizing little tabbed navigations and similar. Each item in your selected content element will result in a navigation entry.

Section Description
Layout Configure the appearance and behavior of the switcher. The navigation can be of different visual appearance and can be positioned at any side of the content.
Media Determine, if and how media and overlay of all items are rendered. You can apply different animations to the overlay and the images.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
Content Determine, if and how the content of all items is rendered.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Switcher Panel

The Switcher Panel widget displays a static teaser image inside a panel. The navigation to transition through Switcher items is placed on top of the main image.

Section Description
Layout Configure the main image and general behavior of the switcher. The navigation can be of different visual appearance and can be positioned at any side of the content.
Media Determine, if and how media and overlay of all items are rendered. You can apply different animations to the overlay and the images.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
Content Determine, if and how the content of all items is rendered.
NOTE The link as well as the Social Buttons can be added in the Widget Content. You need to create Custom fields for the Social Buttons.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

List

The List widget displays content inside a list of items. You can set different positions and styles for your content.

Section Description
List Select on of the available list styles Line, Striped and Space.
Media Determine, if and how the media of all items are rendered. You can configure the image alignment and rounding and vertically center the content.
Content Determine, if and how the content of all items is rendered.
NOTE The link can be added in the Widget Content.
General Set a custom HTML class that will be added to the widget element in the rendered output.

WordPress Demo Joomla Demo

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!