Create sophisticated page layouts with the integration of WordPress widgets.
Widget and Area elements in the YOOtheme Pro page builder allow you to render WordPress widgets and their dynamic content anywhere in your page layout.
Go to the Builder panel of YOOtheme Pro and open the Element Library by clicking the white space with the plus icon where you want to add an element to the layout.
The Element Library will open in a lightbox. Look out for the Widget and Area elements.
The Widget element allows you to select an existing WordPress widget and display it in the page layout. The following settings are available.
|Panel Style||Define whether the widget should be blank or look like a card.|
|Title Style||Define the style of the title. 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.|
|Title Color||Select the text color. If the Background option is selected, styles that don’t apply a background image will use the primary color instead.|
These settings apply only to widgets which contain a list.
|List Style||Define whether the list items should be separated with dividers.|
|Link Style||Choose between the default link color or a muted color.|
This setting applies only to menu widgets.
|Menu Style||Define whether the menu should be rendered as a horizontal subnav or a sidebar nav.|
For more information, see the general element settings documentation.
Important The default widget settings will be ignored.
The Area element allows you to select an existing WordPress widget area and display all its published widgets within a grid in the page layout. The following settings are available.
|Layout||Select whether the widgets should be aligned side by side or stacked above each other.|
|Gutter||Set the grid gutter width and display dividers between grid cells.|
|Breakpoint||Set the breakpoint starting from which grid cells will stack.|
|Vertical Alignment||Vertically center grid cells.|
|Match height||Stretch the panel to match the height of the grid cell.|
Note There are six
builder-6 areas available for the Area element which are not rendered anywhere else in the theme.
By default, sidebar widgets are not rendered on static pages built with the YOOtheme Pro page builder because it allows you to build full-width sections. Therefore, a typical use case for the Area element is to render the
sidebar area in any layout section. For more information on the sidebar area, read the sidebar documentation.
The Widget and Area elements collapse if they don’t have any content output. There are several reasons why this might be the case.
If the Widget or Area element is the only element in the column and it is not rendered, the column will collapse automatically, and the layout will adapt accordingly. If all columns in a row collapse, the row itself will collapse, too. If all rows in a section collapse, the section itself will collapse, too.
This concept is very powerful because it prevents empty layout parts when a widget is not visible on the current page. It also allows you to create complex page layouts which will adapt automatically depending on the widget settings.
Use the YOOtheme Pro page builder above and below the main system output by publishing a Builder Widget on the
In combination with the Area element and its collapsing layout behavior it is possible to create complex widget layouts above and below the main system output. It allows you to control the top and bottom layout depending on whether a widget is visible on the current page or not. Learn more about advanced layout techniques.