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.
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.
| 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. |
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 the content source or a mapped field is invalid. Learn more about invalid sources and fields. | |
| Position Absolute | Indicates that the 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. | |
| 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. |
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.
