Rows, Columns and Modules

There are many long guides on the web, so let's make this the simple version.

The Layout

On a page you can have multiple rows, which always sit above or below each other.

Each row has one or more columns, which sit next to each other.

Each column can have one or more modules, which site above or below each other.

I am a row

I am a column

I am a module

I am a column

I am a module

I am a column

I am a module

Rows, columns and modules

You can adjust the margins - the space on the outside of the element - on any of these elements (in the last tab: Advanced).

On rows and columns you can also adjust the padding - the space inside the element.

Rows

Rows can be set to be the full width of the website, or set to a narrower fixed width.

You can set certain attributes for the whole row - such as text colour - which apply to all elements in the row.

You can set a background to a row. This background can be a number of things, such as a solid colour, an image, a slideshow, or parallax-scrolling image:

I am Parallax

Columns

Columns are often taken for granted - which is fine - but they also have settings which can be adjusted individually if needed.

A Text Editor module to show that modules can be stacked inside columns.

A Number Counter module
%
IMG_0206

A column with some extra styling applied using the Column Settings.

This text is a Text Editor module.

Modules

Modules are what renders the content. There are many types of modules eg. Text, Photo, Video etc.

Modules - being unique - have their own individual controls, depending on what type of module you use.

The Advanced tab is the same for all modules, and has margin and animation controls, and display conditions.


This section will be expanded-on, but for now here are some links.

This guide is fairly good for beginners:
The Beaver Builder grid explained simply so you can be more creative

For more advanced instructions, see the Beaver Builder manual:

Share this article:
Do NOT follow this link or you will be banned from the site!