Custom templates

You are here:
Estimated reading time: 4 min

What are Custom Templates?

This feature is only available starting with v2.1.0 .

Custom Templates feature has 2 purposes:

  • Override various global styles of any page or groups of pages (specific archives, posts, etc.);
  • Override the content of the page with Elementor built content;

The basic principle is – target a specific chosen part of the site and customize the options or edit the template content (with Elementor) to override that page’s content.

To find the Custom Templates list, please head over to Rey Theme > Custom templates eg: https://d.pr/i/VeikEB .

How to target a specific location

First, head over to Rey Theme menu in the backend and click on Custom Templates. Create a new custom template and choose one of the main locations eg: Page, Single, Archive, Product page or Product archive.

Create conditions if you want to go deeper targeting a desired location.

In this example the target is set for product pages that belong to Jackets category.

You can set multiple conditions to be more specific.

Overriding global page styles

As mentioned, one of the purposes of this tool is to override the global page style. You can already do this in each page’s / post / term’s backend settings eg: https://d.pr/i/1P0ldz , however this tool is mainly to target groups of pages.

For example you want all product pages to have the header set as Fixed. Or to disable the header, or to change colors, layout settings, etc. Previously you could’ve only do this by editing each product individually.

Edit various global options and styles.

Overriding the content with Elementor

With this tool, you can override a page’s content with Elementor. For example you will probably need to have complete design control over the product pages.

This feature is mostly the same as Elementor Pro’s Theme Builder.

Note: For the moment only Product pages and Product archives are fully supported.

To override the content, simply make sure to target a specific location and just hit that blue Edit with Elementor button. Once you do this, the targeted pages will show whatever this template page contains in Elementor.

Editing product pages

Here’s a quick video recording https://d.pr/v/VqkHqQ , to create a product page template that applies on all products.

First, make sure to select the product pages eg: https://d.pr/i/mAz5dt (not setting conditions will target all product pages).

You can now hit that big Edit with Elementor button at the top eg: https://d.pr/i/hyzCLt .

Then, once in Elementor, you can spot on the left all elements that compose a product page.

Tip: To build a product page faster, please open Rey’s Template Library and import product pages.

Product page’s elements in the Elementor editor

Editing product archives

First, make sure to select the product archive eg: https://d.pr/i/MK9Ymh (not setting conditions will target all product archives).

You can now hit that big Edit with Elementor button at the top eg: https://d.pr/i/hyzCLt .

Product archive page elements in the Elementor editor

Tip: To build a product page faster, please open Rey’s Template Library and import product archive pages.

Frequently asked questions

How to detect if page is built with a template?

To know if the current page is overridden by a custom template, simply look into the Admin bar’s Rey menu logo. There should be a dot next to it. If the dot is white it means the custom template only has various settings overriding the page. If the dot is reddish, the custom template also overrides the page’s content.

If there’s a dot next to “rey” it means it’s a custom template.

What if there are multiple templates targeting the same location

You can control which template to apply by editing the Priority field in the advanced settings eg: https://d.pr/i/MByM3X . The highest number will be the one that gets applied.

Keep in mind that only a single template can be applied on the page.

How to set another preview (eg: product, archive)

When editing product pages or archives with Elementor, by default the latest post/term is grabbed, but if you want to change this, simply click on the Settings gear icon in the bottom left corner eg: https://d.pr/i/aYmlPE and change the preview setting.

Using this can affect site/page performance?

Yes. Objectively, there’s more code running when using this feature. The question is probably more “how much will this affect performance”. This i’m afraid i can’t answer without knowing the context. Basically the more you add, the more code runs, the slower the app.

Normally there shouldn’t be a big difference, but given that a site can run lots of plugins it can be noticeable.

In my opinion this is a useful tool but try not to abuse and add to many complex and complicated stuff inside a page. Not only it might look bad but it could also confuse users. Most of the time simple wins.

Why aren’t the product page elements available everywhere in Elementor?

By adding this code snippet https://d.pr/n/lM3h8O into the child theme’s functions.php , these elements should be shown in the editor, however the downside is that they won’t work properly because they need a global post ID, which, for general pages it will be the main query’s one. So not being a product or post, it will not work. So i will need to insert a new control in each element to be able to pick the post ID. This is under development and depending on the requests, i will prioritise it.

Why some elements don’t have the same options located in Customizer?

That’s because many options can only run globally, not based on the element’s context. I would like to learn more about the context that Rey users want and need to use these features, so they’ll be gradually added.

Why can’t i build the blog or custom post types?

This is simply under development, that’s all. They’ll be gradually released in the upcoming updates.

Will you add a loop item builder?

It’s something i’m definitely considering, but i don’t want to sacrifice performance. Adding this can surely impact a grid’s performance so i don’t want to rush it. I also want to learn more about this and the context it’s needed for. If you want to propose ideas, please do!

Was this article helpful?
Dislike 0
Views: 301

Join the conversation