Create sophisticated page layouts by integrating 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. Both elements collapse if they have no content output, and the layout adapts accordingly. Read more in the collapsing layouts documentation.
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.
|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 Font Family||Define an alternative font family for the title.|
|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.|
Note Since the appearance of the widget is defined by the settings above, the widget settings added by YOOtheme Pro are 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. There are six
builder-6 areas available for the Area element which are not rendered anywhere else in the theme.
|Layout||Select whether the widgets should be aligned side by side or stacked above each other.|
|Column Gap||Set the size of the gap between the grid columns.|
|Row Gap||Set the size of the gap between the grid rows.|
|Breakpoint||Set the breakpoint starting from which grid items will stack.|
|Vertical Alignment||Vertically center grid items.|
|Match Height||Match the height of all widgets which are styled as a card|
Note The appearance of each widget is defined by the widget settings added by YOOtheme Pro.
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.