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