Widget and Area Elements

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.

New Element

The Element Library will open in a lightbox. Look out for the Widget and Area elements.

Widget and area elements


Widget Element

The Widget element allows you to select an existing WordPress widget and display it in the page layout.

Widget element

Settings

Use the following options to define the appearance of the widget element. There are also general and advanced element settings which are the same for all elements.

Setting Description
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.

Setting Description
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.

Setting Description
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.


Area Element

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-1 to builder-6 areas available for the Area element which are not rendered anywhere else in the theme.

Area elements

Settings

Use the following options to define the appearance of the area element. There are also general and advanced element settings which are the same for all elements.

Setting Description
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.

Sidebar area

YOOtheme Pro