The tools tab

The tools tab provides two options. To reset the Style Kit styles, or Export them and use them in another location.

Reset Styles

This option resets all the Style Kit values and essentially removes the Style Kit from the page. The values on all the Style Kits controls will be reset and you can start a new Style Kit from Scratch. You should now be seeing the layout without the styles that were powered by Style Kits.

Remember that at any point you can assign any Style Kit to the page again, using the Page Style Kit dropdown.

Export Style Kit CSS

This option will export all the Style Kit-related CSS that is available in your current Style Kit. Clicking the Export CSS button will trigger the following popup, with all the CSS code ready to copy and paste.

Removing page IDs

You will notice that by default, the CSS text contains the ID of the specific page. This means that wherever you put this CSS code, it will only affect the selected Elementor page. 

If you want the exported Style Kit CSS to apply on all your Elementor pages, check the checkbox that says "Remove Page ID from the CSS"

You will then notice that the ID is stripped from the text. Now you can copy this CSS and paste it in your theme's stylesheet, and it should apply for all your elementor pages.

Errors while using the exported CSS?

If you paste the Style Kit CSS in the WordPress customizer or your theme's stylesheet via the WordPress dashboard, you might find some errors triggered. This happens because as of now, the CSS editor in WordPress, does not recognize the modern CSS variables. See the related WordPress ticket here.

Style Kit uses such variables for the background color classes.  You can go ahead and update the CSS, despite any warnings for errors. The CSS will play just fine.

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