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-nAdd margin. This is the spacing outside the Beaver builder CSS Class
m-nYou 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
