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.


Widget Customizer

The Widgets panel shows a list of all widget areas available on the current page. To see a list of widgets published in this area, simply open it. If a widget appears grey, it means it is not published on the page shown in the live preview. You can easily reorder widgets by dragging them above or below other widgets.

Widget customizer

To edit a widget, simply click on it. Here you can change the widget's title, content and its options. YOOtheme Pro adds an additional Theme button at the bottom, which contains a number of options to control the appearance and style of the widget.

In the widget area panel you can add a new widget by clicking Add a Widget. Additionally, there is a Reorder settings that allows you to reorder widgets and move a widget to a different area.

For a more detailed information about widgets, refer to the WordPress documentation.


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 in the mobile navigation, i.e. the off-canvas, modal or dropdown menu. Find the mobile header 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 icons in the header of your website. Multiple widgets are displayed next to each other in a row.

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 page builder. Each Area element has its own settings. This allows you to have separate sidebar layouts on different pages. Widgets published in the sidebar area will stack above each other.

Mobile

The mobile area is only shown if the mobile header layout is enabled. It will show up in the modal, dropdown and offanvas modes when you click on the menu toggle. All widgets published in the mobile widget area will be stacked above each other under the mobile menu.

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. Using a Builder Widget instead will offer advanced possibilities and allow you to create more 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.

YOOtheme Pro