Elementor allows us to save any section as a template, which we can then use in other documents of our website as many times as we want or export it for use in other documents. We can use these templates independently or globally. Independently, modifying it will not affect the rest of the instances of the same. Globally (using the Template widget) when we modify the template all its instances will also change.

• Save sections as templates
• How to insert a saved template section into a document
• Insert separate template from the Library
• Insert section template as global
• Insert template in a blog post
• Modify section template
• From the Elementor editor
• From the Templates menu
• How to export a template
• Export template from Saved Templates
• Exporting templates from Elementor Editor
• How to import a template
• Importing a template from Saved Templates
• Import template from Elementor Editor

Save sections as templates

1. Choose the section you want to save and right click on
2. From the context menu click on Save as template.
3. Give it a name and click Save.

How to insert a saved template section into a document

You can use the templates you have been saving in any document of your website, even in the entries using the template’s shortcode. Let’s see how it is done.

Insert separate template from the Library

If we insert the template in this way, it will be independent of the global template and the changes we make to it will not affect the rest of the instances.

1. Click the Add template icon in the Elementor Editor.
2. In the pop-up window click on the My Templates tab.
3. You will see a list with all the templates you have saved, click on the Insert button of the template you want to use. If you don’t know if it is the template you need before inserting you can click on Preview.
4. A small pop-up window Import document settings will appear. The best thing to do in this case is to click No, as it is a section template.

Insert section template as global

To insert a section template that we have previously saved as a global template we will have to do it through the Template widget. You must take into account that being a section template when inserted into another section through the Template widget, both sections will keep all their settings.

1. In the Elementor Editor find the Template widget and drag it to a section or to the Drag the widget here box.
2. Click on the Choose Template selector and type the name or some part of the name of the template you want to insert, once you see it in the selector click on it.

Insert template in a blog post

We can insert a section template in a blog post with the WordPress Gutenberg Block Editor, although my recommendation is not to use Elementor in blog posts, why, because today Elementor is for you the best page builder, but in the future you never know, I used to use WPWakery (Visual Composer) at that time I thought it was fantastic and now compared to Elementor I think it’s a potato.

Imagine that in the future a new page builder appears that surpasses Elementor, for example Gutenberg, and you want to revamp your website with this new builder. Renewing the pages that make up your website would be a relatively bearable job, but renewing hundreds of posts on your blog will be unfeasible or too laborious, those posts will already be well positioned and it is not a matter of losing them. That’s why my recommendation is to use only Gutenberg for Blog entries.

1. In the WordPress Backend select Templates > Saved Templates.
2. Click on the shortcode of the template you want to use and then copy this code with CTRL + C (Windows) | CMD + C (Mac) or right click > Copy (Windows) | CMD + click > Copy (Mac).
3. Now open the entry where you want to insert the template.
4. Use Gutenberg’s Shortcode block and paste the code you have previously copied there.

Modify section template

From the Elementor editor

All the changes you make to a template will be reflected in all its instances.

1. Click on the template block you want to edit.
2. Now in the Content tab of the configuration column click on the button

From the Templates menu

1. In the WordPress Backend select Templates > Saved Templates.
2. Place the cursor over the template you want to edit and click on Edit with Elementor.

How to export a template

We can export templates (for use in another web project) in the following formats .json with all the elements that compose it, even with images and other elements of the media library, but note that these media are not embedded in the file .json (lightweight file that is only composed of XML-like code) is only referenced in your code by an URLWhen importing the template is when this file (image, video, etc.) is stored in our media library. This means that if the exported media is removed from the origin it cannot be imported.

Export template from Saved Templates

1. In the WordPress Backend select Templates > Saved Templates.
2. Place the cursor over the template you want to edit and click on Export template.
3. In the Save As pop-up window choose the location and click the Save button.

Exporting templates from Elementor Editor

1. Click the Add template icon in the Elementor Editor.
2. In the pop-up window click on the My Templates tab.
3. You will see a list with all the templates you have saved, click on the Insert button of the template you want to use. If you don’t know if it is the template you need before inserting you can click on Preview.

How to import a template

We can import templates to our project, they must be in .json format. When we import a template and it contains media files such as images, videos, PDF files, etc., these files are uploaded to our own WordPress Media Library. Below you can see an example of the code of a real .json file, it is very simple a section with a column and a widget with an image. I have highlighted the URL or link to the image in bold.

{"content":[{"id":"63358d39","settings":[],"elements":[{"id":"78eb379f","settings":{"_column_size":100,"_inline_size":null},"elements":[{"id":"13d2289b","settings":{"image":{"url":"https:\/\/elementor.lacolmenatecnologica.com\/wp-content\/uploads\/2021\/07\/la-colmena-tecnologica-logo.png","id":974,"alt":"","source":"library"}},"elements":[],"isInner":false,"widgetType":"image","elType":"widget"}],"isInner":false,"elType":"column"}],"isInner":false,"elType":"section"}],"page_settings":[],"version":"0.4","title":"Plantilla la Colmena","type":"section"}

As you can see in the .json file are not stored the media (images, videos, …), are stored links to its location in the source project from where it was exported. If this image is deleted from the source project, when we import this template into another project the image will not be imported.

Importing a template from Saved Templates

1. In the WordPress Backend select Templates > Saved Templates.
2. At the top click on the Import Templates button.
3. Click the Select File button and in the Open pop-up window select the .json file you want to import and click the Open button.
4. Now click on the Import Now button.

Import template from Elementor Editor

1. Click the Add template icon in the Elementor Editor.
2. In the pop-up window click on the My Templates tab.
3. At the top click on the icon Import template.
4. Click on the CHOOSE FILE button and in the Open pop-up window select the .json file you want to import and click on the Open button.
5. You should now see this new template in the list along with all the templates, click on the Insert button of the template to insert it.