Understanding The Layout

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

Complete page with header, content, and footer. All built with Bricks.

Anatomy Of The Layout

Bricks uses a layout structure that allows building pretty much any design.

The layout consists of four building blocks:

  1. Section: Outermost building block. Sections are stacked, they contain rows, columns, and elements.
  2. Row: Reside within a section. Stacked on each other, they contain columns and elements.
  3. Column: Reside within a row. Horizontally aligned next to each other, they are resizable and contain elements.
  4. Element: Reside within a column. Stacked on each other elements, they are the smallest 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 (all available controls appear in the panel. Such as layout, background, border, box-shadow, typography, CSS, etc.)
  • Move (hold-down your mouse to drag & drop this block anywhere on your page)
  • Add (add another building block to the page)
  • Clone (clone the block with all its settings)
  • Clear/Delete (clear/delete block after confirmation)

Sections come with two more options:

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

Inspect Your Layout Structure

You also have a very comprehensive view of your page structure when clicking the Structure icon at the left-hand side of the toolbar. Hovering over any block highlights it on the canvas and reveals the same action icons as doing so in the canvas:

Inspect Page Structure via: Toolbar > Structure

Structure view is especially useful for moving blocks like sections or any block really that covers a large vertical area in the canvas.

PRO Tip: Use the Direction setting in the Layout group when editing a section, row, or column to customize the flow of blocks on your pages to your requirements. 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.