Applying a Style Kit to a template when importing

With Style Kits, you always get an optimized experience when importing templates. This new experience allows you to apply a theme style preset (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 Theme Style Kit. For example, all templates in the Kali template Kit, follow the styles that are defined in the Kali Theme Style Kit. This gives the template the styles for typography, colors, etc. 

However, during import 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 default. 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 Theme 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.

💡 Note: In order for the additional Style Kits to be available in the dropdown, you need to already have them imported. See how to import Theme 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 its own Style Kit (Style Kit B): Source Sans for body and text and 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