WPDesigns Site Logo
,

How to Add Templates in Elementor

How to Add Templates in Elementor Blog Cover
Share This Post

Table of Contents

In this guide of WPDesigns, I will discuss the different types of templates available, the benefits of the various templates in Elementor, how to use create them, and how to import them.  Creating custom templates does require Elementor Pro.

How to add custom template in Elementor
Custom Template

Benefits of Custom Templates in Elementor

Custom templates allow you to quickly and easily reproduce large quantities of content over many pages with relative ease.  One good example of this could be for a page heading that is used continuously over the site but remains mostly the same.  Another could be perhaps a contact section that maintains the same layout and design over several pages.

Another use case of templates is importing templates and websites that are already constructed.  At WPDesigns we offer a range of prebuilt sites that you can download, edit and install as your own.

Different Types of Template Within Elementor

There are several different types of template that Elementor offers.  These are dynamic templates and static templates, they are used in different places and are not interchangeable, a description of each will be described below.

Static Templates

A static template is something that is created in regards to a certain page or post.  If you have created a page or section of a page then you can turn that into a static template.  This can be added into pages and posts as you need.  Creating a page heading that is used over and over is a good use of something that is a good example of good use case of a static template.

Dynamic Templates

You can build Dynamic templates that will appear over and over on the site; these are created in the Theme Builder and includes templates such Header, Footer, Single Blog, blog post archive, single product templates and product template archives.  These will repeat themselves in the given location and the data inside will often change as in the case of the blog and products, the framework surrounding them, or the layout  stays the same but the information inside will change depending on what is being viewed.

How to Create Dynamic Templates in Elementor

Step - 1

To add a custom template go to your dashboard and install Elementor and Elementor Pro first. After that you will see the Template option in navigation bar at the left hand site. Click on templates and then theme builder. After that click on single and you will see a new window where a dropdown option will appear. Just select a type that you want to create and then next give a name of the template. After that, click on create template.

How to create new template In Elementor
How to create new template In Elementor
Dropdown options for template types in Elementor pro
Dropdown options for template types in Elementor
Template name & create template option
Template name & create template option
Pre made template of Elementor
Pre made template of Elementor

Step - 2

Then you will get few pre-biuld template that you can insert. Which are really professional. And the alternative is to cross the window and go with the custom design.

Step - 3

To pick a particular page as the preview example when editing, press the gear icon in the bottom left corner of the widget screen.

Gear option
Gear option
Preview setting
Preview setting
Designing custom template
Designing custom template

Step - 4

Now you can edit the template as you like by using the Elementor widgets in left hand side.

Step - 5

After finishing edit the page click on publish in the bottom left side. Then you will see a condition window will apear.  You may use Conditions to determine where each template appears, whether it’s in a particular category, taxonomy, or on a Specific Page. To know about more condition click here. After adding condition click on save and close button and then the template will live.

How to publish your template
Publish Button
Display condition
Display condition

How to Create Static Templates in Elementor

As previously mentioned static templates can help with commonly repeated sections on your site or add sections/ pages created by other people, in this part I will go through how to create your template, import a template (if adding a premade one downloaded to or saved to your computer), and how to add one if it is already in your Elementor template library.

Creating Your Template Section or Page

Step - 1

In order to create your template, you will first need to create the content that you wish to turn in to a template!  It is worth making sure that you have made sure it is complete and you have also made sure that it is looking good in both the mobile and tablet versions.  In order to do this, you can refer to other sections of this guide such as How to Add, Edit and Delete a Heading in ElementorAdd, Edit and Delete Text in ElementorHow to Add a Video in Elementor, and How to make Your Elementor Post Responsive for Mobile and Tablet.

Saving Your Templates in Elementor

Step - 2

Once you have created the section or page you wish to turn into a template you can now use the options that Elementor offers you to turn it into a template.

There are two different ways to create this template, one works for the section and the other works for the whole page.

Section

In the next few steps it will be focused on creating a template from a section, jump ahead to see how to do it for a page.

Saving the Created Section

Section: Step - 2.1

See the next part of the post for creating a full-page template.

Dropdown otions from right click above the section
Dropdown otions from right click above the section

To save the section that you have created you can right-click on the blue section options when you hover over the section to open up the drop down list.

How to save as template

From here, select the option “Save as Template“. Which will then open up the template save screen.

How to save template
How to save template

You will now be able to give the template a name and save it in your template library.  It is worth working out an efficient labelling method within your library as the more you get the less “Template 1” will mean 2 months later.  Perhaps saving it as “Page Heading Section” or something similar.  You can also create categories to help you organise your templates, alternatively, HappyFiles allows you an effective solution to organise them all with the folder options.

Insert, export and delete options of template
Insert, export and delete options of template

Once the template has been saved it will be added to the list of templates contained on your site and can be exported, deleted or inserted.

Step - 2.1

Adding the Template to the Page

After creating your template and adding it to your library you can now go to the page, post or section that you would like to add the new template to.  Make sure to open up the place, page, or post you would like it to be.

Add new secton and add a template options
Add new secton and add a template options

You can now click to add a new section, just as if you were going to create a new section on your page.  This will allow you to see the options of the “Add New Section” (the burgundy circle with a white cross) or “Add Template” (the grey circle with white folder).

My templates
My templates

Clicking the grey folder icon will open up the template library, but it will default to the “Pages” tab and you will need to switch that to the “My Templates” tab in order to access the ones you have saved.

How to insert a template
How to insert a template

You can then search through the templates in the library, that are hopefully wonderfully organized!

After finding your chosen template, you can hover on it and then click the green “Insert” button on the right-hand side.

Yes or no option to import the template
Yes or no option to import the template

After that, it will ask you if you wish to “Import the document settings“, click yes or no as needed.  The page will load, then likely reload again a few seconds later and include your new post section.  You are now able to move it, edit it, and use it as you normally would with any other template section created in Elementor.

Page

In this part of the article I will discuss how to create a template from a full-page created in Elementor.

Saving the Created Page as Templates in Elementor

Page: 2.1

Saving a page as a template is simple to do and the steps are much the same as doing it for a section except the first.

Arrow icon
Arrow icon

Once you have created your page and made sure to have checked and adjusted both mobile and tablet views, you can now save the template as a full page template.

Save as template full page
Save as template full page

Move down to the bottom left of the screen near the “Publish” or “Save Draft” button – to the right of the button, you have an arrow.  

By clicking the arrow you can now select “Save as Template“.  This will now follow the same path as creating a template from a section.

Save options
Save options

You will now be able to give the template a name and save it in your template library.  It is worth working out an efficient labeling method within your library as the more you get the less “Template 1” will mean 2 months later.  You can also create categories to help you organize your templates, alternatively, HappyFiles allows you an effective solution to organize them all with the folder options.

Import, export and delete options
Import, export and delete options

Once the template has been saved it will be added to the list of templates contained on your site and can be exported, deleted or inserted.

Adding the New Page Templates in Elementor

Page: 2.2

After creating your template and adding it to your library you can now go to the page, post, or section that you would like to add the new template to.  Make sure to open up the place, page, or post you would like it to be.

Add new secton and add a template options
Add new secton and add a template options

You can now click to add a new section, just as if you were going to create a new section on your page.  This will allow you to see the options of the “Add New Section” (the burgundy circle with a white cross) or “Add Template” (the grey circle with white folder).

My templates
My templates

Clicking the grey folder icon will open up the template library, but it will default to the “Pages” tab and you will need to switch that to the “My Templates” tab in order to access the ones you have saved.

Insert full page template

You can then search through the templates in the library, that are hopefully wonderfully organized!

After finding your chosen template, you can hover on it and then click the green “Insert” button on the right-hand side.

Yes or no option to import the template
Yes or no option to import the template

After that, it will ask you if you wish to “Import the document settings“, click yes or no as needed.  The page will load, then likely reload again a few seconds later and include your new post section.  You are now able to move it, edit it, and use it as you normally would with any other template section created in Elementor.

Importing a Template into Elementor

You can import a template into your Elementor template library from your computer with ease.  I will show the steps on how to do this.

Json file

You will need to have the files on your computer.  These can either be in the form of a JSON file or JSON files in a .zip folder.

Save template page
Save template page

From the WordPress Dashboard you will need to navigate to “Templates” then “Saved Templates.

Import template option

On the saved templates page you can navigate to the top of the page and click “Import Templates“.  This will open up the file uploader, you will need to drag and drop the files or folder onto the “Choose File” button or click that and find the files in the file browser.  Once you have dropped in your files you wish to upload press “Import Now“.

Importing a template

After you have clicked, the time to upload will vary depending on the file size, but it shouldn’t take too long.  The file will then be added in to the template library and ready for you to add into the page, post or section of your choice.

Adding Your Imported Template into Elementor

Alternate Step - 2.2

After importing your template or zip file into the template library you can now go to the page, post, or section that you would like to add the new template to.  Make sure to open up the place, page, or post you would like it to be.

Add new secton and add a template options
Add new secton and add a template options

Click to add a new section, just as if you were going to create a new section on your page.  This will allow you to see the options of the “Add New Section” (the burgundy circle with a white cross) or “Add Template” (the grey circle with white folder).

My templates
My templates

Clicking the grey folder icon will open up the template library, but it will default to the “Pages” tab and you will need to switch that to the “My Templates” tab in order to access the ones you have saved.

Insert full page template

You can then search through the templates in the library, for your new templates that have just been added.

After finding your chosen template, you can hover on it and then click the green “Insert” button on the right-hand side.

Yes or no option to import the template
Yes or no option to import the template

After that, it will ask you if you wish to “Import the document settings“, click yes or no as needed.  The page will load, then likely reload again a few seconds later and include your new post section.  You are now able to move it, edit it, and use it as you normally would with any other template section created in Elementor.

Conclusion

Elementor is incredibly powerful and when adding the option of templates in Elementor into the mix it becomes even more so

Elementor is incredibly powerful and when adding the option of templates in Elementor into the mix it becomes even more so!

Now that you understand how to create, add and import templates you can create your own and also import any of the WPDesigns templates that you’d like to!  Please check out our premade templates to download them using “Pay as you feel”.  There is no minimum cost but it all goes towards helping us supply and maintain them.

Search
Social Media
Recent Posts
5 Web Design Trends for 2022
5 Web Design Trends for 2022

The creative world of web design has always been the designer’s wonderland that combines various disciplines, including visual design, psychology, and wordcraft. As technology progresses

Read More »
Contact
Want us to get Creative?

We would love to hear from you!

Josh Cut Out

Josh

Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.