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

Breadcrumbs Element

The Breadcrumbs element adds a breadcrumb navigation to a page. Take a look at the breadcrumbs element demo for a detailed showcase.

Show Breadcrumbs Demo

Select whether the Breadcrumbs element starts with the home link and whether the current page is shown at the end. Mind that hiding the home link and current page may cause the Breadcrumbs element to collapse if there is no other link to show. Additionally, enter the text for the home link.

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

Breadcrumbs

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. It has a Title and a Link fields. Options for the different content fields are explained in the according Headline and Button element documentation. The Comments element has no element-specific options.

The Widget element allows you to select an existing WordPress widget and render it anywhere in the layout. If the widget has no content output, the element collapses. Mind that since the Widget element has its own settings, the general widget settings are ignored. Take a look at the widget element demo for a detailed showcase.

Show Widget Demo

The Widget element has various panel style options. It can look like a boxed card or a blank panel.

Widget panel style

Define the style, decoration, font family and color of the widget title.

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

Widget title

Set the list and link styles for widgets that contain a list.

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

Widget list

Define the style of the menu widgets.

Option	Description
Menu Type	Select whether the menu should be rendered as a horizontal subnav, a vertical nav, or iconnav.
Menu Dividers	Show optional dividers between nav or subnav items.
Menu Style and Size	Choose between the default, primary and secondary nav style and select the primary nav size.
Image Width and Height	Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.
Inline SVG	Inject SVG images into the page markup so that they can easily be styled with CSS.
Icon Width	Set the icon width.
Image and Title	Add an additional margin between the image and title.
Image Align	Align the image to the top or center of the menu item.

Pagination Element

The Pagination element adds a pagination to a single post, archive, post type archive, posts page as well as the search, author and date archives. The number of posts displayed on these pages is defined in the reading settings in WordPress. If all posts are displayed on one page, the Pagination element collapses. Mind that it is not intended to be used with custom sources.

Take a look at the pagination element demo for a detailed showcase.

Show Pagination Demo

Choose between the previous/next or numeric pagination. The numeric pagination is not available for single posts. Optionally, show space between the previous/next links. Additionally, on single post pages, select a taxonomy to only navigate between posts from the same term.

Pagination

Area Element

The Area element allows you to select an existing WordPress area and render all its widgets anywhere in the layout. A typical use case 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. The Area element collapses if all its widgets have no content output. The appearance of each widget is defined by the widget settings added by YOOtheme Pro. Take a look at the area element demo for a detailed showcase.

Show Area Demo

Area element

Choose the layout for the widgets, set the column and row gaps and show optional dividers between them.

Option	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 widgets columns.
Row Gap	Set the size of the gap between the widget rows.
Dividers	Optionally, show a divider between widgets.
Breakpoint	Select the breakpoint from which the widgets will stack.
Vertical Alignment	vertically align widgets if they have different heights.
Match Height	Match content height for all widgets styled as a card.

Area options

Search Element

The Search element displays a search input box. Take a look at the search element demo for a detailed showcase.

Show Search Demo

Choose between a default and a large input style for the search. If the default style is selected, choose between a Small, Default and Large size for the input box. Additionally, display a search icon on the left or right. The icon on the right can be clicked to submit the search.