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
- Margins
- Columns
- Margins
- All: 0
- Padding
- Left & Right: 0
- Top & Bottom: as set
- Margins
- 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.
- Margins