Primary / Links / Icons color
Secondary / button color
Dark Background Color
Light Background Color
Accent Background Color
Color
Style Kit Colors
Manage the essential colour system of your layouts through the Main Colours Style Kits tab.
Typography
Heading 1
In Style Kits you have complete flexibility of the Typographic styles. Adjust the styles for the Body and Headings typography panels in Style Kits.
Feature Heading 3
An example with an icon box
This is Heading 2
Go to the Style Kit panel, and manage the whole typography on this layout via a number of useful controls. You can also set up your Buttons and Column Gaps.
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6
Typography
Heading 1
This section uses the sk-dark-bg class. Handy if you want to see how the typography colours look over a dark background context.
Feature Heading 3
An example with an icon box
This is Heading 2
Go to the Style Kit panel, and manage the whole typography on this layout via a number of useful controls. You can also set up your Buttons and Column Gaps.
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6
This is XXL Text
This is XL Text
This is Large Text
This is Medium Text
This is Small Text
Heading Sizes
XXL Heading
XL Heading
Large Heading
MEdium Heading
Small Heading
Buttons
Button Styles
Dynamic button style control
Head over to the Style Kits panel, and open the Buttons tab to customise the style of each button size.
Accent background
Here's a section with an accent background colour class.
Forms
Contact Form Style
You can change the default styles of the Elementor form by customising the Forms panel in the Style Kit sidebar.
Default Column Gap
The Default column Gap defines the default padding of the columns in your Elementor Layouts.