Custom Classes
Spacing
To maintain consistent spacing between elements, avoid adjusting the margin and spacing with Elementor’s styling tool and try to use the global spacing classes in the class field of elements. Below outline how to structure the classes properly.
Padding
This div has the class "pad"
Padding can be set to specific sides by formatting the class as "pad-[side], example "pad-rt"
The side syntax is “lt”, “top”, “rt”, and “bot”, for left, top, right, and bottom.
Padding can be set to specific increments by formatting the class as "pad-[amount], example "pad-50pc”
The amount syntax is “75pc”, “50pc”, “33pc”, “25pc”, “20px”, “10px” and “5px”, “pc” is percent and “px” is pixel size.
Padding can be set to only show on specific screen sizes as "pad-[size], example "pad-lg"
The screen syntax is “s”, “m”, and “lg”, for mobile, tablet, and desktop.
Amount, Side, and Screensize can be specified in combination with each other by formatting with the syntax above in the class structure show below
pad-[amount]-[side]-[size]
Margin
This div has the class "marg"
margding can be set to specific sides by formatting the class as "marg-[side], example "marg-rt"
The side syntax is “lt”, “top”, “rt”, and “bot”, for left, top, right, and bottom.
margding can be set to specific increments by formatting the class as "marg-[amount], example "marg-50pc”
The amount syntax is “75pc”, “50pc”, “33pc”, “25pc”, “20px”, “10px” and “5px”, “pc” is percent and “px” is pixel size.
margding can be set to only show on specific screen sizes as "marg-[size], example "marg-lg"
The screen syntax is “s”, “m”, and “lg”, for mobile, tablet, and desktop.
Amount, Side, and Screensize can be specified in combination with each other by formatting with the syntax above in the class structure show below
marg-[amount]-[side]-[size]
Use the class “dark-grad” to add the dark background gradient to sections
Class= “border-rainbow”
Class= “border-rainbow-rev”
Class= “half-tone”
Class= “half-tone-alt”
Text
Display: Type XXL
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
P
p : Type "Small"
p : Type "Medium"
p : Type "Large"
p: Type "XL"
p: Type "XXL"
Buttons
Colors
var(--e-global-color-a8ef9f7 )
var(--e-global-color-35afca0 )
var(--e-global-color-7d5ff88 )
var(--e-global-color-07d1ff3 )
var(--e-global-color-52883c1 )
var(--e-global-color-b03b345 )
var(--e-global-color-7a04e44 )
var(--e-global-color-8b25dc3 )
var(--e-global-color-c71c6dc )
var(--e-global-color-443a3db )
var(--e-global-color-0e05c78 )
var(--e-global-color-5e77997 )
var(--e-global-color-b2b581d )
var(--e-global-color-8eabe55 )
var(--e-global-color-b613a78 )
var(--e-global-color-ec705af )
var(--e-global-color-aa21761 )
var(--e-global-color-3c3a855 )
elementor-heading-title
heading-h1-display
heading-h1
heading-h2
heading-h3
heading-h4
heading-h5
heading-h6
Header Size Classes:
elementor-size-xxl
elementor-size-xl
elementor-size-large
elementor-size-medium
elementor-size-small
Text Size and Paragraph Size Classes:
elementor-size-xxl
elementor-size-xl
elementor-size-large
elementor-size-medium
elementor-size-small
small-header