Understanding The Layout

A page in Bricks, like any typical website, consists of the three main parts: 

  • Header (= Template type: Header)
  • Content (unique for every page)
  • Footer (= Template type: Footer)

Don't be intimidated by an empty page, you can always hit the ground running by inserting a pre-made template and tweak your layout from there.

The Structure

Bricks uses a layout structure that enables you to build any design. It consist of four building blocks:

  1. Section: outermost building block. Stacked on each other sections contain rows, columns, and elements.
  2. Row: reside within a section. Stacked on each other rows contain columns and elements.
  3. Column: reside within a row. Horizontally aligned and resizable columns contain elements.
  4. Element: reside within a column. Stacked on each other elements are the smallest building blocks.

When you hover over a building block (section/row/column) it highlights the block and provides you with the following options:

  • Edit (settings such as width, background, border, box-shadow, typography, CSS etc.)
  • Move (drag and drop the block anywhere on your page)
  • Add (adds another one of this building blocks)
  • Clone (clones the block with all its settings)
  • Clear/Delete (clears/deletes the block once you confirmed this action with another click)