In Beaver Builder, you cannot place rows within rows but you can construct complex column layouts within a single row.
The Outline view for this layout shows one row with three main columns and two child columns.
Column groupings are not shown in the Outline panel but do appear in the hierarchical structure in the HTML output. Abstracting away from the actual code, the structure for the columns and modules in the example is as follows:
row
column group
column
Heading module
column group
column 2a
Heading module
column 2b
Heading module
Photo module
Heading module
Photo module
child column group
column
Button
column
Button
Basic column rules and limits
- The main columns are divided into column groups, which can be thought of as “layers,” stacked vertically in the row. In the example, there are two main column groups: the top group has one column and the bottom group has two columns.
- A row can have from one to an unlimited number of column groups (vertical layers).
- Modules placed side by side must be put into separate columns. A main column group can have a maximum of 12 columns.
- Any column within a column is a child column and is also treated as a column group. A child column group can have a maximum of four columns.
- Any column can contain from zero to an unlimited number of modules placed vertically in the column.
Heuristics for column layouts
You can often achieve layouts that look identical on a large screen but have different underlying column structure. There are two main reasons for preferring one layout over another:
- Responsive stacking: Columns stack differently as screen width decreases. The stacking order depends on the column structure.
- Background scope: You can apply color or photo backgrounds to individual columns, and this can affect how you want to group them.
Responsive stacking
Here’s an example of layouts that look identical but produce different responsive results. When you look at this layout on a small device, you can see that the stacked order shows the two image headings from the third column group, then the two images from the fourth column group.
You can correct this problem by moving the two images into the third column group as child columns.
For details about how columns stack, or how to prevent stacking or reverse the stacking order, see the article about responsive columns.
Background scope
Each main column and child column can have its own styling (backgrounds borders, margins and padding), but what if you want the style to apply to more than one column? There are two main solutions:
- Create one or more child columns and apply the style to the parent column.
- Create the same style for two main columns and set the margins and padding to
0 on their their shared border so the styling looks seamless.
See the tip about determining structure and scope for existing columns.