As you may know, Elementor is already capable of helping you redesign your headers and footers. But that’s only the tip of the iceberg…
Another great thing that you can do with the 2.0 is build yourself an entirely new single post template with the use of the Elementor Theme Builder. No need to get your hands dirty playing with source code.
In this tutorial, I’m going to show you exactly how to do that. You’ll be amazed at how easy it is.
Here’s the final result we’re going for:
Note- this is only an example single post template that you can build. You can find other Elementor blog templates here.
The process presented below is universal, so you can create other structures and designs as well. You’re only limited by your imagination.
What’s so great about this sort of Elementor-powered single post template?
To get the obvious out of the way first, it looks great, and you can customize it freely just like any other creation built with Elementor. You get to use the same set of features, drag-and-drop interface, and all the content blocks that Elementor gives you normally.
But there’s more:
- Multiple Elementor single post templates. You can create multiple single post templates and have them running side by side.
- Designated templates per category. You can have different templates for different types of posts or different categories.
- Build once and set off across site. You can enable any of your templates on even a single blog post, or you can use it across the board for all posts.
- Add additional elements. You get additional elements that you can add to the template, such as social media buttons, author blocks and more – stuff that might not be available in your current theme by default.
- Edit in real time. You can edit your template in real time while looking at a live preview containing your actual blog data, instead of some dummy, placeholder content.
- Consistent blog template. The template won’t vanish when you update the theme.
Okay, let’s get on with the how-to:
What you need to get started
Just a couple of things:
- a working WordPress website + your favorite theme,
- the free Elementor plugin,
- the Elementor Pro add-on plugin.
Installing both Elementor and Elementor Pro is pretty straightforward as far as WordPress plugins go. The only additional step to get Elementor Pro running is to enter your personal license key on the plugin’s settings page: Elementor → License.At this stage, you can begin building your new single post template.
1. Setting the groundwork for your Elementor single post template
- First things first, yes, you still need a WordPress theme to begin with. Elementor doesn’t replace your theme but rather works alongside it, simply improving on this and that.
- Also, don’t worry about losing your theme’s default single post template. What we’re doing here won’t delete any of your theme’s files. If you ever want to come back to that standard template, you can.
Before we get to work with Elementor, let’s make sure that you have at least one complete, representative post on your blog. Meaning, something that you consider an excellent example of what your average blog post looks like.
We’re going to use that post when previewing your new template. We’re doing that just so we get to work on some real content, instead of having to rely on half-empty posts.
With that out of the way, let’s begin building the template.
2. Creating a new Elementor template
Go to Elementor → My Templates and click on the “Add New” button. Choose “Single”as your template type and click on “create template.”
In the next step, Elementor will ask you if you want to start with any of the availablepredesigned blocks.
You are free to check how those look and perhaps even use one of them as your new template. However, in this tutorial, we’re going to build a new template from scratch – just so we can learn all the ins and outs of the process better.
(Nevertheless, I do have a downloadable template for you at the bottom of this guide, in case you don’t have the time to go through the process on your own.)
When you see that pop-up with the templates to choose from, you can just click on “x”and close it. This will land you at the blank Elementor canvas.
At this stage, let’s hook up the preview to one of your live posts. For that, click on the preview icon in the bottom left corner, and then on Settings:
From the Preview Settings box set “Preview Dynamic Content as” to “Post” and then pick that one representative post of yours that I told you to prepare earlier.
This will populate the preview window with the post’s data.
Before we move onto the next step, here’s a quick look at the structure that we’ll use for our single post template:
As you can see, three main sections there:
- (a) – the head section
- (b) – the post body section
- (c) – the comments section
We’re using this structure just to make things easier to grasp. Lumping everything together in a single section might be too confusing to follow.
Let’s now build each section one by one:
3. Building the blog post’s head section
The head section contains a handful of important elements:
- the headline of the post
- the author box – author image and biography
- the post meta – publication date and category
- the featured image of the post
All of those elements are quite easy to add, which you’ll see in just a minute.
Let’s start by adding a new single-column section.