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 100 pre-built page layouts that can be used as a starting point.
Open the Page Builder
The YOOtheme Pro page builder is only available for uncategorized articles. Therefore, you need to create an empty article in Joomla and assign it preferably to the main menu.
There are two ways to open the page builder. One is by opening YOOtheme Pro. Browse to the empty article in the preview on the right and open the Builder panel of YOOtheme Pro. Opening it on anything but uncategorized articles will lead to the error message The Page Builder is not available on this page.
You can also open the Page Builder by editing the uncategorized article in Joomla and click the Page Builder button. This also works for the Joomla frontend editing.
Note User accounts with limited permissions can just open the YOOtheme Pro page builder without access to other theme settings of YOOtheme Pro.
Create Page Layouts
To create a new page layout from scratch click the New Layout button. You can then start adding new sections and elements to your layout.
To import an existing layout from the library, click the Library button, which will open the Layout Library.
Every time you change the layout, a Save Page and Cancel button 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.
Since the layout is saved directly in the article, Joomla versioning is supported out of the box. Each time a article is saved, a new revision is created automatically.
Open the article’s Versions dialog in Joomla to list all revisions of the current article.
The Layout Structure
The YOOtheme Pro page builder organizes content and its containers in four different types.
| 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 organize content in one or multiple columns. The columns contain one or multiple elements. |
| Element | Elements contain the actual content. There are more than 30 different types of elements available. |
Managing the Layout
Sections, rows and elements can be added, edited, copied and deleted directly in the builder. Sections and elements can additionally be saved in the Layout Library for later use. These action buttons are displayed next to their related element only when hovering it.
| Action | Description |
|---|---|
| Add | Click the plus icon to add a new section, row or element. |
| Edit | Click the pencil icon to edit sections and rows. Click on the element itself to edit it. |
| Copy | Click the copy icon to duplicate a section, row or element. |
| Save in Library | Click the arrow-up icon to save a section or element with all its settings in the Layout or Element Library. |
| Delete | Click the trash icon to delete a section, row or element. |
| Sort | Reorder a section, row or element by dragging and dropping it. The move cursor indicates that the element can be dragged. |
Section
New sections can be created by clicking the Add button that appears in the lower left corner when hovering the section. The other action buttons appear right next to the section name.
Row
New rows can be created by clicking the Add button that appears in the lower right corner when hovering the row. The other action buttons appear in the upper right corner.
Element
New elements can be created by clicking the Add button that appears in bottom-center when hovering the element. The other action buttons appear in the upper right corner.
Multi-language
Since multi-language sites need a separate page per language, each language can show different content and even use another layout. Look at the multi-language documentation page for more information on how to create multi-language sites.
