Widget plugins define the look and behavior of a widget in the frontend. This article includes a complete overview of all available 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 when editing a widget.
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 Content Provider. 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 Content Provider. 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. |
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 behavior) 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 Content Provider. You need to create Custom Fields for the Social Buttons. |
| Lightbox | Enable a lightbox 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. |
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 behavior) 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 Content Provider. |
| 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 Content Provider. 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 Content Provider. 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. |
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 behavior) 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 Content Provider. |
| Media | Configure the dimensions, alignment and general behavior of the media items. |
| Slideshow | Configure the appearance and behavior 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 Content Provider. 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. |
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 Content Provider. 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 Content Provider. 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. |
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 Custom Fields documentation.
| Section | Description |
|---|---|
| Map | Configure the appearance and behavior 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 colors or set custom colors. |
| 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 Content Provider. 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 Content Provider. 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. |
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 Content Provider. |
| General | Set a custom HTML class that will be added to the widget element in the rendered output. |
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 Content Provider. |
| General | Set a custom HTML class that will be added to the widget element in the rendered output. |
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 behavior 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 Content Provider. |
| General | Set a custom HTML class that will be added to the widget element in the rendered output. |
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 behavior 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 Content Provider. 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. |
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 behavior 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 Content Provider. 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. |
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 behavior 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 Content Provider. 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. |
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 Content Provider. 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 Content Provider. 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. |
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 Content Provider. 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 Content Provider. 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. |
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 Content Provider. |
| General | Set a custom HTML class that will be added to the widget element in the rendered output. |
