Widgets

All you need to know about widgets in YOOtheme Pro.

Widgets can be managed in the Widgets panel of the WordPress customizer. YOOtheme Pro provides several widget positions to create all kinds of complex layouts. New widget settings are added to control their appearance, and there is a powerful Builder Widget available.


Widget Areas

YOOtheme Pro comes with 8 available widget areas where any number of widgets can be published. Areas which are empty as well as published widgets with no content output will automatically collapse, and the layout will adapt accordingly.

Area Description
toolbar-left toolbar-right These toolbar areas are located above the theme header. Find the toolbar settings in Layout → Site.
navbar header These are the two theme header areas. Find the header and navbar settings in Layout → Header.
mobile This area allows publishing widgets below the hidden mobile navigation, i.e. off-canvas, modal or dropdown. Find the mobile settings in Layout → Mobile.
sidebar This area allows publishing widgets next to the main system output, e.g. a blog or a shop but not pages built with the YOOtheme Pro page builder. Find the sidebar settings in Layout → Sidebar.
top bottom These two areas allow publishing widgets above and below the main system output, e.g. a blog, a shop or a static page. Find the top and bottom settings in Layout → Top and in Layout → Bottom.
builder-1 to builder-6 These six areas are reserved for the Area element in the YOOtheme Pro page builder. They are not rendered anywhere else in the theme.

Widget areas


Toolbar and Header

The toolbar-left, toolbar-right, navbar and header areas are perfect for publishing a single line of text, a search, a language switcher, a shopping cart, different menus or social links in the header of your website. Multiple widgets are displayed next to each other in a row.

Widgets published in the sidebar or mobile area will stack above each other.

Important The sidebar area is not rendered on static pages built with the YOOtheme Pro page builder, even if a widget is published in the sidebar. This is because the page builder allows building full-width sections where the sidebar needs to be placed within the layout of these sections. This can be done using the Area element in the YOOtheme Pro page builder.

Top and Bottom

Widgets published in the top or bottom area are displayed in a horizontal grid. By default, the widgets fill up the available space evenly. For example, when publishing two widgets, each of them will automatically use 50% of the available space. It's possible to create complex widget layouts. Just set a different width for each widget using the Width option in the widget's settings. The breakpoint from which modules will stack above each other is set for medium device font-size, like tablets.

Important Publishing widgets directly in the top or bottom area may suffice for simple use cases. A much more powerful approach is to publish a Builder Widget instead. It allows you to access the full power of the YOOtheme Pro page builder and create complex widget layouts.

Builder 1 to 6

There are six builder-1 to builder-6 areas which are not rendered anywhere else in the theme. They are reserved to be used by the Area element from the page builder. Learn more about the advanced layout techniques.


Widget Settings

YOOtheme Pro adds a Theme button to the WordPress widget settings, which reveals additional options on click. The availability of certain settings depends on the type of the widget and the area where it is published.

Widget settings

Default Settings

These settings are available for all widget areas.

Setting Description
Title Add a widget title.
Class Set an HTML class for the widget.
Visibility Display the widget only on a specific device width and larger.

Appearance Settings

These settings are available for the sidebar, mobile, top and bottom areas.

Setting Description
Style Define whether the widget looks like a card or whether the style is blank.
Title Style Title styles differ in font-size but may also come with a predefined color, size and font.
Title Decoration Decorate the title with a divider, bullet or a line that is vertically centered to the heading.
Alignment Center, left or right align the text.
Alignment Breakpoint Define the device width starting from which the alignment will apply.
Alignment Fallback Define an alignment fallback for device widths below the breakpoint.

Grid Settings

These settings are available for top and bottom areas.

Setting Description
Width Set the width of the grid column that contains the widget in percent or choose Expand to fill up the available space evenly.
Max Width Set the widget's maximum width.
Max Width Alignment Define the widget's' alignment if the grid column is larger than its max-width.

List Settings

These settings are available only for widgets which contain a list published on sidebar, mobile, top or bottom areas.

Setting Description
List Style Select whether the list items should be separated with dividers or not.
Link Style Use the default link color or the muted color.

These settings are available only for menu widgets published on the sidebar, mobile, top or bottom area.

Setting Description
Menu Style Select whether the menu should be rendered as a horizontal subnav or a sidebar nav.

Builder Widget

Instead of publishing widgets directly in the top or bottom area, you can use the Builder Widget to access the full power of the YOOtheme Pro page builder and create complex widget layouts above and below the main system output.

The Builder Widget is a regular WordPress widget and needs to be published in the top or bottom area through the WordPress Widget manager. This is because the YOOtheme Pro page builder allows you to create full-width sections, which only works in these two positions. Otherwise, an error message will appear.

Note The layout settings in Layout → Top and Layout → Bottom are ignored by the Builder Widget because it allows you to create multiple sections with each of them having their own settings.

Builder widget example


Open the Builder

In the Builder Widget settings there is an Open Builder button, which opens the YOOtheme Pro page builder.

Builder widget


Advanced Layout Techniques

If the created layout in the Builder Widget has no output, it will automatically collapse, and the rest of the page will adapt accordingly. This is very powerful in combination with the Widget and Area elements from the YOOtheme Pro page builder element library. They behave the same and collapse if they don't have any content output.

Collapsing layout

For example, you can create a complete layout using Area elements. Only if there are widgets published on the selected areas, the layout will be rendered. Otherwise, it will completely collapse. Widget page assignment and user permission are also taken into account.

Builder Positions

Note There are six builder-1 to builder-6 areas available for this use case which are not rendered anywhere else in the theme.


Widget Visibility

By default, a WordPress widget is visible on all pages. Therefore, we recommend installing Jetpack, an official and free-to-use plugin from WordPress. It adds a Visibility button to the widget settings, which allows you to assign widgets to different pages. The plugin needs to be activated with your wordpress.com account. If you run the demo package locally, you can also activate the Jetpack development mode.

YOOtheme Pro