All of our Elementor templates are available in JSON files. You can import them directly via the Elementor editor without needing to install an extra plugin or create a cloud account.
If you are new to Elementor and haven't imported a template before, this post will show you how.
Before you start, make sure you already have the JSON file of the template you want to import. You can browse and download new templates on this page.
Shortcuts ⤵️
- What is an Elementor template?
- Before you import a template
- Steps to import a JSON template
- Video ▶️
- Editing template
- Managing existing templates
- Summary
What is an Elementor Template?
One crucial thing you need to understand before we step further. Not only can you use Elementor to create pages like homepage, about page, contact page, and so on. But you can also use it to create site parts like header, footer, 404 page, archive pages, and etc.
Whatever you want to create, you have two options to choose from: starting from scratch or from a template.
An Elementor template is a pre-styled design created with the Elementor editor. The design can be a page, header, footer, and so on.
You can save a template locally on your website or export it.
When you export a template, you will get a JSON file that stores all the settings you made on the Elementor editor. From color, typography, animation, and so on.
You can then import the JSON file of the template on another Elementor-powered WordPress website.
What is a Template Kit?
When I say "an Elementor template", it means a single template file that is available in a JSON format.
A template kit, meanwhile, is a collection of Elementor templates. This means, there are several template files in a template kit.
All templates in a template kit usually have the same design concept since they are aimed at creating a full website. Not just a page. They have the same color scheme, typography, button style, and so on.
For example, our Jingga Elementor template kit consists of 7 page templates (in JSON files), a header template and a footer template.
Before You Start to Import a Template
There are some things you need to do before importing an Elementor template. Especially if you want to import a template from us.
We use container instead of section as the layout system. So, if you still use section, you need to switch to container layout system.
Also, you need to enable the Unfiltered File Uploads option in the Elementor settings in order for SVG files to get imported.
Here are some settings you need to make before importing an Elementor template.
Enable Container
Container is already enabled by default on a new Elementor installation. If you accidentally disabled it, you can re-enable it.
To do so, go to the Elementor settings page (Elementor -> Editor -> Settings). Under the Features tab, make sure the Container option is set to Default or Active.
Enable Nested Elements
After enabling container, you also need to enable nested elements. This setting option is needed for widgets that contains child elements (e.g, the Tabs widget).
On a new Elementor installation, this setting option is already enabled (Default).
If you want to import a template on an old Elementor installation, then you need enable the option manually. To do so, go to Elementor settings page. Under the the Features tab, set the Nested Elements option to Active.
Enable Unfiltered File Uploads
On some templates that we create, we use custom icons from Bootstrap and SVG Repo because the icon options that Elementor offers are too basic.
In order for the icons to load properly when you import a template, you need to enable the Unfiltered File Uploads options. This option will allow SVG files to be uploaded to your WordPress site.
To enable the setting, go to the Elementor settings page. Under the Advanced tab, set the Enable Unfiltered File Uploads option to Enable.
Set the Page Layout
The very first thing you need to do on the Elementor editor before you start to design a page is to set the page layout.
To set the page layout, open the page settings panel by clicking the gear icon on the top bar inside the Elementor editor.
You can set the page layout on the Page Layout option.
Here are the page layout settings you can use:
- For landing page templates: Elementor Canvas
- For non landing page templates: Elementor Full Width
Importing an Elementor Template in a JSON Format
Once everything is ready, you can start the importing process.
Step 1: Download the Template
First, you can browse and download the template you want to import. After completing the payment, you will receive an email containing the download link of the template.
Simply click the download link and you will get a ZIP file of the template.
Unzip the ZIP file and you will get a folder containing the JSON file(s) of the template(s) you have purchased.
Step 2: Create a New Page and Import the Template
Once the JSON file is ready, you can start the importing process. To do so, you can create a new page and edit it with Elementor.
In the Elementor editor, click the folder icon in the canvas area to open the template library window.
In the template library window, you can go to the Templates tab and click the arrow icon.
Next, you can click the Select File button and select the JSON file of the template you want to import.
Wait a moment while Elementor is importing your page. Once done, the template will be available in the template library. You can click the CREATE DATE tab to short the templates by date. This will place the newly imported templates at the top.
Click the Insert button to load the template to the Elementor editor.
That's it. You can now edit the template in the Elementor editor.
Watch the following video to learn how to import an Elementor template in a visual form.
Editing the The Template
Once the template is loaded to the Elementor editor, you can start to edit it. You can simply use the Elementor editor to edit the content and the design settings.
To make it easy for you to edit the template, we have added labels to elements on the template. From the containers to widgets.
I strongly recommend you to use Navigator to jump between elements in the Elementor editor.
Here are examples of the labels we added to one of our templates.
Managing the Existing Templates
For every Elementor template you have imported, it will be stored on your website and you can manage it.
There are two options to manage the existing Elementor templates on your website. First, you can manage them via the Elementor editor. Second, you can manage them via the WordPress dashboard.
Managing Elementor Templates via Elementor Editor
The steps to manage the existing Elementor templates via the Elementor editor is the same as importing a template.
First, you can click the folder icon to open the template library. Then, you can go to the Templates tab. On this tab, you can find all the templates you have imported. Be it page templates or Theme Builder templates (header, footer, etc.).
From the template library, you can preview a template, rename, delete and export it. You can click the three-dot icon to see all of the available actions.
Managing Elementor Templates via WordPress Dashboard
The second option to manage the existing Elementor templates is the WordPress dashboard.
To access the existing Elementor templates via the WordPress dashboard, you can go to Elementor -> Editor -> Templates.
You will be directed to the Saved Templates screen where you can find all of the Elementor templates you have imported. You can click the Page tab to find page templates.
Same as the first option above, you can also rename, delete and preview the template. You can hover your cursor over a template to view the available actions.
Summary
Starting from a template is a great option if you want to create a WordPress website with Elementor and have no idea about the design. Or you simply want to get your website done more quickly.
At Pagebuildertemplates.com, we offer professionally designed Elementor templates. All templates are created with Elementor native widgets and are available in JSON format. You can import them directly via the Elementor editor without needing to install an extra plugin.
If you are new to Elementor, you can read the guide above to learn how to import the JSON file of an Elementor template.