Elementor tools make designing beautiful pages, articles, and entire websites a breeze.
How to safely apply new Elementor templates
Elementor templates are pre-designed layouts for individual pages or specific user interface (UI) elements. Although they sound like WordPress themes, they are fundamentally different.
Applying a new Elementor template to your website can change its appearance or functionality. With this in mind, there are some preparations you need to perform before changing the template.
- Step 1: Create a backup
Before making changes to an Elementor template, you need to create a backup. This ensures that if you encounter a new design issue, you can revert to the previous state.
Various plugins can help create website backups. For example, using the UpdraftPlus plugin, you can copy all files and database information to the cloud.
- Step 2: Put the site in maintenance mode
Changing your website template may cause unexpected crashes, errors or other problems. After applying a new design, you may need to take time to test the site and make adjustments.
Before applying a new Elementor template, the site needs to be set to maintenance mode. This will prevent visitors from accessing the site while you are testing the new design!
There are several plugins that can be used to create customized maintenance modes, with WP Maintenance Mode being a popular choice.
This plugin has a lot of extra features including adding a countdown to your maintenance startup screen. This feature can help you create the feeling of a redesign and relaunch of your website.
Once you set your website to maintenance mode, you are free to try out various templates and test how they display on the front end. When you are satisfied with the results, you can cancel the maintenance mode and let your visitors see the refreshed design.
- How to save elements or templates
Using a template can help you maintain design consistency throughout your site and also save time when you use the same design on multiple sites.
For example, WordPress design and development agencies can benefit by creating templates that contain the core elements they commonly use for their clients' websites.
1:Save the page as an element or template.
The ability to save any page as an Elementor template helps you create a standardized look and feel ready for deployment on your site.
Creating templates means that there is no need to manually recreate the same elements for each page, which will greatly increase productivity.
To save the current page as an Elementor template, at the bottom of the Elementor sidebar find theUpdates/releasesbutton. Then, click the arrow icon next to that button:
Save page as element or template
You can now click on theSave As Template. This will launch a window where you can specify a descriptive name for this template:.
Name the page template and then, click Save. Then you can name the page template by launching the Elementor library and selecting "My Templates" tab to access the design at any time.
2:Save the part as an element or template.
Many websites have recurring elements, such as lead generation forms or text describing best-selling products. By creating section templates, you can easily add these elements to any page. You can even create section templates for different content categories, such as call-to-action (CTA) templates. Whenever you need a CTA, simply import that template and adjust the message.
To create a template, hold down the Control key and click on the relevant section. Then select Save as Template. In the pop-up window, assign a descriptive name to the template and click Save.
To apply a template, launch the Elementor Template Library, go to the My Templates tab, find the saved design, and add it to the page.
- How to create elements or templates
To create a page or part of a template, navigate to Templates > Saved Templates. Then, click "Add New Item". In the next window, the "Select Template Type..." drop-down menu opens:
- Selecting a template type
Now it is possible to specify the type of template to be created. We have already covered pages and some templates, but this window offers other options.
After selecting the template type, give the design a descriptive name and click "Creating Templates". The Elementor library will be launched, where you can use existing templates as a base. Alternatively, you can close this window and create a template from scratch.
Use the standard Elementor editor to build the template. When you're ready to save your design, click the "post". This will launch the Publishing Settings box.
Here in the Publishing Box, you can set up some rules for using this template. For example, you can click "Add condition" and specifies that this layout should only be used for single pages.
- How to export elements or templates
You can export elements or templates from the WordPress dashboard. This method can help you share designs with colleagues or send them to clients for approval. You can even use the export feature to create backups of designs designed by Elementor.
Exporting templates is an easy way to use designs across multiple websites. This comes in handy for WordPress design and development organizations that manage multiple websites. If you want to profit from a design, exporting is often the first step in sharing it with the world.
In the WordPress dashboard navigate to "templates > Saved templates" to export the design. In this tab, you can see all the templates saved to the library.
WordPress also categorizes these templates into pages and section tags. Just find the template you want to export and hover over it:.
- Choose between page and section templates.
When the "Export Template" link appears, click it.Elementor now downloads this template as a JSON file.
Templates can also be exported from the Elementor library. In this library, open the "My Templates" tab. Find the template you want to export and tap the three-dot icon attached to it to export the template directly from the library, then, click Export.Elementor now downloads this template as a JSON file.
- How to import elements or templates
If you have a template in JSON or ZIP format, you can upload it to the Elementor library. First, navigate to theTemplates > Saved Templates. At the top of this screen, click Import Template:.
Then, select the elements or templates to import and click "Import Now". The template will now appear in your library.
To apply this design to your website layout, simply open the relevant page or article using Elementor or an editor. Next, click on the folder icon to add a template.
Find the "Add Template" button.
In the next window, select "My Templates"tab. Here you can find all the templates imported by Elementor:.
To see how this design will look when applied to the current web page, click Preview. If you are using this template, select the insert link attached to it.
- How to export and import individual elements or pages
Pages can be saved as Elementor templates and exported instead of manually recreating them. You can import designs into any site that has Elementor installed. To save a single page as a template, click the arrow icon next to the Elementor Publish/Update button and select Save as Template.
- Saving a single page as a template
In the pop-up window, provide the template name. Then, click Save.
The WordPress template gallery should open automatically. You can find the template you just created and click on its three-dot icon. When prompted, choose Export:.
- Find any template in the library.
Alternatively, it can be used by navigating in the WordPress dashboard to "templates > Saved templates" to export this single page template. Hover over the template in question and click "derive".
Once a single page template is securely stored on your local computer, it can be imported to another website. Simply switch to the new site and navigate to "Templates > Saved Templates".
At the top of the screen, click on "Import Template". You can now import your one-page design.
How to Export and Import an Entire Elementor Website
For example, you want to create a template toolkit that contains all the standard website pages (such as the contact page and home page). This toolkit can then be used to build the basic website.
- Export the entire Elementor website
Elementor's Export Toolkit feature allows you to export your complete website, including content and settings. This feature is useful if you are creating related websites and want to keep the same branding style. For example, you could create a microsite to promote an upcoming product.
In your WordPress dashboard, navigate to theElementor > artifact. Click Import/Export.
Click Start Export. When prompted, specify the content and data to download. For example, you can choose to export only templates. Or, to export all content, including pages, articles, and custom post types:.
Next, click to expand the Kit Information section to assign a descriptive name to the file. Give your file a descriptive name, or you can enter the optional description.
When you are satisfied with your choices, click Export.Elementor will now create your suite and display a summary of everything contained in the file:.
Elementor automatically downloads the generated toolkit to your computer. When prompted, click Return to Dashboard.
- Import your website
It is recommended to create a full backup before proceeding. Once the backup is complete, you will need to enable the Elementor Experiments feature on the target site. Navigate to "Elementor > Tools", then select and activate the Import/Export Template Suite feature.
Next, click on "Start Import". On the subsequent screen, select the file you downloaded in the previous step to import.
How to Fix Elementor's "Invalid File" Error
Sometimes, when trying to import a template, you may see an "Invalid File" error. It means that you are trying to import a template created with an earlier version of Elementor. To resolve this issue, you need to temporarily switch to an earlier version of Elementor. This change may cause problems with your site.
When you are ready to continue, go to the list of Elementor plugins and select Advanced View.
- Click Advanced View Options.
At the bottom of the page, use the drop-down menu to select an earlier version of Elementor. For best results, it is recommended to download the latest version of Elementor 1, which is 1.9.8:.
- Download the latest version of Elementor
You can upgrade using simple themes and plugins. After activating this plugin, you can upload older versions of Elementor without deactivating and deleting the latest version.
After uploading an older version of Elementor, navigate to Plugins > Installed Plugins.WordPress should have automatically switched to the older software version:.
Now, you should be able to import the template without any problems. Once the import is complete, navigate back to Plugins > Installed Plugins and restore the latest version of Elementor. the template should now be in the library and ready to use.
Elementor plugin for importing and exporting templates
Happy Addons Pro extends the standard Elementor experience by adding over 20 new features. It includes several features that can be integrated into your import and export workflow:.
If you are using multiple sites, you may need to use Happy Addons Pro's cross-domain copy and paste feature. The ability to easily copy content from one site and paste it into a completely different domain.
Summary:
This article details how to use Elementor to create, save, export and import templates, including page and section templates. By following these steps, you can increase design efficiency, maintain brand consistency on your website, and ensure that your website can be easily recovered in the event of a problem. These methods are useful whether you are a development organization managing multiple websites or an individual user looking to maintain design consistency.
