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.

Select Layout

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.

Save or Cancel a Layout in the Page Builder

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.

Versioning in Joomla


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.

A sample page builder layout


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.

Section action buttons

Drag and drop a section

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.

Row action buttons

Drag and drop a row

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.

Element action buttons

Drag and drop an element


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.

YOOtheme Pro