Collor Pallete

You can change colors from Appearance > Customize > Colors

 
Accent
 
Accent-2
 
Accent-3
 
Base
 
Base-2
 
Base-3
 
Contrast
 
Contrast-2
 
Contrast-3

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 5

Body Text

Pretium lorem primis lectus donec tortor fusce morbi risus curae. Dignissim lacus massa mauris enim mattis magnis senectus montes mollis taciti accumsan semper blandit nibh aliquam metus morbi cras magna vivamus per risus. Dapibus magnis metus praesent congue gravida magna netus inceptos iaculis.

 

Button Classes

button

button outline

button outline accent

Other Classes

You can apply the following CSS classes in the Advanced > Class field of any Beaver Builder module, row, or column to adjust its appearance.

Class Name Effect
border-accent Adds a thin border using the theme’s accent color. Ideal for text modules or content boxes.
round-border Creates soft, rounded corners around the element.
padding-20 Adds 20px padding inside the element for extra spacing.
padding-40 Adds 40px padding inside the element for even more spacing.
transparent-background Applies a light, semi-transparent background to help content stand out.
shadow Adds a subtle shadow around the element for depth.
large-number Styles large, semi-transparent numbers (e.g., for section headings).

Tip: You can combine multiple classes by separating them with spaces.
Example: class="border-accent round-border padding-20 shadow"