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.
It used to be a pain to edit this template, 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 using different filters and categories. In this guide I will show you how to create a custom 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 880by typing that number into the number entry box just below Content Width.
So that our single post 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):
- 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 even so now would be a good time to save our progress by saving the single post 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 paperclip 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 single post template, commonly referred to as a section or row. Now it’s time to style the inner container of our 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). The outer container is using a background colour, so to make the content visible, we’re going to set a white background for the 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 single post 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 single post 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 single post 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. This can be set from Content and is the option above Alignment.
Now we’re going to add some meta data to our single post template. 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 body of our single post template, which is where the actual content will display. 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 stylinghere.
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 body of the single post template 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 work! 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
This is one thing every single post template should have. It’s 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 this 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 new section. 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 fitting. 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. There is a query setting which can be accessed by editing the Post element to determine what specific content shows up here.
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 section we just created.
Let’s also add another divider first, duplicate the existing divider then drag it down so that it sits beneath related posts.
Next 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 single post template should now be displaying on all of your blog posts. Open one up 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 single post experience, you may be interested in our Elementor Infinite Scroll extension, which allows you to enable infinite scrolling on your blog replacing the built in pagination.
