Template Library Collection

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.

Hey there, it’s Aviva from Elementor. Today I’ll show you how to use the Import/Export Template Kit feature in Elementor.

Designing websites from scratch can be time consuming. And as a Website Creator, you know that time is of the essence.

With just a few clicks, the Import / Export feature in Elementor can save you valuable time, with tools that allow you to reuse and transform your existing or purchased website templates into completely new websites, even across different industries.

And, it’s available in both the Free and Pro versions of Elementor.

Ok let’s get started, and see how it works.

The first thing is to verify that this feature is active. So from the WordPress Dashboard, go to Elementor > Settings > Experiments, and make sure that Active is selected for “Import Export Template Kit.” And don’t forget Save Changes.
Great. Now go to Elementor > Tools, and click the Import/Export Kit tab.

For this tutorial, we’ll begin with Export, so go ahead and click Start Export. Below each export option, is a description of the components included in the export.

This is also an option to add Kit Information, where you can add a Kit Name and Description.

Now click Export. And, just like that we’ve exported the Template Kit. Next we’ll take a look at how to Import a kit.

We’ll be importing the kit we just exported, to a brand new installation. If you are importing a kit, or parts of a kit, to an existing website or template, I highly recommend making a backup of your website first.

I’ve already installed Elementor and the Hello theme, which is the same theme used in the kit we just exported. And, as before I’ve made sure Import/Export was activated in Experiments.
So now we’re ready to import our kit.

Click Start Import. Then click Select File, to choose your Zip file, or, drag it straight in. By default, all Elementor components are selected to be imported. However you may deselect any components that you do not want imported with the Kit. Click Next, and ….
Success! The kit has been imported and is live on your site!
Take note, that if you’re adding your kit to a pre-existing installation,

Alternate 1: you’ll see this additional screen. This screen displays the templates of the same type applied to your current website, that have the same conditions as the ones you are about to import. You can select which ones to replace, and which ones to keep, by clicking the checkbox.

Leaving it selected, will replace the existing template header with the imported one (from the kit). Uncheck it if you want to keep the existing one. Either way, your templates remain available, and only the display conditions are changed.
Once you’ve finished, click Next, and your template will be imported.
Now simply connect the pages to your (new) menu, and you’re good to go!

A few more things to keep in mind, when Importing Kits:
1. if you’re using custom fonts and icons, you’ll need to upload them to your installation, and from there, they’ll automatically be applied to your imported kit.
2. If you’re using any Elementor Integrations, such as Google Maps Embed and Adobe Fonts, you’ll need to enter their relevant keys in Elementor > Settings > Integrations in order for them to work properly on your website.

Ok now let’s take a look at the imported site.

The entire website has transferred over successfully, including, posts, fonts, colors and images. Perfect.

So now you can use your imported template kits as a base for new websites. By swapping out content, colors, fonts, and images, you can create an alternate website with a brand new look, in a fraction of the time it takes to build from scratch.

So go ahead, work smarter not harder! Use the Import/Export feature to reuse your favorite website templates, and build websites even faster with Elementor!