Page Builder

The YOOtheme Pro page builder allows you to build and design your website visually, without having to write any code.

Create page layouts from a collection of ready-to-use elements with static and dynamic content. A layout always consists of sections, grids and content elements that can be added and arranged with drag and drop. The layout library provides more than 250 pre-built page layouts that can be used as a starting point.

The YOOtheme Pro page builder is available for different parts of your site. For more information on how to open the builder, see the corresponding documentation.

Name Description
Pages and Posts Create individual page and posts layouts in Builder.
Footer Create a general footer layout in Layout → Footer.
Templates Create general template layouts in Templates.
Modules Create top or bottom modules position layouts in Modules.

Page Builder

To create a new page layout from scratch click the New Layout button. Now you can start adding new sections and elements to your layout. Alternatively, import an existing layout from the library, click the Library button. The layout library will open in a modal.

New layout

Every time you change the layout, sticky Save Layout and Cancel buttons appear at the top right corner. If you cancel or leave the page builder, all layout changes since the last saving will be discarded. Saving will only save the layout of the page and not the theme settings.

Save or cancel a layout


Layout Structure

The YOOtheme Pro page builder organizes content in four different types of building blocks.

Name Description
Page The page itself is the root and contains one or multiple sections.
Section Sections group content in larger visual blocks. They contain one or multiple rows.
Row Rows group content in one or multiple columns. The columns contain one or multiple elements.
Element Elements contain the actual content. There are more than 35 elements available to build your content.

Page builder layout structure


Action Icons

Action icons to create and manage the building blocks are shown when hovering a specific section, row or element. Here is a list of all available actions.

Image Name Description
Edit icon Edit Edit a section or row. To edit an element click on its name.
Copy icon Copy Create a duplicate below the section, row or element.
Delete icon Delete Delete the section, row or element including all its content.
Save icon Save in library Saves a single section layout in the layout library under My Layouts or saves an element including its content and settings as preset in the element library under My Presets
Add icon Add Adds a new section, row or element below.

When hovering a section, the action icons appear right next to the section name. To add a new section, click the Plus button that appears in the bottom left corner of the hovered section.

Section action buttons

When hovering a row, the action icons appear in the top right corner of the row. To add a new row, click the Plus button that appears in the bottom right corner of the hovered row.

Row action buttons

To edit an element, simply click on it. When hovering an element, the action icons appear in the top right corner of the element. To add a new element, click the Plus button that appears in the center of the hovered element.

Element action buttons


Ordering

Building blocks can be ordered with with drag and drop.

To change the order of sections, grab the section name.

Drag and drop a section

To change the order of rows, grab the space right below the row.

Drag and drop a row

To change the order of elements, simply grab the element.

Drag and drop an element


Status Icons

Important information about specific sections, rows or elements is indicated by status icons shown in the page layout. Here is a list of all status icons.

Image Name Description
Disabled icon Disabled Indicates that the section, row or element is only shown to the editor while the customizer is open. The Disabled option can be found in the Advanced settings.
Dynamic content icon Dynamic Content Indicates that the section, row or element is loading dynamic content from a content source. If the icon is red, it indicates that the content source or a mapped field is invalid. Learn more about invalid sources and fields.
Position absolute icon Position Absolute Indicates that an element is positioned absolutely and not according to the normal flow. Therefore, it doesn't expand the height of a column, row or section. The Position option can be found in the General settings.

The status icons of a section appear on the right of the section name.

Section status icons

The status icons of a row appear in the bottom right corner of the row.

Row status icons

The status icons of an element appear in the bottom right corner of the row.

Element status icons


Multilingual Sites

Since multilingual sites need a separate page per language, each language can show different content and even use another layout. Learn more in the multilingual sites documentation.

YOOtheme Pro Documentation