Essentials custom CSS classes

CSS classes can be used to add additional styling to some elements (via several elements in WPBakery or on any element in Elementor).

Essentials is built with Bootstrap 4, so all bootstrap classes can be used, a full list of bootstrap classes are available in bootstrap documentation site.

Essentials includes many great CSS styling classes that can be used for more advanced styling in some elements, we will provide here some of the most useful Essentials classes:

All background colors classes in Essentials starts with the prefix “bg-” followed by the name of the color for example “green”.

You can use the dynamic colors (that can be changed via theme options) for example:

• bg-gradient-primary

  The primary gradient background color of the theme.

• bg-primary

  The primary color of the theme.

• bg-secondary

  The secondary color of the theme.

Other static colors can be used:

To change the color of the text you can use the available CSS class which start with the prefix “text-” and followed by color name. You can use the same colors listed in the previous background colors section (except the light variant colors) and in addition to the dynamic text colors like “Body default”, “Heading default”, “Primary” and “Secondary” colors which can be changed via theme options:

• For Body color use text-body-default
• For Heading color use text-heading-default
• For Primary color use text-primary
• For Secondary color use text-secondary

Other Static text colors:

• text-white
• text-blue
• text-green
• text-cyan
• text-yellow
• text-orange
• text-red
• text-brown
• text-purple

To change the size of the text you can use the available CSS classes which start with the prefix “text-” and followed by size value or size name.

Below the list of the available classes in the theme:

• For 24px size use text-24
• For 20px size use text-20
• For 18px size use text-18
• For 14px size use text-small
• For 12px size use text-extra-small

If you’re looking to use other text size you can define your own class in the Theme options (Theme options > Layout > Advanced > Custom css), for example:

.text-28 { font-size: 28px !important; line-height: 44px !important; }