red line

Elementor Templates a Deeper Dive

Because the word “template” is used in several different ways in both Elementor and WordPress, it can be difficult to wrap your head around all the different instances when building a website.
elementor

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 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 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 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 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 changing with the theme.

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.

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.

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.

Landing Pages

Finally, the Templates menu items also contain a “Landing Pages” item. These are really just 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 is 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 note modify any instances where they are used.

Related resources
How to Add a Portal to Your WordPress Site
The Trap of Improving Page Speed
How to Simplify Your Spreadsheets for Data Visualization