Creating a New Style Kit

You can always create from scratch and create a new Style Kit or use one of the provided Style Kits from the Library as a starting point. In both cases, you interact with the Style Kits Sidebar, where you will find all the related controls. Any tweaks that you make to the values of these style controls will be stored in your Style Kit, and can be recalled on any page or globally.

Workflow

Let's say that you decide to set a basic body and Headings typography, edit the colors, and the button styles. 

When setting up a Style Kit, it is always helpful to drop some elements into your layout so you can see the effect right away. For example, when you are editing the Headings Typography, make sure that you have some instances of the Heading widget in your page.

As soon as you make the changes to these controls and you are happy with the result, click the Purple Save As button under the Style Kits panel.

You will then get a popup that prompts you to enter a name for your new Style kit. 

After you Save, your page will have the new Style Kit assigned. From now on, the Style kit will be available in the dropdown. 

Good job. You have now created a new Style Kit. Let's see how you can update this Style kit with any future changes.

Updating the Style Kit

At some point, you will definitely want to make changes to any of the Styles that you have defined in your Style Kit. Let's say for example that you want to reduce the font size of your H2s, throughout your entire website.

If you use Style Kits, design maintenance is quite easy and efficient. You can keep your Style Kit up-to-date from any page, simply by clicking the green Update Style Kit Button.

Heads up! 

Do not confuse this with the default Elementor Update button that you click when you want to update your layout / page. If you click this one, the new values will not be stored in the Style Kit, but will instead apply on this page only.

 (DO NOT use this one)

For the Style Kit values to be saved into the Style Kit  (and apply on other pages), you need to make sure that you click the Update Style Kit button.

When you click the Update Style Kit button, you get a confirmation popup that informs you that the Style Kit will affect any other pages that use the same Style Kit.

If you are updating the Global Style kit, then the changes will naturally take effect site-wide.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us