Manual for Beaver builder

How to apply to Beaver builder

1 | Add rows and module

  • Add a row with columns
  • Add a module

2 | Go to class

  • Go to the Advanced tab of a row, column or module. It works with all of them.
  • Go to class(es)
  • Add a code in the field

Simple text styles

Text styles always start with “t-” followed by a value like “n” (normal) or “l” (large)

For text it is recommended to make heading in the normal text module and add the style inside the text. By disabling beaver builder the style will still be valid.

Insert class in the text module

For example: font size

Text and typography

Text size: Large

<p class="t-l">Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non eros suscipit egestas. </p>

Font color: medium red

<p class="t-red07">Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non eros suscipit egestas. </p>

Font color: dark red

<p class="t-red011">Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non eros suscipit egestas. </p>
<h2 class="t-red011 t-l">Heading</h2>
<p class="t-red011 t-l">Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non eros suscipit egestas. </p>

Spacing

Add padding. This is the spacing within the Beaver builder CSS Class

p-n

Add margin. This is the spacing outside the Beaver builder CSS Class

m-n

You can combine all styles like colors, typography and spacing.

<p class="t-l t-red09 red02 p-n">Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non eros suscipit egestas. </p>

Style for row, column or module

In the example above the result will be:
Large text, dark red color, light red background, normal spacing around the text inside a Gutenberg block

Scroll to Top