Introduction
In this template tutorial, we are going to learn how to create a basic single post template and how to use this new post template to display all your blog posts. Blog posts are important for a website because they offer a variety of benefits that help improve the website’s performance and drive more traffic.
Blog posts can improve the website’s search engine optimization (SEO) by providing fresh and relevant content that attracts search engine crawlers. They also help establish the website’s authority and credibility in its niche by providing valuable information to readers. Blog posts also offer opportunities to engage with the audience and build a community around the website.
By regularly publishing new content, a website can keep visitors coming back and increase the likelihood of conversion. So let’s get started!
Requirements
For the header template we are building, you will need the following:
Elementor templates are created using the Elementor Theme Builder which is part of the plugin’s Pro version. Without Elementor Pro this tutorial will not work! You can find an alternative solution to create a single post template without the Pro version in this tutorial.
Creating The Basic Single Post Template
Let’s start creating our basic single post template using the Elementor Theme Builder. You can access the theme builder in your WordPress dashboard under Templates, Theme Builder. Inside the theme builder, select “SINGLE POST” and then “ADD NEW”. I named the template “Basic Single Post Template” but you can choose any name you like. Then click “Create Template”.
When the Elementor Page Builder has loaded, the library screen will display. You can find and use any of the pre-made single post templates provided by the Elementor team. However, for this template tutorial, we’ll create our own and you can just close the library screen.
Creating the main section:
The first step will be to create a single section in which we will add the various elements that will determine how your blog posts will appear on your website. Click on the plus icon and then select a single section from the section layout options.
Now that the section is created, we can determine its size and how it will look. The section settings have 3 tabs: Layout, Style and Advanced. Let’s start in the layout tab.
The Layout tab gives us the options to determine the Content Width, Columns Gap ( space between columns ), the Height of the section, the Vertical alignment of the section and the Overflow. It also has the option to “Force” the section to become full width by selecting ” Stretch Section “.
For this tutorial we are going to set the content width to ” Boxed ” and make the width ” 800 px”. The other settings in the layout tab can remain on default.
Note: In general, a content width of 800 pixels is considered to be a good starting point for a blog post. This allows for comfortable reading without having to scan across a wide screen.
In the Style tab, you will find the settings to adjust the background of your section. You can choose a single colour, create a gradient background colour, add an image or video background or even a slideshow background.
You can add an overlay to the section, create a border or a shape divider and determine the typography of the content within the section.
However, for this tutorial we are going to leave these options as default because the styling of our elements is already determined by the website’s Global settings.
The final step for this section will be the Advanced tab. Here we can add some padding to the section to make it look a bit better on the page. To add padding, click the link icon on the left of the padding value boxes to ” un-link ” the values and then add 70px to the top value and 70px to the bottom value.
That completes the main section for the Single Post Template and the result should look a little like this.
Adding the single post elements:
There are ten elements that will help you create a stunning single post template for your blog posts. Each of the elements adds certain capabilities to your template. Let’s have a look!
The Post Title element is a dynamic widget that displays the title of a post or page, with various customization options.
The Post Excerpt Element allows you to display a short summary of your blog post in a visually appealing way.
The Post Content element allows you to easily display dynamic blog post content on your Single Post Template.
The Featured Image element is a dynamic widget that allows you to display the featured images in your post and page templates.
The Table of Contents Element creates a navigation menu for long posts, making it easy to find and jump to specific sections or topics.
The Author Box Element is a customizable widget that allows you to display information about the author of a post or page.
The Post Comments Element is a tool that enables users to display comments on their blog posts in a visually appealing manner.
The Post Navigation Element allows easy navigation between posts on your website, improving user experience and engagement.
The Post Info Element displays the author, date, and category information of a post in a customizable way for WordPress websites.
The Progress Tracker Element is a visually appealing feature to display progress of reading / scrolling in single post design.
The first element we are going to add is the featured image element. This will dynamically display the featured image you assign to your blog posts. We’ll leave the default image size setting to 1024 x 1024. You can add a border or border-radius in the style tab of the featured image element, but for this tutorial, we will leave it to default.
The next element we are going to add is the post info element. This element loads 4 items by default: Author, Date, Time and Comments. We are going to delete the “time item ” from this list and make one change in the content tab, namely change the Author icon to Avatar and set the size to 20.
In the style tab, we will change the icon size and colour while leaving the other settings to default. Since in this tutorial we are using a dark background, the icon colour is set to white ( you can choose the highlight colour that matches your brand ). The icon size is set to 20
The next element we are going to add is the post title element. This element will dynamically display your blog post title in the single post template. In the content tab it’s important to verify the “HTML tag ” is set to H1. You can change the font size and colour in the style tab. however in this tutorial we don’t need to make changes there because the style is being taken from the global settings.
The next element we will add is the table of contents element. This element will index and add easy navigation through your blog post content that will improve your reader’s experience. The widget will automatically create a hierarchical order of the inner title tags you used in your article.
In the content tab of the table of contents element, you will be able to select which title tags to include in the navigation, Select the title HTML tag and set the marker view to either numbered or bullet points. for this tutorial, we will leave all title tags active, leave the default H4 HTML tag and select bullets as marker.
In the additional options, you will find more customization options but for this tutorial we will leave the default settings active and move on to style this element.
The style tab is divided into three sections: Box, Title and List. Here we can style every aspect of the table of contents element individually. Let’s start with the box settings.
Here you can change the background colour of the entire box, the border colour and the loader colour. You can also set the border width and border radius and determine the padding and height of the box. For this tutorial, I don’t need to change anything but you might want to tweak these settings to match your design.
In the header settings, we can determine the background and text colour of the header. For this tutorial, I changed the font to my secondary global font with a size of 16px. I also changed the icon colour to my site’s highlight colour.
For the list settings, I applied two changes. The first change is setting the font to the global ” text ” font setting and the second change is the marker colour which is also set to the global highlight colour.
The next element we’re going to add to the single post template is the post content element. Normally there shouldn’t be to much changes to make here as the default settings will apply your global site settings or your customized styling for all the content of your blog posts.
However the element does allow you to change the content alignment, text colour and typography if you so wish.
In this tutorial, we won’t have the need to make any changes and we can just move on to adding the next element to our single post template.
Now that we finished adding all blog content-related elements, we will add to more elements to our single post template that will help improve your visitor’s experience and interaction with your website and blog articles.
First, we’ll add the post navigation element, which will allow the reader to easily navigate to the previous or next article on your site.
Having post navigation in your blog posts can provide numerous benefits to your readers and ultimately to your website. By adding next and previous post links, readers can easily find and navigate through your content, increasing engagement and reducing bounce rates.
It can also improve the user experience, making it easier for them to find related content and stay on your website longer. Additionally, it can enhance the SEO of your website, as search engines use internal links to determine the relevancy and importance of your content, which can improve your search engine rankings.
In the content settings of the post navigation element, we can determine which of the options will be active and displayed on your single post template.
The label allows you to name your navigation. You can leave it on the default ” previous ” and ” Next ” or change it to match your site’s content. For example, a cooking blog can name the labels ” Previous Recipe ” and Next Recipe “. You can also use it to translate the navigation name to a different language.
When you have the “arrows ” option active, you can choose between different icons for your navigation.
You can activate the ” post title ” option to inform your readers about which post they are going to.
The last option is borders, which adds a separator between the previous and next sections of the element.
In the style tab, you can change the text colour and typography for the labels and the titles. I have left them as default, as it takes the global typography and colour settings of the site.
The arrow icon can be changed in colour and size and you can determine the spacing between the icon and the content. I have added my Primary highlight colour and left the rest as the default.
For the border styling I used the same settings as the arrow icon and only changed the colour to the primary site highlight colour and the rest as default.
The last element we’ll be adding to the single post template is the post comments element. It needs to be said that Elementor has neglected this element and there are virtually no styling options available as it takes the ” theme comments skin ” as the general style without options to change it.
However, you can style this widget using custom CSS or an additional plugin like ” OoohBoi Steroids for Elementor “
Some themes, like Astra, OceanWP,… also allow you to style this element using the customizer by going to
WP Dashboard -> Appearance -> Customize
But in this tutorial, we are using the Hello Elementor Theme and this option isn’t available.
Conclusion
That’s all for this tutorial on how to create a basic single post template. I hope you have enjoyed it. You can find other tutorials on “basic templates” on my blog.
For the next step, I would recommend “How To Create A Basic Post Archive Template”.
Thanks for reading this tutorial and see you next time!
Download This Template
You can download the template that was just created in this tutorial ” free of charge ” and use it on your website.
The template is in JSON format and can be uploaded to your templates in Elementor Pro.
For more information, head over to the download page.
