Page Builder

The YOOtheme Pro page builder allows you to build and design your website visually, without writing a single line of code.

Create layouts with an intuitive drag and drop interface and see its preview in real time. Display content by using a huge collection elements, from text and images to slideshows and galleries. You can start from scratch or load one of the prebuilt layouts from the layout library.

The YOOtheme Pro page builder is available for different parts of the website.

Name Description
Pages and Posts Create individual page and posts layouts in the Builder panel.
Templates Create site-wide template layouts in the Templates panel.
Footer Create a site-wide footer layout in the Layout → Footer panel.
Modules Create layouts for the top or bottom module positions in the Modules panel.

Page Builder

To create a new layout from scratch click the New Layout button and start adding sections and elements to your layout. Alternatively, import an existing layout from the layout library by clicking the Library button.

New layout

Every time a layout is changed, sticky Save Layout and Cancel buttons appear at the top right corner. Clicking Cancel or leaving the page builder will discard all layout changes since the last saving. Mind that saving the layout of the page will not save the theme settings.

Save or cancel a layout


Layout Structure

Layouts are organized in three different types of building blocks.

Name Description
Sections Sections group content in larger visual blocks. They contain one or multiple rows.
Rows and Columns Rows consist of one or multiple columns which in turn contain elements.
Elements Elements display the actual content.

Page builder layout structure

A new layout always starts with a section which contains a row with an empty column. Click the column to add a new element.

Add element


Actions

Hover a section, row or element to see the available actions. Here is a quick overview of all actions.

Icon Name Description
Edit icon Edit Edit a section or row. To edit an element, click on its name.
Copy icon Copy Duplicate a section, row or element including all its content.
Delete icon Delete Delete a section, row or element including all its content.
Save icon Save in library Save a section layout or an element in the corresponding layout or element libraries.
Add icon Add Add a new section, row or element.

Section Actions

Hover a section, and the actions will appear right next to the section name. To add a new section, click the Add icon in the bottom left corner.

Section actions

Row Actions

Hover a row, and the actions will appear in the top right corner of the row. To add a new row, click the Add icon in the bottom right corner.

Row actions

Element Actions

To edit an element, simply click on it. Hover an element, and the actions will appear in the top right corner of the element. To add a new element, click the Add icon at the bottom.

Element actions


Element Finder

To easily find elements within your website, just hover an element in the sidebar, and all its representations in the live preview will be highlighted with a blue border. Similarly, hovering any content in the live preview will highlight the corresponding element in the sidebar. In addition, all available element actions also appear at the top and bottom of the element in the live preview. This shortcut allows you to quickly edit, copy, save or delete elements or add a new element.


Ordering

Sections, rows and elements can be ordered with drag and drop.

Section Ordering

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

Drag and drop a section

Row Ordering

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

Drag and drop a row

Element Ordering

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

Drag and drop an element


Status

Status icons show important information about sections, rows or elements. Here is a list of all status icons.

Icon 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 the element is positioned absolutely and not according to the normal content flow. Therefore, it doesn't expand the height of a column, row or section. The Position option can be found in the general settings.
Visibility icon Visibility Indicates that the element is only shown or hidden on a specific device width and larger. If all elements are hidden, columns, rows and sections will hide accordingly. The Visibility option can be found in the general settings.

Note Sections, rows and elements which are marked red are only shown to the editor while the customizer is open and are not rendered on the actual site.

Section Status

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

Section status icons

Row Status

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

Row status icons

Element Status

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

Element status icons


Multi-Author Workflow

YOOtheme Pro prevents overwriting layouts when multiple authors are working on the same layout simultaneously. If a layout has been updated by a different author, a notification will appear. Either reload and update the page or close it and resume working.

Updated layout notification

If the page was not reloaded to the newer version, a modal dialog will appear when trying to save the layout. Either save the changes and overwrite the changes of the other author, or discard your changes and reload the page.

Save layout modal

YOOtheme Pro Documentation