Understanding The Layout

Bricks 1.2 introduced a completely new way to build truly flexible layouts with the new “Container” element. To learn more about how to create your layout in Bricks 1.2+ please head over to https://academy.bricksbuilder.io/article/container-element/ as the article below only covers creating layouts in Bricks up until version 1.1.3.

Being a fully-fledged website builder, Bricks lets you design your entire site visually. That includes your site header, footer, and of course the content of your pages.

Complete page consisting of header (template), content, and footer (template)

Anatomy Of The Layout

Bricks’ flexible layout structure allows to build pretty much any design.

The layout consists of four building blocks:

  1. Section (orange): Outermost building block. Sections are stacked, they contain rows, columns, and elements.
  2. Row (purple): Resides within a section. Stacked on each other, they contain columns and elements.
  3. Column (blue): Resides within a row. Horizontally aligned next to each other and resizable, they contain elements.
  4. Element (green): Resides within a column. Stacked on each other elements, they are the smallest building blocks.
Building blocks
The layout: Sections, rows, columns, and elements

Block Actions

When hovering over a section, row, or column the block is highlighted and the following action icons options appear:

  • Edit: Click to start editing. Available controls appear in the panel (e.g. layout, typography, background, border, box-shadow, CSS, etc.)
  • Move: Hold down your mouse to drag & drop block anywhere on your page.
  • Add: Click to add another building block to the page.
  • Clone: Click to clone block with all its settings.
  • Clear/Delete: Click to clear/delete block after confirmation.

Sections come with two more options:

  • Insert template below: This lets you insert any template right underneath a section.
  • Save section as template: Save highlighted section as a template.

Structure: Inspect Your Layout

Click the Structure icon in the builder toolbar for an x-ray view of all your blocks. Hover over any block to highlight it on the canvas and to reveal its action icons:

Panel: Structure
Inspect Page Structure: Toolbar > Structure

The Structure view is especially useful to easily move large blocks like sections or any block that covers a large vertical area on the canvas.

PRO Tip: Use the Direction setting in the Layout group when editing a section, row, or column to change the flow of blocks. This way you can, for example, align sections side-by-side and/or stack columns. You can even reverse the order of blocks this way. Very useful when editing smaller breakpoints where columns are usually stacked.