Last Updated on
One of the best things about Elementor is the fact that you can create WordPress single post templates visually, using the Elementor builder. If you’re not sure what a single post template is, it’s the template that is used to structure and style your blog posts.
All of the blog posts on a WordPress website typically use one single post template, that is usually defined somewhere within the active theme. It used to be a pain to edit the template that your blog posts use, as you’d have to use PHP, HTML and CSS – not a very ‘WordPressy’ solution.
However thanks to Elementor, that’s a thing of the past. You can now create and customise blog post templates, without code, and apply them to your blog posts using different filters and categories. In this guide I will show you how to create a custom Elementor single post template and apply it with step by step instructions.
In fact, I’m actually going to rebuild the single post template our blog uses step by step for you, to show you how easy it is to make simple, well designed templates with Elementor.
Creating a single post template with Elementor
Before we get started, to follow along you’ll need to make sure you are using Elementor Pro and don’t just have the free version of Elementor. So if you haven’t upgraded yet, go purchase the premium version, then come back.
Elementor Pro comes as a separate plugin, so you will need Elementor installed, then to install and activate Elementor Pro.
If you’re not sure if you have Elementor Pro installed, go to Appearance > Plugins and you should see two plugins as pictured below.
Once Elementor Pro is activated, you should see a Templates section in your WordPress CMS under the Elementor section. Click on Templates > Add New and you should see a popup screen like below.
Click ‘Create Template’ then let’s start creating our template.
You’ll be presented with the screen shown below. Exit this box, as we’re going to be creating a template from scratch to ensure you have a proper understanding of how the editor works.
Creating the post container
Most blog post templates use a simple structure consisting of three parts:
- Post container
- Post header
- Post body
- Post footer
To start with we’re going to build the post container for our Elementor single post template, which is a essentially just a box to store the header, body and footer of our post.
Creating the outer container
First things first, add a new section and make it a 1 column row. To do this, simply click the first option on the left, which displays one large rectangle.
Once the section is created, click the six dots that show when you hover over the top. These dots are the edit button in Elementor and are important as we’ll be using them a lot.
Where it says Content Width set this to boxed and give it a width of 880 by typing that number into the number entry box just below Content Width.
So that our content is easy to read, we’re going to apply a background color to our outer container (and later a white background for our inner container). Here’s how to do this:
- Click ‘Edit Section’
- Click ‘Style’ in the Elementor editor
- Click ‘Background’
- Click ‘Classic’ next to ‘Background Type’
- Click ‘Colour’
- Copy and paste this hex code into the colour box – #e3e1e1
Elementor has built in revision control, but now would be a good time to save our progress by saving the template as a Draft. You can save a template as a draft by clicking on the little arrow next to the green Publish button, then clicking Save Draft.
Finally, let’s apply some padding (which is a fancy word for spacing) to the top and bottom of our outer container.
Make sure you are still editing the section, then click Advanced which is the third tab you can access within the Elementor editor.
Click the icon that looks like a paperclick underneath Padding, this will allow you to edit the padding for each side of the box individually (by default the values are linked together). Type in a value of 60 for top and bottom.
Styling the inner container
We just created an outer container for our posts, commonly referred to as a section or row. Now it’s time to style the inner container of our Elementor single post template, which is actually a column.
Click on the white icon with the dark grey background in the middle of your outer container.
This brings up the Elementor editor for the inner container (column). Our outer container is using a background colour, so to make our content visible, we’re going to set a white background for our inner container to create a nice contrasting effect.
Following the same steps we used to change the background colour of our outer section, click into Style and paste this hex code into the colour box – #fff.
It might look like the background hasn’t changed, don’t worry it has, once we start populating the inner container with content you will see.
Next click on Advanced and apply the below padding to your inner container:
- Padding-top: 32
- Padding-right: 60
- Padding-bottom: 32
- Padding-left: 60
We’re going to finish up the inner container by adding a slightly rounded border. From Style, click on Border then apply these settings:
- Border type: solid
- Border width: 1px
- Border radius: 5px
- Border colour: #cfcfcf
You won’t see these changes reflected just yet as there’s no content within the inner container, but save your changes using the green Update or Save Draft button and let’s continue.
Creating the post header
The post header is where we are going to introduce our post. This section will contain the post title and any appropriate meta data, or author information.
It’s not technically a header as we’re not creating a separate section, or building a header, but it’s good to separate our template into logical sections.
Start by adding a post title widget to your inner container from the Elementor builder.
Firstly, and most importantly, make sure that the Title option is showing Post Title with the spanner icon to the left of it. If it isn’t, select this from the dropdown. This will automatically pull in the post title from your database for each post.
Click edit on the post title and center align the text by clicking center on the alignment selector from Content.
Make sure that the HTML tag H1 is selected, so that your posts use a H1 tag for the title. This can be set from Content and is the option above Alignment.
Now we’re going to add some meta data to our posts. This step is optional. Meta data contains stuff like the data, who published the post and what category the post is in.
To display meta data, we’re simply going to type post info into the Elementor Elements search box, which is accessed in the main Elementor editor.
Now we’re just going to apply a couple of little tweaks to the meta element. Click edit on the meta data element and from the Content tab, make sure the layout is set to inline.
Next click on the Style tab and change the Alignment to center.
To finish off our post header, we’re going to add in a Post Excerpt by searching through the Elementor Elements.
Creating the post body
Now on to the good stuff, the post body of our Elementor single post template, which is where actual content of our posts will display. The post body is where we style how the post content that is going to be displayed across all of your blog posts.
To start with, search for the Post Content element from the Elementor Elements section of the builder. Drag and drop the Post Content element directly beneath your Post Excerpt.
If you’re using Elementor and your WordPress theme correctly, you shouldn’t actually need to do much styling here.
The Post Content element will inherit styles from two places. Firstly, from the Default Fonts and Default Colours settings within the Elementor builder. Secondly, from your theme.
If you don’t explicitly set Default Fonts and Default Colours, these will be inherited from your theme, which means whatever you set at a theme level should be applied.
Setting Elementor Default Fonts and Colours
If you’re not sure if your default fonts and colours are correct, you can set them by following these steps:
- Click the 3 line icon in the top left of the Elementor builder
- Click Default Fonts and set them accordingly
- Click Default Colours and set them accordingly
Applying custom CSS to the post body
If like me you have global styles applied outside Elementor, you might need to apply some custom CSS to the post body to override these styles and get your single post content looking how you want.
This step is completely optional and if you have a simple website setup that is using a basic theme along with Elementor, it shouldn’t be necessary. Here are the steps if you want to follow along:
- Click edit on your Post Content element
- Click Advanced
- Click custom CSS
- Apply your custom CSS
Elementor makes the selector tag available to you, to apply your CSS directly to the wrapper element you are targeting. In the screenshot above, selector h2 for example will apply to all h2 tags within the Post Content element.
That’s all we need to do with our post body!
Creating the post footer
The post footer is where you should include things like relevant posts, social share buttons, comment boxes and calls to action.
It makes sense to include these elements here, to encourage readers to check out more content, share your post, or leave a comment.
Add social share buttons
Let’s start with social share buttons as they are super easy in Elementor. Search for ‘social’ in the Elementor Elements search box, then drag and drop the Share Buttons element directly beneath your Post Content element.
We have some social sharing buttons, but they don’t match the simple style of our site, so let’s style them a little:
- Click edit on the Social Share element
- Click Content
- Set Skin to Flat
- Set Alignment to center
- Click on Style
- Set the Button Size to 0.8
- Set the Icon Size to 1.5
Add an author box
It’s time to take credit for your posts! And we can do this by adding an Author Box element beneath our Social Share element. As usual, search for the Author Box in the Elementor Elements search tool, then drag and drop it beneath the Social Share element.
This is a beautiful little element, and not much styling is required. We could leave it as is and it would look great, but let’s just apply a little bit of padding so it matches the spacing throughout our site.
Apply 32px padding to the top and bottom of the Author Box element by clicking edit > Advanced > Padding.
Adding related posts
One thing every single post template should have is a related posts section. Including related posts is a great way to keep people on your site, and show off what you know in the process.
Elementor does not have a related posts element, but it’s very easy to customise the existing Posts element to do this for us.
Before we add a related posts section, search for the Divider element from the Elementor Elements search box, then drag and drop one beneath the Author Box. This will help us break up the footer section a little bit, which contains a few more elements than our body or header.
The divider only requires one simple bit of styling. Go to Style and set the colour to – #e2e6e8
Now back to our related posts. Search for the Posts element, then place one beneath the Divider element we just added to our template.
This is the default Posts element, so we need to apply some styling to make it look more like a related posts element. Follow the below steps:
- Click edit on the Posts element
- Click Content > Layout
- Set Posts Per Page to 3
- Set Image Size to full
- Set Image Ratio to 0.5
- Remove the meta data by clicking the x button where it shows the meta data
- Click Style and set a top and bottom margin of 32px, make sure to unlink the margins first
Voila, we now have a simple related posts element displaying 3 additional blog posts. The Posts element has a query setting which can be accessed by editing the Post element and scrolling down to the Query section, so you can control what posts show here.
There are various options for managing the query including setting which posts show manually, but that’s a post for another day.
Adding a call to action
Every good single post template should have a call to action, prompting users to take some kind of action after reading your content.
The easiest way to do this is by embedding an image in our template that links through to somewhere. So, search for the Image element then insert one beneath the related posts section we just created.
Let’s also add another divider first, duplicate the existing divider then drag it down so that it sits beneath the related posts, separating our call to action section from our related posts section.
Now let’s select an image to display from the media library, and set the size to medium large.
Set the link to custom URL and paste in where you’d like your users to end up, whether it’s another page on your website or an external form or landing page.
Adding a comments section
To finish up let’s add a comments section for users to engage with our content. Search for the Facebook Comments element in the Elementor Elements search then insert one beneath the call to action section.
We don’t really need to edit anything with this element, but it would be good to separate it from the above call to action section, so let’s duplicate another divider and move it above the comments section.
As this is the last section on our blog, let’s change the styling of the divider by applying the following:
- Click edit on the Divider
- Set the Style to Dotted
- Switch to the Style tab on the top menu of the editor
- Change the Gap to 28
- Set the color to default black
Looking good! We now have a simple, clean single post template that can be used on our website.
Displaying the single post template
The final step in the process is displaying our single post template on our blog posts. Follow the steps below to do this:
- Click the little arrow next to the green Publish button
- Click Display Conditions
- Make sure that Include is set to Posts and All
- Click Save and Close
- Click Publish
Your new Elementor single post template should now be displaying on all of your blog posts. Open up a blog post to check it’s working correctly, if not double check that you have followed the above steps.
If you are interested in further customising your Elementor post experience, you may be interested in our Elementor Infinite Scroll extension, which will allow you to enable infinite scrolling for your blog.