3.Basics of CSS styling with
Beaver Builder

MAIN CLASS SELECTORS

 

LAYOUT  .fl-builder-content

One per page containing all Beaver Builder elements.
(incidentally It's FL because Beaver Builder was made by FastLine Media)

ROWS  .fl-row

Children of the main layout containing column groups.

COLUMN GROUPS  .fl-col-group
A column group that can contain up to 12 columns.

Columns .fl-col
Individual columns which contain modules.

Modules .fl-module
Modules are the last elements added to a Beaver Builder layout.

Thanks to Dave Porter for mentioning that we can have up to 12 columns.
Just hover over the "column edit" icon and "insert new column" before 0r after.

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

4 PHOTO MODULES

AUTO GENERATED CLASSES

This 1st row has the custom class selector: row-for-boxes

Beaver Builder automatically created a unique class selector for this called  .fl-node-57fdf275c2361 

This text module has no custom selector.

The column has the custom class selector: yellow-box. 

This text module has a custom class selector middle-box.

The column has the custom class selector:  grey-box.

This has a custom ID selector. right-box

The column has the custom class selector: blue-box. 

 

This 2nd row has the custom class selector: row-for-boxes

This is a duplicate row from above. Beaver Builder creates a new selector for it. .fl-node-57fe0783a6565.

This text module has no custom selector.

The column has the custom class selector: yellow-box. 

This text module has a custom class selector middle-box.

The column has the custom class selector:  grey-box.

This has a custom ID selector. right-box

The column has the custom class selector: blue-box. 

 

This 3rd row has the custom class selector: row-for-boxes

This is a saved row which duplicated from above. Beaver Builder creates a new selector for it: .fl-node-57fe0de04c3cd .

This text module has no custom selector.

The column has the custom class selector: yellow-box. 

This text module has a custom class selector middle-box.

The column has the custom class selector:  grey-box.

This has a custom ID selector. right-box

The column has the custom class selector: blue-box. 

 

This 4th row has the custom class selector: row-for-boxes

This is save row from above but BB creates a new selector for it: .fl-node-57ff04099603f

This text module has no custom selector.

The column has the custom class selector: yellow-box. 

This text module has no custom selector.

The column has the custom class selector:  grey-box.

This has a custom ID selector. right-box

The column has the custom class selector: blue-box. 

 

This is a Global saved Row

The row gets a unique class selector everytime, but the modules in the row keep the same selector for each copy.  This means you can use the Beaver Builder generated selectors to change CSS globally.

This text module has no custom selector.

The column has the custom class selector: yellow-box. 

This text module has a custom class selector middle-box.

The column has the custom class selector:  grey-box.

This has a custom ID  & Class selector: right-box

The column has the custom class selector: blue-box.

This is a Global saved Row

The row gets a unique class selector everytime, but the modules in the row keep the same selector for each copy.  This means you can use the Beaver Builder generated selectors to change CSS globally.

This text module has no custom selector.

The column has the custom class selector: yellow-box. 

This text module has a custom class selector middle-box.

The column has the custom class selector:  grey-box.

This has a custom ID  & Class selector: right-box

The column has the custom class selector: blue-box.

Quick Notes

 1. For flexibility use your own class sectors rather than Beaver Builder ones like .fl-node-57fdf2baa818b.

2. Avoid using ID selectors unless there is only on a page.

3.  Save Global Rows still generate a new Beaver Builder generated. BUT Modules saved in Global Rows retain the same selector.

4. Global Modules still generate a unique sector when reused

5. Try adding .fl-builder-content before you selector before using !important.

6.  I forgot to say avoid selectors names like " right-box" in these where with responsive it may not make sense (I did it to make a point and forgot in the video!)

 

Get Beaver Builder Now!