Best Practices for Layout

Beaver Builder, and all other page builders use rows with columns to lay out pages.

Any module - text, photo, button, etc - will always be inside a column, which may be one of several columns in a row. A module never stands alone.

Both simpler and more detailed explanations of how rows, columns, and modules work in Beaver Builder can be found online. Some links will be added to this page shortly.

The Box Model

Each element or container on a web page is a box, and each box is governed by various properties, such as width, height, position, colour. and The box model is the technique used to refer-to, or control size and spacing.

 

Useful tips

In brief, for now, what is useful to know is:

  • Rows
    • Sometimes a single row with lots of items is fine for your layout,
    • and sometimes it will feel better to make multiple rows, one for each section.
  • Columns
    • You can stack multiple modules vertically inside a column.
    • For this reason, the columns themselves have fairly comprehensive styling controls for text and page elements inside the modules inside them.
  • Modules
    • By default, modules have margins set to keep space between modules, as well as from the side of the page content boundary.
    • These module margins respond to mobile devices in an interesting way.
    • It's a way which differs from the behaviour of rows and columns, which is explained here:

Responsive spacing on mobile devices.

At small device breakpoint (768px by default)

  • Rows
    • Margins
      • All: 0
    • Padding
      • Left & Right: 0
      • Top & Bottom: as set
  • Columns
    • Margins
      • All: 0
    • Padding
      • Left & Right: 0
      • Top & Bottom: as set
  • Modules
    • Margins
      • if set to greater than global OR if negative value, then set them to the value that is set in Page Builder > Tools > Global Settings.
      • if set to less than global setting, and not negative value, then retain custom value.
Do NOT follow this link or you will be banned from the site!