How the Elementor Kits Library Works

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.ucm1LkyadSBd9bF4l6EDMGU2O Sf9HCo3T3bfk6ZJS1YwrxXaA 1QhMLrqjjmYcZn3sVVSubjN rPPClZX6kjLfiUvAXqVoy0XTZeP JYuIysqfpOowH9TkpP7dbH1vbRoATCg W

QDXNNPd67mfkww sbXvNsv3wAW34vvPnJdeGHoMo8pVZ651G YJgGbqbdACMXE w2QPU7WV2izVMa1J8gc3Lg6rO7beOrnh BWWy 1dSAZ5uMHI924BvEmHtlW8MfHnEgcw9TVfM

When you’re done go to Templates > Kit Library, here you’ll find several free, pro, and expert templates you can choose from.

v30Jx0MT5RWyZ7GlBBiBdX4VIhEe5AcvWaWSyadusY boLfaI1HRnDcww5pGWbaAJZhQNtiTEW0qQsvKgKYh93E5tiuh7ummCY0PU15qhfg3VXQ6o 7AY8nAzBJNdWDONAljS2 C
Elementor Kits Library

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.

NM2xuMeCV5DE9rBD5t4og1dr7dr0mp6j5c vQjdEaGOwWihv9i3uB8zMCvfyVo83AJJGOBkWsDKkqXZ aNA27 W2kLhdBTsvV5ZTzurPtz7Vkervl7JuQ1lgRGLwdbcO w7F16Y5

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)

5oVRD ySoKSaJQUQ9KbMve6qgzN5U5s412T43TG429LApfzB5JTd4y5mff1yI GJHFKGpqa8WL7irZAhKbIlxioovHyeUiRoVt5ogcGkA7yjJxNP rX1jtsjsMwLFseF n7gMJRL

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.

Customize Your Kit’s Header and Footer

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)

IXefTTtLOgVt mIxmCVDxEYlCIQJwy1THaJ0y HTodm7QUxUMuABbbljypaLp5pOZOuiejTNl97NUnD5NpTvKGpAq2uSvJOnBFkNk9B5rxKLooBfm8UBzp7gH4F1 ZeplAWfi64B

When you go back and reload the homepage, your menu should now display as you just set it (09:33)

8yQfYWFWykBu0YxKB JMB3v

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.3pz5QHFPmqq87eawCcTU5vG yAIBmaH 0uf6x1bEBnMvOAamrLj2T5wPPatqLQ9c5v5geTEM5sYphCZcMFb5T pXJq2nw2mZM 0wi97sqA6zL1zOOUmg3guVvSWLwiGXc6jxW5z

TuThDvaPHLRcE0 EjhNqMKr9LV6QP4gS6CWwvtn9jvxmwCdiEGFcRMI2OvkDfKSAK3fIyhvIQv8jzuZtDxxqXFAg0yeg7BtxDjbRjFcdfUTfrwIPZuIoz1e5u35I93n0U Ug Of1
lFPu8VpWxdFDxDijY5rRfS4CPWTJijlB9IgdU 0kHCm3LaZ

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)

oAQ1a2a1vgTxdB1ses8QO0f7jVYsLGrbfpmQFRnk0yhoccdq07DPrp E0YZ G9bJcHZBk5iCBqmhgfePwSQadhmVgNV4Se qd z4aKfymV2hwUuiKfgrb Ha07 BFHK pEn13cn

Go back to your website and reload (11:15)

Ay1IfWD3pJkg6QOvpsncbIWsU55P56nDisD3WTsC0tIVCw6y6FIFmjl9rFOc6b7v7xKQrj6U5

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.

sBYVlE2z5dYSoC6CmrhfsaSB07pMKUqqXMqAnQ3GnXBVzd26qXZDWLReYjJfrk9iTVceVjNDxnHp2 pYu3ETPaKFILbKP5nTkdIQlSIR9bf65WPIRSF40jUwUsWfsjFyr I1bmfE

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)

m Bw7wwQ5bwRSsu2pIxu29DXc75wgxLn3gjkuPWvCdsVtCkvmy0qs49 cRTAS3pcuNT WjNKAzN35MqAVKP FN7tq7ISXOf albzjpi SGjRCkko6qSA2F6dt7SE3sgyboVGmwc

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.

RAFZjvrJXjJswWh1pyV6uqojHbnfn2ZZ0nw7n17eUF4x2NEGXSN0GevqTM2W27X3xOMXh vmsd4oBN2ZWQfQlqgnncSA1fpXmZTmDWiN8PYrnNaLpyysSzfBSmv3r01A Y7rT4BO

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)

Y4LMpYTAyLLmGNCo08WKBvB87L2Zq7g5qHhsnqtpkQQe 3N1CAdKWzeSnFQpbPGoH09src4nSmft7zys0 1qT1leheR0V9LW6pZl dzGBYUezVUV ZE56wi5RnCKZhTCBzs87wV

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.

mzxvjfAp7S7IfSZhKHmWR

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)

uRC84NRx fEOAIN51zQPpzLsj9Jf8EdXH4wYu8jEC5Mc vjcNI5t0gwKDfRFHpx5qG3PazJ26pzaJnuKem84lWPgAws4xoD9c 3P2ZIpgW sQD

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).

Import and Export Elementor Template Kits

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)

Iz6rkUbZnU9rbq293ZEwgcuSO8IcA7Es5BEj4m4A97C8eSxUGmi6Rmoq2yJ4fynaJzWMUBE6hir7oRjMKWZ8FpdSL8qR vtFnRFQRFTTVnXaOsHWl7RdvKvjwr7XJ v0ksFp5cFP

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users