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.

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.

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.

Layout Structure

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

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	Edit a section or row. To edit an element click on its name.
	Copy	Create a duplicate below the section, row or element.
	Delete	Delete the section, row or element including all its content.
	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	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.

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.

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.

Ordering

Building blocks can be ordered with with drag and drop.

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

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

To change the order of elements, simply grab the 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	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	Indicates that the section, row or element is loading dynamic content from a content source. If the icon is red, it indicates that either the content source is not used or a mapped field doesn't exist anymore. The Dynamic Content option can be found in the Advanced settings.
	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.

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

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

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.