Best Practices for Layout

Beaver Builder – like all other page builders – uses rows with columns to lay out pages.

Any module – text, photo, button, etc – will always be inside a column. A module never stands alone.

The column may be one of several columns in a row.

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 position, margin, border, padding, width and height.

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.