Style Kit setup template
HeadingElement
overline
This is Heading 2
This is Heading 3
This text deserves a nice font. This is a nice font.
This is Heading 3
This text deserves a nice font. This is a nice font.
This is Heading 3
This text deserves a nice font. This is a nice font.
Primary Accent
Secondary Accent
Dark Background
Light Background
Accent Background
Color
Style Kit Colors
Manage the essential colour system of your layouts by defining these basic colors.
Heading Element
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
TExt Sizes
This is Large Text
This is Medium Text
This is Small Text
Heading Sizes
XL Sub-Heading
XL Heading
Large Sub-Heading
Large Heading
Medium Sub-Heading
Medium Heading
Small Sub-Heading
Small Heading
XS Sub-Heading
XS 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.
Default Column Gap
The Default column Gap defines the default padding of the columns in your Elementor Layouts.