Are you struggling with inconsistent designs in your web pages?
Or maybe you’re tired of manually creating a page layout for every new post on your blog? If so, then you’re in the right place.
In this step-by-step guide, we’ll guide you through two methods of crafting custom Elementor blog post templates. We will teach you simple steps to create a template from scratch or by using prebuilt templates.
So, roll up your sleeves and fire up your WordPress site. By the end of this guide, you’ll not only have a fantastic blog post template but also the skills and confidence to experiment and create more templates for yourself.
What are custom blog post templates?
Custom blog post templates offer a unique and consistent design for individual blog posts on your website. By moving away from standard templates, you can tailor the look of your blog posts to match your website’s style.
Using Elementor, you can easily craft these templates, adding elements like text, images, headers, and buttons in a layout that suits your brand. The drag-and-drop functionality of Elementor makes it simple to maintain a consistent appearance across your posts.
Why should you make your own custom template?
Creating blog post templates enhances the aesthetic appeal and brand identity of your content. They help you achieve unique branding with tailored colour schemes, logos, and typography that establish a consistent visual identity.
They also give a professional appearance through thoughtful design elements, improving the user experience with clear, organized layouts. These templates are adaptable for different content types, offering flexibility for various formats. Additionally, custom templates save time for frequent content creators by providing reusable, pre-designed layouts for quick and efficient content creation.
Method #1: Use the premade Elementor blog template
To use a pre-built template for your Elementor custom blog page, follow these simple steps:
Step 1: Make a new Single Blog Post Template from the dashboard.
To create a single blog template, start by going to the WordPress Dashboard. From there, navigate to Templates and then select ‘Add New’.
A new window will appear and it will show what kind of template you want to work on. Choose ‘Single Post’ as the template type from the dropdown menu, give it a name of your choice, and then click ‘Create Template’.
This process will lead you to a selection of premade layouts that you can use as a starting point for your custom design.
Step 2: Pick a ready-made Elementor Single Post template.
After clicking “Create Template”, the Elementor library window will appear, displaying a variety of custom single post templates.
You can browse through these and select one that suits your needs. To do this, hover over your preferred template and click “insert” to begin customizing it for your blog.
Step 3: Don’t forget to click Save.
After the template is loaded, click the “Publish” button. This action will save the new blog template you’ve created, making it ready for use in your blog posts.
Method #2: Create a custom post template from scratch
Step 1: Create a new Single Blog Template
To create a single blog template using Elementor, first go to the WordPress Dashboard, then navigate to Templates and select ‘Add New’.
Click on ‘Add New’, and in the new window that opens, select ‘Single Post’ from the dropdown. Name your template and click ‘Create Template’. You’ll then see premade layouts.
Since you’re building a template from scratch, close this window by clicking the cross button in the top right corner. This action takes you to a blank canvas where you can start designing your blog template.
Step 2: Pick a layout for your blog post template.
Choose a structure that doesn’t span the entire page width for better readability. Click the ‘+’ icon in Elementor, select a preferred structure, and click to insert it.
If you want to see how your preferred structure would look, go to Settings in the bottom left corner. Select ‘Post’ from ‘Preview Dynamic Content’, search for a blog in the second dropdown, and click ‘Apply & Preview’ to see how the blog looks with your template.
Step 3: Add a Featured Image widget and edit the image style.
Use the search bar on the left to find the Featured Image widget. Drag and drop it into your layout.
After it loads, you can customize it by adjusting the image size, alignment, caption, link, and whether or not to use a lightbox. This customization enhances the visual appeal and functionality of your blog post template.
Step 4: Drop in the Post Info widget and tweak it to fit your style.
After adding the featured image, use the Post Info widget in Elementor to display post-related information like the author, date, time, and comments. Type it in the search bar and drag this widget below the Featured Image widget.
- In the Editor Content tab, you can choose the layout (Default or Inline), edit or delete various elements, and even add custom fields.
- In the Style tab, customize aspects like spacing, alignment, icon colour and size, text colour, and typography to tailor the look to your blog’s design.
Step 5: Drag in the Post Title widget and have fun customizing it.
Next, search the Post Title widget in the search bar and add it below the blog post info widget.
This widget allows customization of the title’s size, HTML tag, and alignment.
In the Style tab, you can further tailor the appearance of the post title with options to adjust text colour, typography, text stroke, shadow, and blend mode, enhancing the visual appeal of your blog post.
Step 6: Add the Post Content widget and make it your own.
Finally, search for the Post Content widget and add it to your layout. This widget represents the main body of your blog post, displaying the actual content of the post.
Drag and drop it into the desired location in your template to include the body text of your blog posts.
Step 7: Drag over the Social Icons widget to let your readers share your post.
Add the Social Icons widget to enable the sharing of your blog on various social platforms. This feature enhances the engagement and reach of your blog posts. You can type ‘Social Icons’ in the search bar and then drag the widget.
You can add or remove icons as needed and customize their shape, layout, and alignment. For each social platform icon, you can modify its colour and link.
In the Style tab, adjust the icon size, colour, padding, spacing, and border type to match your blog’s design.
Step 8: Add an Author Box widget and adjust the settings.
After the Social Icons, type Author Box in the search bar then drag the widget. This widget can be customized to display the author’s profile picture, name, and biography. This addition provides a personal touch to each blog post, connecting the content with its author.
You have the option to choose a custom author from the source dropdown. Customize settings like HTML tag, link, layout, and alignment.
In the Style tab, tailor the appearance with options for image size, border, colour, and typography for the author’s name and biography.
Step 9: Include a Post Navigation widget for better user experience.
To offer easy navigation between blog posts, add the Elementor Post Navigation widget using the search bar. This feature enhances user experience by providing straightforward navigation through your blog content.
This widget offers options to show or hide pagination labels or arrow signs, with various arrow designs available. Customize the text for ‘previous’ and ‘next’ labels, and adjust the colour and typography for these elements in both normal and hover states.
Step 10: Show off related posts by dragging in the Posts widget.
To showcase related posts, use the Elementor Posts widget, which you can drag and drop after typing ‘Posts’ in the search bar. This widget allows you to alter the skin colour, set the number of columns and posts per page, choose image position, and modify various other settings. You also have options to change layout styles for the box, image, and content, enhancing the presentation of related posts on your blog.
Step 11: Add a Post Comments widget to engage with your audience
To enable user engagement through comments on your blog posts, look for the Posts Comments widget in Elementor in the search bar then dragging the widget.
Find this widget and place it below the blog Posts widget.
This will give your readers the ability to comment on your posts, fostering interaction and community engagement on your blog.
Step 12: Update and take a look at your custom Elementor blog page template!
Once you’ve completed your design in Elementor, click the “update” button to save your work. If a publishing settings window appears, select “Save and Close.”
You can then preview your custom blog template to see how it will appear to your readers.
Now you can create your own custom templates easily
Congratulations! You’ve successfully learned the comprehensive process of crafting a blog post template with Elementor. This blog has equipped you with the skills to create a template that is not only visually appealing but also user-friendly. Elementor’s flexibility allows for endless creativity — you can experiment with various layouts, colours, fonts, and personal touches.
But if creating custom templates feels like too much work, don’t worry, we can help! If you don’t have time to design your own templates, we offer website support services. We can create custom, attractive templates for your blog, saving you time and effort you can use for more important things. Reach out to us for help with your website needs, and keep focusing on what you love. Contact us today to get started!
