Skip to content

Layout builder

The Layout Builder is a tool to easily build custom layouts, and you can find it under the "Layout builder" metabox in the pages’ editing screen.

The Layout builder content is essentially a block of custom contents that is injected in the page, usually below the regular page extended text. The Layout builder content is divided in horizontal regions called "sections", each section can have multiple "rows", each row can be formed by multiple "columns" of various widths, each one of them containing a variable number of "blocks".

Here we’re going to briefly describe how the Layout builder works in the page editing screen of your admin backend.

Sections

First off, you can create sections by clicking on the "Add section" button in the "Layout builder" metabox.

Sections are meant to be portions of content that are distinct from one another, hence they have specific options concerning their appearance. You can access the appearance options hovering on the section, and clicking on the "Section appearance" control in the upper right hand corner: they can either be boxed or extended, with the content being limited to a central portion of the screen, or extending to the viewport’s edges.

Each section can also have a background assigned, that will stretch for the entire width and height of the section.

Sections, as well as columns and blocks, can also be specified with their own custom CSS class of your choice, so that you can hook to it via the custom CSS textarea of the theme’s admin panel.

Rows

You can add a new row to a section by clicking on the "Add row" control in the upper left hand corner of the section. Please note that rows can be dragged up or down within their own section, but they can’t be dragged to another section.

Columns

After inserting a row, you’ll be able to add columns. As a matter of fact, look for the "Add column" label in the row block that you just added, and you’ll be presented with a set of viable options concerning the width of the column you’re about to add. The theme supports widths from one fifth (20% of the available width), to 100%.

Going over a column with your mouse will show various options concerning the column: reduce or enlarge the column width (if possible), clone the column with its contents and alter the column appearance.

Columns as carousels

Concerning the column appearance, by clicking on the cog icon a modal window will be shown with various options. It is worth noting that each column can also be displayed as a carousel, with the blocks contained in the column being the carousel items. You’ll find various options to control the column carousel appearance, as well as the column CSS class, in the Column appearance modal.

Blocks

After creating a column, you’ll be able to add blocks to it by clicking on the "Add" button at the bottom of the column. After clicking the control, you’ll be shown a modal listing all of the available builder blocks. After selecting the block you want to add, you’ll be shown the block editing screen.

Blocks can be dragged around columns to alter their order, even within columns that are not part of the same row.

Note: if for some reason a block is present in the page configuration but not installed (e.g. it’s declared by a plugin and such plugin is not active), the block will be presented in a "disabled" state, and will not be shown on frontend. You’ll need to activate the plugin in order to make the block appear.

Icons

Some blocks support icons as decoration. Icons are generated through the Fontello web service, and most of them are taken from the Font Awesome package. In order to allow the system to support also other packages in the future, we’re not following the Font Awesome naming convention for icons; instead of prefixing them with fa fa-code-of-the-icon, the following syntax should be used: icon-code-of-the-icon.