Tutorials UPDATED: 23 June 2022

How to Create WordPress Custom Templates Using Page Builders – A Guide

Tassos Antoniou

5 min read
Image for How to Create WordPress Custom Templates Using Page Builders – A Guide

WordPress page builder plugins have come on in leaps and bounds over the last few years and can make customizing your WordPress website incredibly easy. With some of them, like Elementor and Beaver Builder, you can also create custom templates which allow you to generate highly customized layouts for both posts and pages.

In this tutorial we’re going to look at those two popular page builders and how they can be used to create WordPress Custom Templates. If you’d rather manually code your own WordPress Custom Templates then check out our article ‘How to Create WordPress Custom Templates Manually – A Guide‘ instead!

Let’s get going!

Create your own WordPress Custom Templates with Elementor

To begin, we’re going to create a brand new template that can be saved and then re-used in other posts using the ever popular page builder plugin, Elementor.

Custom Templates with Elementor - get started

Once Elementor is installed, load up any post page (or create a new one). You’ll notice in the post sidebar (on the right) that there are 2 post templates already available to use: The ‘Elementor Canvas’ template and ‘Elementor Full Width’ template.

Custom Templates with Elementor - template menu

Instead of editing one of these, we’re going to use the Default ‘Full Width Template’ our theme provides (Twenty Twenty) as this will get us closer to the style of our website from the outset. It’s no problem to use any of the provided templates however as you’ll be editing them into a new design whatever you do.

So let’s choose this template and save. Then, click the ‘Edit with Elementor’ button to edit the post layout using Elementor.

Custom Templates with Elementor - edit with Elementor

Take your time to modify the post layout to achieve the design you want by adding and re-ordering elements and filling with media content (such as images) and text from the Elementor left sidebar. Remember though that the idea is that this page becomes a saved Template that can be re-used across your website so don’t make it too specific in terms of content.

You can save time during this build process by using the free pre-made blocks provided by Elementor.

Custom Templates with Elementor - library

Once you’re happy with your design the next step is to save it for reuse later.

In the bottom left corner of the Elementor sidebar you’ll see an option that allows you to save the current page design as a custom template.

Custom Templates with Elementor - save template

Click this and in the popup window, enter a name for this Template and click ‘Save’.

Custom Templates with Elementor - save template popup

Now next time you need to use this design, create a new page, open with Elementor and then click on the folder icon.

Custom Templates with Elementor - load template

The template you saved before will be available on the list under the “My Templates” tab.

Click the insert button to load your template and edit the contents accordingly! This is a HUGE time saver.

Elementor also gives you the ability to categorize your templates which makes them easier to organize. To do this, head back to the WordPress Admin and from the left hand menu click on ‘Templates’. You’ll see a sub menu called ‘Categories’. Open this up and add in any categories you think would be useful. Them head to the ‘Saved Templates’ menu, click ‘Quick Edit’ under a template and assign a category to this.

Elementor is a hugely powerful page builder that not only makes it easy to create great looking websites but, with the addition of things like Templates, can radically speed up the website building process. If you’d like to find out more about how to build a website with Elementor then check out our eight part series on the topic.

Create your own WordPress Custom Templates with Beaver Builder

Beaver Builder is another highly effective page builder that offers similar levels of functionality compared to Elementor. In the same way people prefer different brands of car, WordPress page builder are also an area of personal preference. If Beaver Builder is your WordPress page builder of choice then you’ll be pleased to hear that you can also save custom templates using their system.

Custom Templates with Beaver Builder - get started

Before you get started (and assuming of course you have already installed Beaver Builder!) go to menu Settings > Beaver Builder and make sure the post types you want the builder to be enabled for are checked.

Open a page or post of choice (or create a new one) in Beaver Builder and edit or create your page layout using all the tools provided by Beaver Builder. When you’re ready to save it as a template click the ‘Tools’ menu and then ‘Save Template. It’s worth noting at this point that only the premium version of Beaver Builder allows you to do this. If you’re a regular Beaver Builder user and aren’t currently a Premium user then it might be time to think about upgrading if you’re likely to use Templates a lot.

Custom Templates with Beaver Builder - save template

An alternate to saving Templates however is available in the form of the ‘Duplicate Layout’ option (just below the ‘Save Template’ setting in the Tools menu). This, as the name suggests, allows you to quickly replicate a page for use elsewhere. In many cases this might be almost as useful as being able to save your layout as a Template.

Conclusion

Unless you LOVE to code, page builder like Elementor and Beaver Builder offer increasingly sophisticated ways to create a great looking website. The ability to create and save custom templates is a big time saver, especially if you’re working on a large website. It also ensures that content elements across pages are kept consistent (such as padding) which makes for a more professional website. If however you need to create a manual custom template don’t forget to check out our article on the topic!

See Also

Host your WordPress Website with Pressidium!

View our price plans

OUR READERS ALSO VIEWED:

Building a CI/CD Workflow – Automatically Deploying a WordPress Theme with GitHub Actions

Streamline your WordPress deployment process using GitHub Actions and a CI/CD workflow. Automatically build and deploy a WordPress theme to your Pressidium WordPress site.
Konstantinos Pappas
Konstantinos Pappas
22 min read

Types of Cross-Site Scripting (XSS) Attacks

In this article, on XSS attacks we're going to deep dive cross-site scripting examples to better understand how these types of attacks work.
Tassos Antoniou
Tassos Antoniou
6 min read

5 Best Tips For Web Developers When Coding For eCommerce Websites

So how can you become a successful web developer when coding for ecommerce websites? Check out this article to find out!
Daryl Bush
Daryl Bush
7 min read

WordPress and Cross-Site Scripting (XSS)

Cross-site scripting (XSS) attacks are a common types of website attack seen across the internet. Find out how to protect your website!
Tassos Antoniou
Tassos Antoniou
7 min read
SUBSCRIBE