Essentials custom CSS classes

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:

1
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:

Standard colors:
bg-green
bg-blue
bg-yellow
bg-white
bg-black
bg-brown
bg-cyan
bg-orange
bg-red
bg-pruple
Light variant colors:
bg-green-light
bg-blue-light
bg-yellow-light
bg-brown-light
bg-cyan-light
bg-orange-light
bg-red-light
bg-pruple-light
Gray shades:
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
Dark and Light opacity colors:
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
2
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
3
Animations
Fly animation

Fly small

fly-sm

Fly medium

fly

Fly large

fly-lg
Scale animation

Scale small

scale-sm

Scale medium

scale

Scale large

scale-lg
Scale inverse animation

Scale inverse small

scale-inverse-sm

Scale inverse medium

scale-inverse

Scale inverse large

scale-inverse-lg
4
Shadows
Default Shadows

Shadow small

shadow-sm

Shadow medium

shadow

Shadow large

shadow-lg
Hover Shadows

Hover shadow small

shadow-hover-sm

Hover shadow medium

shadow-hover

Hover shadow large

shadow-hover-lg
Inverse Hover Shadows

Inverse Hover shadow small

shadow-inverse-hover-sm

Inverse Hover shadow medium

shadow-inverse-hover

Inverse Hover shadow large

shadow-inverse-hover-lg

To remove the shadow you can use this class: shadow-0

5
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 set margin
  • p – for classes that set padding

Where sides is one of:

  • t – for classes that set margin-top or padding-top
  • b – for classes that set margin-bottom or padding-bottom
  • l – for classes that set margin-left or padding-left
  • r – for classes that set margin-right or padding-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 or padding on all 4 sides of the element

Where size is one of:

  • 5 – (by default) for classes that set the margin or padding to 5px
  • 10 – (by default) for classes that set the margin or padding to 10px
  • ...
  • 200 – (by default) for classes that set the margin or padding to 200px

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.)

pixfort
pixfort
Essentials support team
hub.pixfort.com

Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub

Related Posts