The Elementor tool makes it easy to design beautiful pages, posts, and entire websites. However, even with a powerful page builder such as Elementor in your corner, creating a new site design takes time and effort.
That’s where Elementor’s import and export system comes in. Using this feature, you can slash your design and development time by creating reusable templates or importing third-party layouts for your project.
This post will take a deep dive into Elementor’s flexible and powerful import/export system. We’ll be covering everything from section templates, right through to page templates – and even exporting your entire Elementor website. Let’s get started!
How To Prepare Your Site for a New Elementor Template (in 2 Steps)
Elementor templates are pre-designed layouts that apply to individual pages or specific User Interface (UI) elements. Although they sound similar to WordPress themes, there are some essential differences.
WordPress themes change the design of an entire website. By contrast, Elementor templates affect the layout of a single webpage. Since they’re limited to just one page, it’s possible to use multiple Elementor templates simultaneously. Furthermore, these templates operate on a WordPress theme, whether free or premium.
Applying a new Elementor template to your website can change how it looks or functions. With this in mind, there are some actions you should perform before changing your template.
Step 1: Create a Backup
It’s wise to create a backup before changing your Elementor template. This step ensures you have content to restore if you encounter issues with your new design.
Various plugins enable you to create a website backup. These include the UpdraftPlus plugin, which can copy all of your files and database information to the cloud:
If you’re a Kinsta customer, we automatically back up your website every day. If you need more frequent backups, we can copy your site every six hours ($50 per site, per month) or every hour ($100 per site, per month).
Alternatively, you can create a backup manually at any point. To achieve this, log into your MyKinsta dashboard:
In the left-hand menu, select Sites and click on the website in question. Then choose Backups > Manual:
Simply give the Back up now button a click, and we’ll handle the rest. If you encounter problems and want to restore your most recent backup, navigate to the Backups > Manual tab. Here, MyKinsta displays a list of all your backups:
To restore an earlier version of your site, click on its accompanying Restore to button. You can now choose to restore this backup to your live site or a staging website.
Step 2: Put Your Site into Maintenance Mode
Changing your site’s template can cause unexpected crashes, bugs, or other strange behavior. After applying a new design, you may need to spend some time testing your site and making adjustments.
If a visitor tries to access your site while you’re making these changes, they may impact the quality of their experience. This can cause you to lose out on potential conversions.
Before applying a new Elementor template, you may want to put your site into maintenance mode. This step will prevent visitors from accessing your site while you’re testing your new design.
Several plugins can create a custom maintenance mode. However, WP Maintenance Mode is a popular choice:
This plugin has lots of added extras, including adding a countdown to your maintenance splash screen. This feature can help you generate a buzz around your site’s redesign and relaunch.
Once your site is in maintenance mode, you’re free to experiment with various templates and test how they appear on your website’s frontend. When you’re happy with the results, you can take your site out of maintenance mode – and wow visitors with your site redesign.
How To Save Elementor Templates (2 Methods)
As one of the world’s most popular page builders, Elementor has no shortage of ready-made third-party templates. However, sometimes you may want to create your templates.
Using templates can help you achieve design consistency across your entire website. It can also save you time, mainly if you’re using the same designs across multiple sites.
For instance, WordPress design and development agencies may benefit from creating templates featuring the core elements they regularly apply to their client sites.
Method 1: Save a Page as an Elementor Template
You can save any page as an Elementor template. This can help you establish a standard look and feel, ready to deploy across your website.
For example, you might create your site’s menus, plus the header and WordPress footer. You can then apply this page template to all of your webpages.
Creating a template also means you won’t have to manually recreate the same elements for every web page. This is excellent news for your productivity.
To save the current page as an Elementor template, find the green Update/Publish button at the bottom of the Elementor sidebar. Then, click on this button’s accompanying arrow icon:
You can now click on Save as Template. This launches a window where you can give this template a descriptive name:
Then, click on Save. You can now access this design at any time by launching the Elementor library and selecting the My Templates tab.
Method 2: Save a Section as an Elementor Template
Many websites feature recurring elements. These include lead generation forms or text describing your top-selling products.
By making a section template, you can add it to any page with just a few clicks. You can even create section templates for different content categories.
For example, you might build a Call To Action (CTA) template. Then, every time you need a CTA, you can simply import this template and tweak its messaging.
To create a template, control-click on the Section in question. Then, select Save As Template:
In the window that appears, give this template a descriptive name. Then, click on Save:
To apply this template to any section, simply launch the Elementor Template library. You’ll find the design waiting in your My Templates tab.
How To Create an Elementor Template
While you can save any in-progress page or section as an Elementor template, sometimes you’ll explicitly want to create one for reuse. In this scenario, you could start your design as a regular Elementor webpage and then save it as a template.
However, you can also inform Elementor that you’re creating a template in advance. This approach gives you more flexibility to build templates for different areas of your website.
For example, you might design a template for your Error 404 Page, search results page, or even create a popup layout. This method also lets you use any template in your library as the base for a new design.
To create a page or section template, navigate to Templates > Saved Templates. Then, click on Add New. In the next window, open the Select the type of template… dropdown:
You can now specify the kind of template that you want to create. We’ve already covered page and section templates, but this window gives you additional options.
After selecting, give your design a descriptive name, and then click on Create Template. This launches the Elementor library, where you can use a pre-existing template as your base. Alternatively, you can exit this window and start with a clean slate.
You can now build your template using the standard Elementor editor. When you’re ready to save your design, click on Publish. This will launch the Publish Settings box:
Here, you can set some rules for using this template. For example, you might click on Add Condition and specify that this layout is only suitable for single pages.
How To Export Elementor Templates
You can export Elementor templates from the WordPress dashboard. This method can help you share designs with your co-workers or send them to clients for their approval. You might even use the export feature to create backups of your Elementor designs.
Exporting templates is an easy way to use your designs across multiple domains. This approach is handy for WordPress design and development agencies managing numerous websites. If you want to monetize your designs, exporting them is often the first step toward sharing them with the world.
Navigate to Templates > Saved Templates in the WordPress dashboard to export a design. This tab displays all of the templates saved to your library:
WordPress also divides these templates into Page and Section tabs. Simply find the template that you want to export, and hover over it:
When the Export Template link appears, give it a click. Elementor will now download this template as a JSON file.
You can also export your templates from the Elementor library. Inside this library, open the My Template tab. Find the template that you want to export, and click on its accompanying three-dotted icon:
Then, click on Export. Elementor will now download this template as a JSON file.
How To Import Elementor Templates
Sometimes, you may want to import a template into Elementor. It might be a design exported from a different website or purchased from a third party.
If you have a template in JSON or ZIP format, you can upload it to the Elementor library. To start, navigate to Templates > Saved Templates. At the top of this screen, click on Import Templates:
Then, select your Elementor import template and click on Import Now. This template will now appear in your library.
To apply this design to your website layout, simply open the page or post in question with the Elementor editor. Then, click on the Add Template icon, which is represented by a white folder:
In the next window, select the My Templates tab. Here, you’ll find all your Elementor imported templates:
To see how this design will look when applied to the current page, click on Preview. If you’re happy to use this template, select its accompanying Insert link.
How To Export and Import an Individual Elementor Page
You may want to reuse the same page across multiple sites. For example, if you operate several WordPress websites, you might utilize a standard About Us page.
Rather than recreating this page manually, you can save it as an Elementor template and export it. You can then import the design into any website that has Elementor installed.
To save an individual page as a template, click on the arrow icon next to Elementor’s Publish/Update button. You can then select Save as Template:
In the subsequent popup, give this template name. Then, click on Save.
The WordPress template library should open automatically. You can locate the template you just created and click on its three-dotted icon. When prompted, select Export:
Alternatively, you can export this single-page template by navigating to Templates > Saved Templates in your WordPress dashboard. Then, hover over the template in question and click on Export.
Once the single-page template is safely stored on your local computer, you can import it to another website. Simply switch to your new site, and navigate to Templates > Saved Templates.
At the top of this screen, click on Import Templates. You can now import your single-page design.
How To Export and Import Your Entire Elementor Website (in 3 Steps)
While Elementor makes it easy to import and export single-page templates, you also may need to export an entire website.
For example, you might want to create a template kit containing all of your standard website pages, such as a contact page and homepage. You can then use this kit to form your basic websites.
Let’s see how you can create this kit. Here’s how to export your entire Elementor website in three easy steps!
Step 1: Enable Elementor Export Kit
Elementor’s Export Kit function can export your complete site, including its content and settings.
This function can be helpful if you’re creating related websites and want to maintain the same branding. For example, you might make a microsite to promote an upcoming product launch.
At the time of writing, Elementor’s Export Kit is an experimental feature. You’ll need to enable it by navigating to Elementor > Settings. You can then click on the Experiments tab:
Scroll to the Import Export Template Kit section. You can then open the accompanying dropdown and select Active:
Don’t forget to scroll to the bottom of this page and click on Save Changes. This experimental feature is now ready to use.
Step 2: Export Your Entire Elementor Website
In your WordPress dashboard, navigate to Elementor > Tools. Now click on the Import/Export Kit:
Click on Start Export. When prompted, specify the content and data you want to include in your download.
For example, you might choose to export your templates only. Alternatively, you can export all of your content, including pages, posts, and custom post types:
Next, click to expand the Kit Information section and give your file a descriptive name. You can also enter an optional description:
When you’re happy with your selection, click on Export. Elementor will now create your kit and display a summary of everything included in this file:
Elementor will download the generated kit to your computer automatically. When prompted, click on Back to dashboard.
Step 3: Import Your Site
You can now import your template kit into any website with Elementor installed. It will override your existing content, so we recommend creating a full backup before proceeding.
Once your backup is in place, you’ll need to enable Elementor Experiments on the destination website. As before, navigate to Elementor > Settings > Experiments. You can then select the Import Export Template Kit section and activate this feature.
Next, navigate to Templates > Kit Library. Click on Start Import. On the subsequent screen, select the file that you downloaded in the previous step:
If you’re applying your kit to a pre-existing installation, Elementor will display any templates with the same conditions as the one you’re importing. You can then choose which templates to replace and which ones to keep.
Once you’ve made your selection, click on Next. Elementor will now import your site kit.
How To Fix Elementor’s “Invalid File” Error
Sometimes, you may see an “Invalid File” error when attempting to import a template. This typically means that you’re trying to import a template created using an earlier version of Elementor.
To resolve this error, you’ll need to switch to an earlier release of Elementor temporarily. This change can cause issues with your site.
With this in mind, we recommend creating a full backup before proceeding. You may also want to consider putting your site into maintenance mode.
When you’re ready to proceed, head over to the Elementor plugin listing. Then, select Advanced View:
At the bottom of the page, use the dropdown menu to choose an earlier version of Elementor. For the best results, we recommend downloading the last version of Elementor 1, which is 1.9.8:
Once you have this file, you have a few options. You could deactivate and delete your current Elementor version. You can then upload and activate the software that you just downloaded.
Alternatively, you can use Easy Theme and Plugin Upgrades. After activating this plugin, you can upload an older Elementor version without deactivating and deleting the most recent release.
After uploading the older release of Elementor, navigate to Plugins > Installed Plugins. WordPress should have switched to the earlier software version automatically:
You should now be able to import your template without any issues. As soon as the import is complete, navigate back to Plugins > Installed plugins, and restore the most recent version of Elementor. This template should now be in your library, ready for use.
Top 3 Elementor Addons for Importing and Exporting Templates
As we’ve just seen, Elementor has a robust import and export system. Out-of-the-box, you can use this feature to create templates for individual sections, pages, and even entire websites.
However, you may want to expand on this built-in functionality. With that in mind, here are three Elementor import template addons that promise to supercharge the import and export process!
1. Happy Addons Pro
Happy Addons Pro extends the standard Elementor experience by adding over 20 new features. These include several features that can integrate into your import and export workflow:
If you’re working with multiple sites, you might want to use Happy Addons Pro’s cross-domain copy-paste feature. It enables you to copy content from one site easily and paste it into an entirely different domain.
If you want to reuse any Happy Addons Pro demo content, you can copy it into your Elementor editor panel. In addition, this addon boasts a bespoke import feature. It provides all the functionality you’d expect from the built-in Elementor import and export system.
In particular, you can search for Happy Addon templates based on the names of sections or filter by page section category.
Features:
- Choose from over 70 landing page templates.
- Duplicate any page or post with the Happy Clone feature.
- Easily copy section templates from HappyAddons Pro’s demo content.
- Copy a section from any website, and paste it into a different domain.
Pricing: Annual licenses start at $33.
2. Mighty Addons for Elementor
Mighty Addons for Elementor comes with a selection of pre-designed template kits. When you import these kits into your website, you’ll access all the pages you need to design a wide range of sites.
Mighty Addons for Elementor provides template kits for lots of different industries. These include animal welfare, fitness, hospitality, consulting, and even skydiving businesses:
This addon also has a cross-domain copy-paste feature. This can be a powerful addition to the traditional import/export Elementor workflow if you manage multiple websites. In particular, this feature enables you to use any section, row, column, or even an entire page’s contents across multiple Elementor-powered websites.
Features:
- Easily copy images and videos between domains.
- Use a wide range of ready-to-use section templates.
- Integrate the tool with the Pixabay stock photography service.
Pricing: You can download the core Mighty Addons for Elementor plugin. A pro version is also available, with licenses starting at $29.
3. Envato Elements
The Envato Elements plugin lets you browse thousands of pages and block templates without leaving WordPress. Once you’ve found your perfect template, you can import it into your website easily:
To help you design a professional-looking site fast, Envato Elements also provides a wide range of template kits. Furthermore, this plugin offers easy access to over one million royalty-free images if you use stock photos.
Features:
- Multipurpose templates
- Flexible and fully customizable content
- One-click import
- Seamless integration with the Elementor UI
Pricing: You can download the Envato Elements plugin for free. However, you will need an Envato Elements subscription to access and use the template content. This is priced at $16.50 per month.
Summary
We’re not going to pretend that designing a stunning website is straightforward. Fortunately, with Elementor’s export and import template capabilities, you won’t have to start every project with a clean slate.
You can fast-forward through the early web development stages by taking advantage of ready-made templates. You can also create section and page templates, ready to reuse in future projects. If you’re particularly proud of a website, Elementor can even export your entire site. The possibilities are endless!
When creating a WordPress website, you’ll need a powerful host in your corner. At Kinsta, we offer a range of performance-optimized hosting plans for all your Elementor needs.
Leave a Reply