This lesson is a part of the How to Build & Maintain Elementor WordPress Website? course.
On Step 6 we’ve checked the process of editing and creating pages with Elementor builder, now let’s see what are the page templates and how we can use them.
In WordPress theme development, a template defines part of a web page generated by any WordPress theme.
For example, header.php is a default template used in most WordPress themes. It defines the header area of web pages generated by WordPress. The header file will typically be loaded on every page of your WordPress site, allowing changes to be made to a single file, that will apply across the entire website.
In terms of Elementor builder template is a designer-made page layout that you can import as a file, and use on any page of your Elementor-built website.
You can check this video tutorial by Elementor there you will learn how to make use of the Template Library which is an awesome feature of this builder.
I’d like to share with you some ideas on how you use page templates.
If you’re going to use the Monstroid2 theme and a free version of the Elementor builder you can make use of a separate library of sections, and pages called Theme Parts.
As you can see there are tabs that stand for the templates that cover all parts of your website.
Now let’s check the template that I’ve just created, you can see it on the screenshot above, I called it elementor lessons.
I’ve made a test landing page and assigned it an elementor lessons header that’s displayed only on this page.
So basically it’s a landing page with anchor menu when you hit any menu item certain page part will load.
So if you want to create a separate header for some page on your Monstroid2 powered website you need to:
Now let’s go back to the anchor menu.
When you’re building any page you can assign its section the CSS ID through the Advanced tab.
In the menu, you will have to use the same ID’s as you have set for the page sections. Here’s a small lifehack for you, Elementor has a great feature called the FINDER, use the shortcut CTRL / CMD + E to open it, it’s working on any page of your website even on front-end.
So when you’re done building the page open finder, and type in menu to open the Menus editor
Then hit create a new menu link, give it a name, and then hit Create Menu
Use the Custom Links section to create new menu items
The structure if the anchor menu item should be following: page URL + #css id, for example, https://www.yoururl.com/some-new-page/#intro, don’t forget to use the # symbol otherwise menu item won’t work.
The CSS ID is the one you wrote here
When you’re done editing your menu don’t forget to click on the button Save Menu.
In one of our next lessons, I will show you how to create a mega menu with the help of a JetMenu plugin.
Now let’s simulate a case when we need to reuse one of the templates we’ve created previously.
To save a section as a template you need to right-click it and then choose Save as Template
On the next step, you need to choose a name for your template.
That’s it, you’ve saved your section as a template.
From the My Templates tab in the Elementor library, you can access all pre-designed templates you have.
If you click on three dots you can choose from two options Delete or Export.
When you export a template you will get a JSON file that you can use on any other Elementor-powered website.
Now let’s see how we can create a template from a whole page.
In the bottom left corner, there’s an Update button, right next to is there’s a small arrow pointing upwards, when you click on it you will see additional Save Options.
There you will find a link Save as Template. Click this link when you want to create a template of the whole page.
Please note! If you’re using Elementor PRO, or you have built some functionalities using third-party plugins for Elementor, certain areas of your template may not be functional on websites without Elementor PRO, or the plugins you have used.
End of the lesson.