One of the strongest features of Elementor is the Theme Builder. The Theme Builder allows us to use Elementor Pro to build an entire page and set the layout of elements and their appearance exactly the way we want.
So, unlike ready-made themes, we are not forced to compromise or make concessions. Everything can be exactly as we want and need it.
TIP: We can set whether we want to use the new or the old interface in Elementor / Settings / Features. We find the item called Default to New Theme Builder and set whether we want it off (we will use the old interface) or on (the new interface).
The reason I recommend the old interface is that it is simply better laid out. At the top, we will see the tabs of each topic item and by clicking on a specific tab, we will see the templates that are in that tab. We also have a Shortcode for each existing template available right away. Last but not least, the fact that when we create a new template, we can name it immediately is also a great advantage. When using the new interface, we do not enter the name of the template, but simply create it immediately and then, in the Elementor environment, we can rename it. Most of the time one forgets about it, and one’s Theme Creator then looks like every template is called Elementor-item-#1234, so one gets lost in it. On multilingual sites I recommend using the old interface even more because the templates are stored and displayed in a standard list, the foreign language flag is immediately available and the template can be translated into other languages very quickly (for multilingual sites I recommend WPML). In the new interface, the language versions are displayed side by side.
Topic Creator entries
The individual items are located in tabs and replicate the standard WordPress behaviour, using (overriding) templates that may exist within each WordPress theme. Specifically, we have available here:
- Theme Creator: displays all templates that are part of the theme. Pop-ups, standard saved sections, etc. are not shown here because they are not part of the topic.
- Header: Header of the website. Of course, there can be more if needed.
- Footer: The footer of the website. There can also be more if needed.
- Single item: Or “Single” includes all the individual posts we use on our site, i.e. articles, pages and custom post types (CPT).
- Single post: similar to “Single”, but includes only Articles, resp. custom post types.
- Single page: Similar to “Single”, but includes only pages.
- Archive: Includes all archives, i.e. lists of articles and custom post types based on taxonomies (categories, tags, custom taxonomies).
- Search results: Used to display search results.
- Error 404: Error page when entering a non-existent address.
- Loop item: Ability to create a custom entry and use it in the list (articles, custom post types, products, etc.). This is great if the predefined lists don’t suit us (e.g. elements Archive posts, posts, products, or archive products).
- Products archive: In case our website contains WooCommerce, here we can set up an archive (or list) of products.
- A simple product: It is a relatively unfortunate translation of “Single product”. We are setting here a detail of one product. Make no mistake about the translation. “Simple” in this case does not mean that it is only a simple product (and excludes variable, group and pooled products). It’s a translation error. Single should not have been translated as “simple” but as “one/single”. This item is also only available if we have WooCommerce installed on the website.
- Next: In some cases, especially when using external Elementor add-ons (e.g. Happy addons for Elementor, Crocoblock, etc.), there may be additional items depending on the settings and options of the particular Elementor add-on.
How to create a template in Elementor
First of all, we have to realise the basic thing – we are not limited by numbers. We can create an infinite number of the same template types if needed. This way we can achieve e.g. different header for different subpages. Or apply a different template for the list of articles in category A and a different template for articles in category B. It’s all about our need.
We start by selecting the item we want to create in the tab. They probably all start with the header of the page. So we click on the header. If we haven’t created any template on a given tab, the big button will certainly not escape our sight. If we have already created something, the big button will not be available, but we can find the Add New option at the very top. Click on us and a table will pop up. If we are on that tab, we will have the template type we are currently in pre-selected in the first selectbox. In the second field of the form, we enter the name of the template so that we know what the template does in a month’s time.
Template creation
Depending on the type of the selected template, we have the elements that are characteristic for the template available at the top. So in the case of the header, it’s somehow automatically assumed that there’s going to be a page logo, some menus, breadcrumbs, and Elementor will automatically offer all of these elements pretty much at the top to make it easier for us. In the case of a single article, we will have the title of the article, the content of the article, navigation to other articles, a list of similar articles, etc.
It’s just obvious that we create a specific template in Elementor as usual, drag&drop individual elements as we want and need them and set their visuals.
Publication templates
Once we have the template ready, it’s time to publish it. The first time we try to publish a template, the Display conditions table pops up before we even publish the template. In order for Elementor to know when to run the template, we need to set this in Elementor. We’ll do it here.
We have a double setting – Include and Exclude. We also have the option to add more conditions. We’ll now have to turn on a bit of programming-machine thinking to set up the display conditions as simply as possible.
We can set the conditions according to:
- Entire site: Full page. Super handy for the header and footer if we’re using the same template across the entire page.
- Front Page: Sets the condition for the front page (homepage).
- Article
- Articles: We can select one or more specific articles where the condition is applied.
- In categories: We select and search for specific categories. The condition is applied only to those articles that are in that category. You need to be careful, because an article can be included in more than one category, the conditions will fight and the last one will win (if we have two categories A and B and the article is included in both category A and category B, then the template that we set the display conditions for last time will be applied to the article).
- In Child categories: The condition is applied to the child categories of the category we have selected.
- In tags: Same as for categories, but it applies to brands. These are not hierarchical, so we just simply select which tags the condition should be applied to.
- By author: Finally, we can also set a condition based on the author of the article.
- Website
- Site: We can select specific pages to apply the condition to.
- By author: We can also apply a condition based on the author of the page.
- Custom post types: If we have any custom post types, we can apply the condition to them in the same way as for articles. If the CPT has some taxonomies of its own, we can apply the condition here based on its own taxonomies. If the taxonomy is hierarchical (analogous to categories in articles), we will also have Child of, otherwise this option will not be available. But according to the CPT author, we can always set the condition.
- Media
- Media: Set the condition for displaying multimedia content. In practice this is hardly used, but it is good to know that there is such a possibility.
- Media by author: Set the condition according to the author who uploaded the file to the web.
- Direct child of: The condition is applied to the direct (closest) descendant of the contribution we select. We use the hierarchical sorting set up in WordPresse .
- Any child of: As in the previous case, only the condition is applied to any descendant. That is, even if e.g. about the hierarchy below.
- By author: Applies the condition based on the author, nothing else (not even the post type) is examined, only the author of the post.
- 404 page: Applies a condition when accessing a 404 page, that is, a non-existent URL that someone can get to. Most often, we direct him to the homepage.
- Search result: Applies the condition to the search results page.
- All archives: Applies the condition to all archives.
- Date archives: Applies the condition to archives that are date-based.
- Next: When using other plugins and add-ons to Elementor, we may have additional configuration options available.
Setting display conditions is something we encounter quite often in Elementor. Not only with templates, but also with popups, or even when writing custom code in Elementor. You just have to try it and see how it behaves.
