Widget and Area Element

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.

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. The following settings are available.

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

For more information, see the general element settings documentation.

Important The default widget settings will be 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. The following settings are available.

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

For more information, see the general element settings documentation. The default widget settings for each module are taken into account.

Note There are six builder-1 to 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.

Sidebar area

Collapsing Layout

The Widget and Area elements collapse if they don’t have any content output. There are several reasons why this might be the case.

  • There is no widget or area selected by the element.
  • There is no widget published and assigned to the selected area.
  • The widget itself has no content output.
  • The widget is not assigned to be visible on the current page.
  • The user has no permission to see the widget.

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.

Collapsing layout

Builder Module

Use the YOOtheme Pro page builder above and below the main system output by publishing a Builder Widget on the top and bottom area.

Builder widget

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.

Builder widget

YOOtheme Pro