Elementor has several types of templates. WordPress itself also has the concept of templates. Each of these templates is documented in its own right, but it is difficult to find good information about how each template is different and how to choose between them. Consider this article to be a disambiguation of the term “Template”, as it applies to WordPress and Elementor.
WordPress Template Files
Let’s start with WordPress. When you’re editing a post or page in the standard WordPress editor, you can pick among the theme template files that will be applied to the post. This can be done in the right-hand sidebar by default. WordPress also has a template hierarchy, which is the logic it uses to pick among your theme template files if you don’t manually override it. The previous is described in the WordPress Theme Handbook.
These are just PHP files that generate HTML elements around whatever data is passed into them, like posts or pages. Examples that you may have seen in your favorite theme:
- Header.php
- Footer.php
- Archive.php
- Single-post.php
To get your handwritten template to appear as an option in the template dropdown you will need to add a “Template Name” key to a comment at the top of your template file, as directed in page template files in the theme handbook.
We usually leave the template picker on “Default template” and determine that default elsewhere. If you’re on Elementor, that would mean opening a page editor (for any post or page), and going to Site Settings > Layout > Default Page Layout. Your options here include a couple of template types that ship with Elementor and a setting to allow the template to be determined by the theme.
The Elementor documentation does a good job summarizing the differences among the four page layout choices.
Elementor also has the ability to set up a default post type, like a blog template. This is helpful, but when designing, occasionally, more flexibility is needed. For example, if a client of ours has an event, there are standard templates for particular events. But if the client instead wants a full landing page, we’d have to go an entirely separate template route, like using the Elementor Full Width option. This gives a level of freedom for more custom elements.
It’s definitely good to stick to normal templates that are set up, but if you have a 25th anniversary expo or something similar, and you need a bigger presence and more flexibility, the default post won’t be what you want.
Elementor Page Templates
Elementor allows you to “templatize” either entire pages or sections. Sections are basically “rows” in Elementor speak.
To save a page as a template, use the green button in the bottom left corner. This type of template is not a Theme Builder template. We’ll discuss the differences below.
To save a section as a template, right-click on the section, and choose, “Save as Template.”
When you create a Page or Section template, you can think of them as predefined starting points for pages and templates. Once a Page or Section template is inserted into an Elementor post it can be modified as needed.
If the source template is updated after a page from which it is created, the created page is not updated. This is a big difference from Theme Builder templates. Use cases for this could include something like landing pages, where you want them to be based on, but slightly different from the site’s overall theme. Or if you’re doing A/B testing on some specific pages and you don’t want the markup to change with the theme.
Elementor Theme Builder Templates
If you’re using Elementor, then the Elementor Theme Builder allows you to manage the Theme Builder templates. These templates are created in Elementor and are not related to WordPress theme template files.
The Elementor Theme Builder allows you to manage your whole page Elementor templates as well as your site parts templates. Site parts are things like the header and footer. Site part management is only available in Elementor Pro, so you’ll have to upgrade from the free version to take advantage of the site parts template feature.
Where each template is applied depends on display conditions. Display conditions can include things like the type of post and the categories of the post. You can select whether meeting a condition should trigger or exclude the use of a template. More than one condition can be attached to each template.
If a template has a green dot next to it, it means that the display conditions are currently set up in a way that the template is being actively used. If the dot is gray, it means the template is not being used actively. For example, in the screenshot below, the alternative header is not being used on the site, but the standard header is:
The theme builder can automatically apply a template based on the conditions you set. Furthermore, the way theme builder templates are applied is that only the portion of the template that has the post_content widget is editable by a post author. This gives the designer precise control over the layout of the page and which portion an author can edit.
If you update a theme builder template, then all the instances that template is applied to are also immediately updated. This is a powerful way to keep your site up to date.
Elementor Section Templates
Section templates provide a way to save a set of widgets together to be referenced from different pages. To create a section template, right-click on a section and choose, “Save As Template.” Sections are essentially rows in Elementors.
We like to use these two in our website designs. Theme builder templates are the larger components, with the section templates working like widgets, able to work within the theme builder templates. For example, the Theme Builder Templates are the header, footer, or templates for post types. And if the Theme Builder is the header, the Section Template is the drop-down navigation. Using them together makes for an even more powerful design.
Using Templates with Advanced Custom Fields
Templates go hand-in-hand with advanced custom fields (ACF). These are helpful for design teams to use with clients who may need more guardrails. If the client is more involved with future web design and edits, ensure the guidelines (and design integrity as a whole) are both upheld by creating fields for template setup. For example, keeping the CTA banner clear and untouched from client changes to visuals can be accomplished by setting up simple fields in the WordPress editor.
Because there is less room for error and/or deviation from the set styles and established brand guidelines, the design’s QA phase is sped up. If a mistake is found, it can be changed in one place instead of multiple pages/areas. Even when adjusting to mobile resizing and responsiveness, that can be done once: one and done.
The Difference Between Using Theme Builder Templates vs Page & Section Templates
When you insert items into Elementor you can choose to insert either a section or page template. You cannot choose to insert a Theme Builder Template, since the use of Theme Builder Templates is determined by display conditions.
Elementor Cloud Templates
In the past, Elementor had users on single sites exporting and importing different templates across multiple domains. Now users can set up cloud templates to maintain consistency across site domains by adding access to templates across different domains. For example, a parent company with sub-companies can use one CTA on the sub-company pages that are all styled the same. It’s very convenient to apply changes even more globally. Every change, whether a section or a full page, can be saved and reused and applied wherever you have account access.
Other Types of Elementor “Templates”
If you’ve made it this far, you now understand the major types of Elementor Templates. There are still a few more items in the Elementor Template sidebar.
Kit Library
The “Template” sidebar heading for Elementor has a section called, “Kit Library.” A “Kit” is a combination of Elementor templates, pages, popups, styling, and other things you need to build a site.
Elementor maintains its own Kit Library you can browse, but you can also create your own using the Elementor Export Kit functionality located under Elementor > Tools > Import/Export Kit.
You can import a Kit either in Elementor Tools or the Kit Library upload functionality.
A Kit Library is a great way to scaffold new websites.
Elementor Global Widget
Global widgets are a Pro feature. These are singular widgets (ie, a title) which can be edited in one place, used anywhere, and are the same everywhere (style, colors, content, etc). The best use case I can come up with for this is a title widget with your company’s phone number; include that as a global widget wherever you want that number to appear. If the phone number were to change, you could edit that in one place and be done with it. It’s a contrived use case, because this is why WordPress has Options, and a “wp_options” table in the database, but maybe using those just doesn’t suit everybody’s workflow. Global widgets are controversial but I am not here to judge.
Elementor Template Widget
The Template Widget is a Pro feature. It is a widget that can pull any Elementor template into the template/page/layout you are working on. Any changes you make to the referenced templates will be reflected in your use of them with this widget.
Elementor Popups
An Elementor Popup is an Elementor editable workspace housed in a modal, geared towards the creation of popups. You can control when, how, and where you want your popup to appear.
Elementor’s Naming Conventions
At Solid Digital, our designers typically use carrots to break names down i.e. “>blog” or”>details”. Ultimately, it’ll be up to your team to find the naming convention that works for you to keep things in order. Elementor does provide labels, but it may not be ideal for your company’s names. As you set it up, ensure your team can keep track of it all. Go too specific or too broad, and you may struggle to find something in the drop-down because it’s not a name your team would naturally use. Be descriptive (yet simple) and be consistent.
Pairing Up Elementor Tools and Templates
Using Elementor’s tools and templates in tandem makes things more efficient and more consistent in design. All of Elementor’s options have global styles to make consistency easy. Using Elementor’s tools to set up the sections can provide the best possible design outcomes—don’t forget you have them.
Elementor can save certain styles as the default. This can serve a purpose similar to templates. For example, the spacing system for a section: if you want that as the default, save it on the widget you made. This is more of an indirect way of templating—if you save adjustments as the default for that widget (adjusting padding, margins, etc.) then you don’t have to keep doing that for every widget. Then, you can template faster—and be more consistent and efficient with all the different elements on your site.
Landing Pages
Finally, the Templates menu items also contain a “Landing Pages” item. These are standard Elementor pages collected into this area. There are available starting landing page templates available from the Elementor template library.
Wrapping Up
Hopefully, this guide has shown you the wide variety of things that the single word “template” can mean.
In our minds, the most important distinction to understand is the difference between Theme Builder Templates and page or section templates. Both applying and modifying these two classes of templates are different.
Page and section templates can be manually inserted into a post. Theme builder templates are controlled via display conditions.
Modifying a theme builder template or global template will modify all instances of its use, while modifying page or section templates will not modify any instances where they are used.
