Applying a Style Kit to a template when importing

Style Kits version 1.3.8 introduces an optimized experience when importing templates. This new experience allows you to choose which Style Kit to apply to the template that you are importing.

How it works

For every template in our template kits, the styles (typography, colors, spacing, buttons etc) are stored in a Style Kit. For example, all templates in the Kali template Kit, follow the styles that are defined in the Kali Style Kit. This gives the template the styles for typography, colors etc. However, the new import method allows you to select a different Style Kit, and apply it to the template.

Importing the template with the default Style Kit

Every time you import a template, the default Style Kit is already selected in the dropdown. In our example we are importing a template from the Architect template pack, which uses a Style Kit with the same name (Architect). As we see in the screenshot this is already selected by defalt. Clicking Next will import the template with this default Style Kit. 

The Styles of the template will be the default styles that you see at the demo/preview.

Importing the template with another Style Kit

If you want to use another Style Kit on the template, you simply need to choose it from the dropdown. The dropdown lists all the available style kits that are included in your installation, including (of course) your own custom Style Kits.

If you select any of those Style Kits and hit next, the template will be imported with the styles of the Style Kit you selected.

💡 Why this import method is useful

If you are already working with a Style Kit, and you import any of our templates, you will most probably want the styling to be consistent with the styles you are already working with.

Common case:

  • In your website, you are working with a global style kit (Style Kit A) that sets Poppins font for body and headings and defines a red button color. 
  • Now, let's assume that you want to import a template from the Style Kits template collection. Most probably, the template is using styles from it's own Style Kit (Style Kit B): Source Sans for body and text and a blue button color. 
  • With the new import method, you can assign the Style Kit that you are using at your site, on any other template that you are importing. This way, the layout is imported with consistent styles as your entire site (Poppins font for body and headings and defines a red button color).

⚡️ Notes:

  • The Style Kit that is assigned to the template on import, applies only for this page. If you want a Style Kit to take effect on your entire site, please read this article on How to make a global Style Kit
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