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:
Background colors
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:
bg-green
bg-blue
bg-yellow
bg-white
bg-black
bg-brown
bg-cyan
bg-orange
bg-red
bg-pruple
bg-green-light
bg-blue-light
bg-yellow-light
bg-brown-light
bg-cyan-light
bg-orange-light
bg-red-light
bg-pruple-light
bg-gray-1
bg-gray-2
bg-gray-3
bg-gray-4
bg-gray-5
bg-gray-6
bg-gray-7
bg-gray-8
bg-gray-9
bg-dark-opacity-1
bg-dark-opacity-2
bg-dark-opacity-3
bg-dark-opacity-4
bg-dark-opacity-5
bg-dark-opacity-6
bg-dark-opacity-7
bg-dark-opacity-8
bg-dark-opacity-9
bg-light-opacity-1
bg-light-opacity-2
bg-light-opacity-3
bg-light-opacity-4
bg-light-opacity-5
bg-light-opacity-6
bg-light-opacity-7
bg-light-opacity-8
bg-light-opacity-9
Text colors
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
Animations
Fly animation
fly-sm
fly
fly-lg
Scale animation
scale-sm
scale
scale-lg
Scale inverse animation
scale-inverse-sm
scale-inverse
scale-inverse-lg
Shadows
Default Shadows
shadow-sm
shadow
shadow-lg
Hover Shadows
shadow-hover-sm
shadow-hover
shadow-hover-lg
Inverse Hover Shadows
shadow-inverse-hover-sm
shadow-inverse-hover
shadow-inverse-hover-lg
To remove the shadow you can use this class: shadow-0
Spacing
How it works:
Assign responsive-friendly margin
or padding
values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from 5px
to 200px
.
Notation:
The classes are named using the format pix-{property}{sides}-{size}
.
For example: to add a 20px horizontal padding we can use the class: pix-px-20
.
Where property is one of:
m
– for classes that setmargin
p
– for classes that setpadding
Where sides is one of:
t
– for classes that setmargin-top
orpadding-top
b
– for classes that setmargin-bottom
orpadding-bottom
l
– for classes that setmargin-left
orpadding-left
r
– for classes that setmargin-right
orpadding-right
x
– for classes that set both*-left
and*-right
y
– for classes that set both*-top
and*-bottom
- blank – for classes that set a
margin
orpadding
on all 4 sides of the element
Where size is one of:
5
– (by default) for classes that set themargin
orpadding
to5px
10
– (by default) for classes that set themargin
orpadding
to10px
...
200
– (by default) for classes that set themargin
orpadding
to200px
The available sizes are: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 120, 130, 150, 200.
(You can add more sizes by adding entries to the $spacings
Scss map variable.)