The Kit Library

In this tutorial you will learn how to use the Elementor Kits Library to select from dozens of beautifully designed full website template kits, and import them to adapt to your own website.

This tutorial will cover:

✔︎ Accessing the templates library

✔︎ Filtering and searching the library

✔︎ Applying a kit to a fresh website installation

✔︎ Importing a kit into an existing site

✔︎ Editing an imported kit

✔︎ And much more!

Hey there. It’s Ash from Elementor.

Today we’re going to explore the new Kit Library. This amazing new feature provides you with dozens of professionally designed website kits to use for your projects.

Be inspired by these incredible designs and learn how to build a website from start to finish by exploring how these website kits are constructed.

Website kits contain everything you need including site templates, pages, posts and popups, and allow you to import entire websites with just a few clicks.

We used to have to import template files individually, but now we are able to import an entire website with ease using the Kit Library.

So if you’re ready, let’s dive in and find out how to import an Elementor website kit.
Check first of all that the Kit Library is activated on your site. Navigate your way to ‘Elementor > Settings > Experiments’. Then check that there is a green light next to the ‘Import Export Template Kit’ option. If there isn’t simply, select ‘active’ from the dropdown and save your changes.

Navigate your way to the Kit Library area and you’ll see a vast collection of diverse designs to choose from. 1

Starting at the top we have an option to import our own template kit. You can find out how this works by watching our dedicated import/export tutorial. 2

Next, we can refresh the kit feed, view more information about these kits and close the kit library and return to the WordPress dashboard. 3

Over on the left hand side you’ll see we have several filtering options to help you find the perfect kit for your project. 4

We can then perform a search for a specific kit. 5
And if you’re looking for even more kits to use for your projects scroll to the bottom and you’ll see this link which leads to our category on ThemeForest.

Here you can find over 1200 professionally created premium website kits.
If we head back to the Kit Library now we can also filter the website kits by ‘featured, new, popular & trending’

And you’ll see these icons, which signify the required Elementor plan to access them. 1

There are kits for free, pro & expert levels.

Please note with the free website kits, these will only contain sections, widgets and settings available to free users. Hello theme users may use the Header and Footer customiser in the site settings in order to customise these parts. 2

Some of the kits will also require additional plugins to function correctly. For example the shop related kits use WooCommerce, so you’ll need this plugin installed to access all of the template files. 3
Let’s now preview one of these kits. 1

Select a kit and as you can see the website loads in our window and we’re able to fully test out the website and all of its features. 2

This is extremely helpful when trying to find the right starting point for a project.

We can also preview what this kit looks like on tablet and mobile devices by switching between the icons located at the top of the page. 3

And again, we’re able to fully test the website in these modes as well. 4

If we now select the ‘Overview’ button we’re presented with a clear to see structure of all the assets which make up this website kit. 5

These include the pages…site parts, which generally include the header, footer and blog templates…and then popups. 6
Let’s now apply this kit to see just how the installation process works.

Select the ‘Apply Kit’ button.

Choose the content you wish to import. You may keep all toggled, or only choose to import parts of the kit. Once completed, click the green Next button at the bottom of your screen. 1

The importer will now process your request. Do not close or refresh this page until complete. 2

Once the import has completed, you will see a list of all the imported content. 3

Let’s now return to the WordPress dashboard to undertake some important next steps and explore exactly what’s been imported. 4
Before we take a look at the pages, posts and site parts let’s first head to the WordPress customiser to add our logo and create our menu. 1

Whilst the importer does a fantastic job of importing the parts needed for our website, we must manually set these aspects. 2

Select ‘Site Identity’ first of all. Then choose your logo from the media library or upload a new one from your computer. 4

You can also amend your site title & tagline if required. As well as add a site icon.

All of these aspects can also be amended in the site settings from within the Elementor editor.

Publish these changes then select the back arrow and now expand the ‘Menus’ tab. 5

Select the ‘Create new menu’ button…

Give your menu a name…choose a location…and select next.

Now add the items you would like to display in your menu…we’ll add some pages, and then a blog category. You can amend the order of these items like so.

Now, publish to save your changes.

As you can see, our logo and menu are now showing and our new website looks great.
Let’s now take a look at what was imported when we applied our new website kit.

Return to the WordPress dashboard and head to the pages area where you’ll see that several new pages have been added, and if we hover over one of these and select ‘Edit with Elementor’, we are now able to amend this content using the Elementor editor. 1

Back in the dashboard now, let’s take a look at the posts. In order to help get you started, sample Posts will be automatically generated, this helps you to visualise the Archives, Single Post, and other Kit layouts. Once you have started adding your own content these posts may be deleted. 2

Now navigate your way to ‘Templates > Theme Builder > And select Try it Now’ to view all of the site parts which have been imported. By default you’ll see all of the site parts in one view, but you can use the navigation on the left to drill down to specific parts. And by selecting a site part, you are able to preview…edit…and amend the display conditions. 3

Finally let’s head to the popups area by navigating to ‘Templates > Popups’. Many website kits include popups for navigation, contact forms and other uses and you’ll find them all here. 4

Please note that you must add the dynamic link to your site part or page to trigger certain popups to work. Let’s see how that works.

We’ve imported a new website kit here which uses a popup for the main navigation and we’ve also opened the header template file in the Elementor editor.

Let’s now select the menu icon and in the link field, select ‘Popup’ and then search for and select the menu popup.

When finished, update your changes and the popup will now display when the menu icon is selected. 5
Let’s return to our original website kit and now that we’ve explored the different parts which it is made up of, it’s time to take a look at the global settings. 1

When working with website kits, the global fonts and colors are automatically set up for you. This is very helpful in maintaining consistency throughout your website.

You may find the need to edit these however. To do this navigate your way to the site settings from the top corner of your editor panel. 2

If we select global colors first of all, you can see all of the global colors being used in this website. You can amend any of these, and the changes will be made across your entire website. 3

You may also find that some kits also use the general site background color here. 4

Next we can amend any of the global fonts. And as with the global colors, any changes here will be implemented across our entire website. 5

Ensure you make good use of the global settings, as doing so will help you make edits to your entire website with ease, rather than amending it page by page.

Be sure to update any of these changes after you’ve made them. 6
In our previous example we installed our website kit onto a fresh installation, which means we didn’t have pages, posts or template files created in the first instance.

But what if you want to apply a website kit to an existing website. Or perhaps you’ve previously imported a website kit and now you’ve changed your mind.

During the import process if your website already has Theme Builder Templates assigned, you will be asked to select the templates you wish to override. Unselected templates will still be imported but without display conditions, which will ensure your current website isn’t affected.

You are then free to amend and customise all of your site parts without the worry of your existing website being overwritten.
Using the new Kit Library is a great starting point for many website projects. Whether you’re a seasoned professional creating websites for clients or simply somebody who is looking to learn how a website is constructed, these website kits are an extremely valuable asset.

Thanks for watching! Comment below with any questions and for more tutorials, subscribe to our Youtube channel. And don’t forget to hit the notifications bell.