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.
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.
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.
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 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 Elementor, Add, Edit and Delete Text in Elementor, How 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.
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.
From here, select the option “Save as Template“. Which will then open up the template save screen.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
From the WordPress Dashboard you will need to navigate to “Templates” then “Saved Templates.
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“.
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.
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).
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.
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.
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!
