System Elements

Add WordPress functionality to your layouts.

System elements can be found in the element library under System. They add WordPress functionality to your layouts. If a page does not have the functionality, the element has no content output and collapses. Read more in the collapsing layouts documentation.

To learn more about general element settings, see the corresponding documentation.

System Elements


Pagination Element

The Pagination element adds a pagination to a single post, archive, post type archive or posts page. The number of posts displayed on the archive, post type archive or posts page is defined in the Reading Settings in WordPress. If all posts are displayed on one page, the Pagination element collapses.

Setting Description
Pagination Choose between the previous/next or numeric pagination. The numeric pagination is not available for single posts.
Show space between links Show or hide space between the previous/next links.

The Breadcrumbs element adds a breadcrumb navigation to a page.

Setting Description
Show home link Show or hide the home link as first item.
Show current page Show or hide the current page as last item.
Home Text Enter the text for the home link.

Hiding the home link and current page may cause the Breadcrumbs element to collapse if there is no other link to show.


Comments Element

The Comments element adds the comments functionality to a single post. Make sure to enable the comment option on a post type. Otherwise, the element will collapse.

Setting Description
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.
HTML Element Choose one of the six heading elements to fix your semantic structure.
Link Style Set the link style.
Link Button Style Set the button size.
Link Margin Top Set the top margin. Mind that the margin will only apply if the content field immediately follows another content field.

Widget Element

The Widget element allows you to select an existing WordPress widget and render it anywhere in your layout. The Widget element collapses if the widget has no content output.

Widget element

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 area and render all its widgets anywhere in your layout. The Area element collapses if all its widgets have no content output.

A typical use case for the Area element is to render the sidebar area in any layout section. There are also six builder-1 to builder-6 areas available for the Area element which are not rendered anywhere else in the theme.

Area element

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.

YOOtheme Pro Documentation