Forget the hustle of starting a website from scratch or struggling to fix issues from 3rd party kits! Elementor has got you covered with the new Elementor Kits Library; a library of pre-made websites by Elementor.
In this tutorial, you’ll learn how to enable access to the kits library, import or export a kit, customize a kit, use the hello theme to customize your headers and footers, as well as use the Elementor design system.
The Elementor Kits library has several professionally designed complete Elementor websites for both free and pro users of Elementor. The free kits are available for you to use on your free version of Elementor, but if you want to access more advanced features like archive pages, WooCommerce pages, etc, you would have to get the pro version of Elementor to access the pro kits.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Template Kits Tutorial
Import a Template Kit to Your Website
On your WordPress dashboard, go to Elementor > Settings (03:11), find the Import-Export template kit, and activate it, then save your changes. By default, it will be active but just check to make sure.
When you’re done go to Templates > Kit Library, here you’ll find several free, pro, and expert templates you can choose from.
If you like a kit, you can just click on it and you can check it out, and browse through the pages to see if it can work for you.
Let’s check out the Ceramic Studio kit for example (04:39), it has perfectly designed pages and it is responsive on tablet and mobile devices.
When you’re satisfied with the template and you want to use it, click the Apply Kit button, then you’ll have to connect your website to the Elementor account, click Get started.
In the next window, before the importing process starts, you get to choose whether to import everything, or you can uncheck some features if you would rather do without them.
In this case, we’re going to import everything so just leave everything checked and click Next (06:15)
When your kit is done importing, go back to the dashboard, and when you reload your preview site, your kit is now active, browse through your pages and see how well they’re working.
Our next step is to set up/customize the header and footer, but first, let’s create a menu for our website.
Back to your WordPress dashboard, go to Appearance > Menus, give it a name; Menu then check the Primary option, and the next step is assigning menu pages to your menu.
Under Pages select the About us, Contact, Workshop, and Workshops pages and click Add to Menu.
Drag the contact page to the bottom of the menu, then the Workshops page just below the Workshop page. When you’re done save the menu (09:04)
When you go back and reload the homepage, your menu should now display as you just set it (09:33)
Back under Menus, go to Settings > Permalinks (09:59), here, check the Post name option, so that the menu item’s URL appears as the domain name/the page name, save changes when done.
When Elementor is creating these template kits, they’re using their own Hello theme, so if you want to achieve the exact results you’ll have to install the Hello Elementor theme. However, the template kits still work with other themes too.
To install the Hello Elementor theme, go to your dashboard, under Appearance > Themes, install and activate the theme (11:04)
Go back to your website and reload (11:15)
Back on your dashboard, go to Pages and open up the Home page with Elementor, here we’re going to use the Elementor Header Footer builder.
If you don’t see it in your Elementor editor, first go back to your dashboard and under Elementor > Settings > Experiments, activate the Hello Theme Header & Footer (12:22), then save your changes.
Back in your editor reload the page then click on the Hamburger icon (☰) in the corner and go to Site Settings, here you’ll find the Header and Footer options (12:47)
Go to the Header option, enable the Site Logo and Menu options, then set the Width to Full Width.
Select the Site Logo option and under Type select the Title option to use the title of your website.
To make changes to your website title you can go to the Customizer of the Hello theme; under Site Identity > Site Title, give it a title of your choice and add a Tagline if you want to (13:12)
Alternatively, you can change this in your Elementor editor under Site Settings > Site Identity (13:26). Just change the Site name to ‘eramic’ as it is in the kit, then click the Update button.
Select the Site Logo option, under Text Color select the Accent color option, this is one of the Global styles that are imported with your Elementor kit (14:01), so you don’t have to struggle to make changes with custom settings.
Under Typography select the Primary option, and you can further customize it to your preference, for example, change the font Weight to 800.
Go to the Menu option next and under Color, select Accent.
When you’re done customizing your header, go to the Footer option back under Site Settings, enable the Site Logo and Copyright options.
Go to the Site Logo option, under Type select Title, set the Text Color to Accent, then under Typography set the Size to 15pixels (15:52)
The Elementor Design System
When you go back to Site Settings, there’s an option called Design System (16:12), here you can make changes to the Global Colors and Global Fonts, any changes you make to these global styles under the design system will be applied wherever these styles are applied on your website.
Under Global Colors;
You can set up specific colors for your website and apply them in the various sections of your web pages by just clicking on the global icon (🌐 ) (17:11)
For example, if you go to the Accent global color (the one we’ve been using on the site logo, menu icons, etc), if you change it to a different color for example green, it will automatically change to green in all the places where you had applied this Accent global color (17:26)
Using global colors saves you the time you would have spent going to every section or widget or element of your website to change the color to what you want.
The same applies to the Global Fonts option. Under this option, you can have specific fonts created and saved for specific sections on your website for example heading fonts, body text, etc (18:20)
If you make any changes to any of the global fonts under the design system, for example, if you change the size or weight of the text, it will be applied wherever this particular global font has been applied on your website.
You can also create a new global font; for example, a new font for your buttons by clicking on the Add Style option, name it ‘Button text’ then choose the particular font you want for it and save (18:26), and wherever you’ll apply this button text on your website, this style will be applied. And if you want to make changes you just go back to the design system and do so.
Export a Kit From Your Elementor Website
You can export the particular kit you’ve edited from your Elementor website so that you can use it somewhere else.
To do this:
Go to your dashboard, under Elementor > Tools > Import/Export Kit, click Start Export (21:01).
Under Kit Information, add the Name of your kit and a Description, then click the Export button (21:37)
When it finishes exporting it will download as a zipped file, and you can rename it to what you want (21:45)
If you want to import an exported kit into your Elementor website;
Back on your dashboard, under Elementor > Tools > Import/Export Kit, click on Start Import then in the next window you can select the file you exported/downloaded and import it.
Note:
If you’re importing a kit into an already existing website, you have to select the pages that belong to the specific section of your website.
In conclusion
That’s how you can work with the Elementor Kits Library and be able to import templates kits into your website, customize them and even export them to use elsewhere.
If you have any questions or comments, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.
