All you need to know about widgets and areas in YOOtheme Pro – from controlling their appearance and style to using the page builder above and below the main content.
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.
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.
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. Additionally, there is a Reorder settings that allows you to reorder widgets and move a widget to a different area.
In the widget area panel you can add a new widget by clicking Add a Widget. Alternatively, add a widget in the WordPress administration under Appearance → Widgets.
For a more detailed information about widgets, refer to the WordPress documentation.
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.
||These areas are located above the theme header. Find the toolbar settings in Layout → Site.|
||These areas can be used instead of the logo set in the Layout → Site settings.|
||These are the theme header areas. Find the header and navbar settings in Layout → Header.|
||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.|
||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.|
||These 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.|
||These areas are reserved for the Area element in the YOOtheme Pro page builder. They are not rendered anywhere else in the theme.|
Instead of using the menu positions, you still can publish a menu module in the Navbar or Mobile module position.
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.
YOOtheme Pro offers an easy way to add all required standard logos to your site. For advanced use cases, for example when displaying different logos on different pages or for different languages, use 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.
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.
Widgets published in the
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
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.
There are six
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.
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 area where the widget is published and its type.
Note Mind that the following settings are ignored if the module is published using the YOOtheme Pro widget element. This is because these settings are available in the element itself.
Use these default options to style your widgets published in any area.
|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.|
Use these appearance settings to style your widgets published in the
|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.|
Use these grid settings to style your widgets published in the
|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.|
Use these settings to style your list widgets published in
WordPress offers the following list widgets: Archives, Categories, Pages, Recent Comments, Recent Posts.
|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.|
Use these settings to style your menu widgets.
|Menu Style||Select whether the menu should be rendered as a horizontal subnav, a sidebar nav, or iconnav. The Default style depends on the area the widget is published.|
|Menu Dividers||Show dividers between menu items.|
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.
Use the builder widget to create sophisticated layouts with the YOOtheme Pro page builder above and below the main content. The builder widget is a regular WordPress widget. Publish it only in the
bottom widget area. Otherwise, it will not be rendered, and an error message will appear. This is because the page builder is designed to create layouts that can take up the full width of the viewport which is not possible for areas like the sidebar.
Note The layout settings in Layout → Top and Layout → Bottom are ignored by the builder widget because it allows you to create multiple sections which each has its own settings.
The YOOtheme builder widget is especially powerful in combination with the widget and area elements from the YOOtheme Pro element library. Both elements collapse if they have no content output, and the layout adapts accordingly. This gives you a lot of possibilities to create advanced layouts above and below the main content. Read more in the collapsing layouts documentation.