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 . If the menu item is not showing up, please access Modules manager and make sure Custom Templates for Elementor is enabled eg: https://d.pr/i/CO895W .
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.
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.
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 eg: https://d.pr/i/2LTI0Y .
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 .
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.
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!
Can’t make too much sense off of how WordPress posts, pages and taxonomies work. How does it work exactly?
WordPress only allows editing posts through its editor. Among posts, there are blog posts, pages or WooCommerce products. Products however have restrictions and only their descriptions are allowed to be edited, while the rest of the page components are mainly the product data.
The taxonomies (Archives, Categories, Tags, etc.) are groups of terms that have a relation to posts and allows them to be organized better. These taxonomies however are not editable with an editor and their purpose is to list the posts.
The Shop page or Blog page are special autogenerated pages that visually behave the same as a Taxonomy, even though they’re created as pages.
The Search page is also an autogenerated page which has the same properties as the Shop page (when WooCommerce is active).
This Rey Custom Templates feature allows building these types of taxonomies and pages, with Elementor, through individual components and elements. This works by overriding these pages natural behaviour, with a simple Elementor built page which inherits properties from the Taxonomy (the main query).