What is a Style Kit
A Style Kit is a collection of Styles, that you can define and control under the Page Settings > Style tab, in the Elementor Editor.
Currently, a Style Kit stores the values of the controls in the Style Panel as shown in the screenshot below.
Let's go through the panels
- Body Style
Allows you to set a background color for the body of your page
- Body Typography
Controls for the body typography
- Headings Typography
Controls for H1-H6 typographic entities
- Heading Sizes
Allows size manipulation for headings powered by the Heading Element
- Text Sizes
Allows size manipulation for text (span,div or p) that are powered by the Heading Element
- Global Colors
Sets the default color for links, text and buttons. Also provides two additional classes for section backgrounds.
Gives fine-grain control over the button styles for each button size
- Outer Section Padding
Sets a padding to the outer sections of the layout, for consistent spacing between sections.
- Column Gaps
Provides the option to override the values for Elementor's column gaps.
A panel dedicated to workflow tools. You can export the Style Kits CSS or reset the styles on the page.