How To Create Custom Elementor Blog Post Template (Easiest Method)

How To Create Custom Elementor Blog Post Template

Blogs are one of the most popular and effective ways to create awareness about your product. However, if you want to enjoy the most benefit out of content marketing, you need to make sure your blog page has a captivating look along with the right information.

To make your blog post appealing, you need to create your own custom blog template. And you can achieve an outstanding blog post template to engage your audience using Elementor. You can create an Elementor custom blog page from scratch as well as build one using prebuilt templates.

In this article, you will learn how to create custom Elementor blog post template using two methods in the simplest ways possible. So, keep reading…

What Are Custom Blog Post Templates?

Custom blog post templates are pre-designed layouts created to enhance the visual appearance and structure of single blog posts on a website. Instead of using default templates, you can customize the design of your blog posts. It’ll provide a consistent and unique look to your entire website. 


For example, you can utilize Elementor and add-ons e.g. ElemenstKit in WordPress to create a custom blog post template. An Elementor single post template may include a specific arrangement of text, images, headers, buttons, and other elements. It’ll be a piece of cake for the drag-and-drop feature of Elementor maintaining a cohesive look across various blog posts.

Why You Need To Design Your Custom Elementor Blog Post Template

Adding Elementor blog post templates not only enhances the aesthetic appeal of your content. It also plays a crucial role in establishing a unique brand identity. 

Before jumping on the tutorial for how to create single post templates in elementor, let’s explore the significance of designing custom Elementor blog post templates. 

✨ Unique Branding

Designing a custom Elementor blog post template allows you to incorporate unique brand elements.  You can add colors, logos, and typography, creating a consistent visual identity for your content.

For example, you can use your brand’s signature color scheme and logo placement within the template to reinforce brand recognition.

👌Professional Appearance

Elementor Custom templates contribute to a more professional appearance for your blog posts. Thoughtful design elements can enhance aesthetics and make your content visually appealing to readers.

For this, you should opt for a clean and modern design with well-chosen fonts and imagery to give a professional look for your elementor single post template.

🚀 Improved User Experience

A well-designed Elementor template enhances the overall user experience. How? 

Well, a custom elementor article template provides consistency in layout and design. It also makes navigation and content consumption more intuitive.

To do so, you need to ensure clear headings, organized content, and easy navigation within the template to improve the overall reading experience for your audience.

🤩 Adaptability for Different Content Types

Custom Elementor blog post templates offer flexibility as well as allow you to adapt the design based on the type of content you’re presenting.

You need to design single post templates in elementor that can accommodate various content formats. For example, you can design an elementor blog page with pre-designed visually rich layouts,  multimedia posts, or a well-structured format for long-form articles.

⏰ Time Efficiency

Custom templates save time, especially for frequent content creators. They can easily create, and edit a blog page in wordpress with Elementor, maintaining a polished look without starting from scratch.

Also, you can make them reusable templates including your preferred formatting, styling, and structural elements.

Plugins you need to install to create custom Elementor blog post template

To create a custom blog post in WordPress with Elementor page builder effortlessly you will need:

ElementsKit gif

How To Create Custom Elementor Blog Post Template: Step-by-step Guide

Elementor Pro provides all the necessary widgets you will need to create a stunning custom blog post template from scratch. Just follow the below-mentioned steps on how to add a blog post in wordpress with elementor.🤩

Step 1: Create a new Single Blog Template

First, you need to create a single blog template using Elementor. For that go to WordPress Dashboard and then navigate to Templates ⇒ Add New 

how to Add new template in Elementor

Next, click on the Add New button. Once the new window opens, select Single Post as the type of template from the dropdown, provide a name of your choice then click on Create Template.

Create Elementor Blog Post Template

Now you should see the premade layouts (will cover how to use that later). Since we are going to build an Elementor blog template from scratch, click on the cross button on the top right corner to close this window.

Step 2:  Select a structure/layout for the blog post template  

Now, you need to choose a structure for your blog template, it’s recommended not to use the whole width of a page as it gets hard for the user to read it.

To choose a structure for your custom blog page template in Elementor, click on the + icon select the one you like and just click on the structure to insert it.

Select a structure for custom  Elementor blog posts

Note: To see how a blog will look with the template you are creating, select an existing blog from the preview dynamic content option. To set that, click on the Settings option at the bottom left corner.

Then, choose Post from the Preview Dynamic Content as a dropdown, and type the name of the blog you want to select on the second dropdown below. Finally, click on Apply & Preview.

set blog to see-preview while-create-custom Elementor blog post

Step 3: Add Featured Image widget and customize Image style options

Once you have the layout, on the left editor bar, search for the Featured Image widget. After you find the widget, drag and drop it into the desired location.

Drag and drop featured image of elementor blog post

After the widget loads, customize the image size, alignment, caption, link, and lightbox option.

Content settings of featured image widget of Elementor

To change the style settings, navigate to the Style tab. Here you can change image height, width, opacity, border, radius, etc.

Style settings of Elementor features image widget

👉👉 You can also checkout our blog on How to Build a Mega Menu With Elementor

Step 4: Add and customize the Elementor Blog Post Info widget

After the feature image, you should display the post-related information which you can do with the Post Info widget. Just like the featured image, at first search for the Post Info widget then simply drag and drop below the Featured Image widget.

drag and drop post info

On the Elementor Editor Content tab, you can set the layout as Default or Inline. You can edit/delete the Author, Date, Time, and Comments Options. You can also add a custom field to the Post Info widget by clicking on the + ADD NEW button.

post info Elementor widget settings

Again, move on to the Style tab to customize the style settings like Space between lists, alignment, Icon color and Size, Text color, and typography.  

Post info Elementor widget style settings

Step 5: Drag and drop Post Title widget and customize 

Now, search for the Post Title widget and drag and drop below the blog post info widget.

drag and drop post title

You can customize the size, HTML tag, and alignment of the Post Title tag.

post title content Settings custom Elementor blog post

On the style tab, you will find options to customize Text Color, Typography, Text Stroke, Text Shadow, and Blend Mode.

elementor post title style settings

Step 6: Add and customize the Post Content widget

Now, drag and drop the post content widget. The blog post content widget of ElementsKit represents the body (main content) of the blog post.

drag and drop post content

Step 7: Drag and drop the Social Icons widget to add a social share option

After the post content, add the Social Icons widget by dragging and dropping. Social Icons will provide options to share your blog on different social platforms.

You can add /delete as many social icons as you want. In addition, you can customize the shape of the icons, the number of columns they should show up, and alignment. You can also customize the Social Platform Icon, color, and link for each of the social icons.

Elementor social icons widget settings

Navigate to the Style tab to change the Icon size, color, padding, spacing, and border type.

Elementor Social Icons settings style settings

Step 8: Add Author Box widget and customize the settings of the widget

Search for the Author Box, and drag and drop the widget after the Social Icons. You can also add a custom Author if you want from the source dropdown. You can choose to show/hide Profile pictures, display names, and Biography. You can also customize other settings such as HTML tag, Link, Layout, and Alignment.

Elementor author box widget

Navigate to the Style tab to customize options such as Image size, border, color, and typography of author name, biography, etc.

Elementor author box widget style settings

Step 9: Add a Post Navigation widget for the pagination option

Elementor Post Navigation widget will offer navigation options to readers so they can switch to different blogs. To add the post navigation widget, like before search on the editor and then drag and drop after the author box widget.

You can either show or hide the pagination label or arrow sign. You get around 8+ design options for arrows. You can also customize the previous and next-level text.

Elementor post pagination widget custom blog page elementor

You can change the color and typography of the label, title, arrow, and borders for both normal and hover views.

Elementor custom blog template post pagination widget style settings

Step 10: Drag and drop Posts widget to display related posts

To showcase the related posts, we are going to use the Elementor Posts widget. So, drag and drop the posts widget after the post navigation widget.  With this widget, you can change the skin color, set the number of columns, number of posts per page, image position, and many more settings. You can also change the different layout styles, box, image, and content.

Elementor post widgets settings Elementor custom blog post

Step 11: Add Post Comments widget

To give an option to your users to comment on your posts, you need to add the Posts Comments Widgets. Search for the Posts Comments widget and drag and drop below the blog Posts widget.

Elementor post comment widget custom blog page elementor, Elementor blog template
ElementsKit gif

Step 12: Update and See the Elementor custom blog page template

Now that all the design is done, click on the update button. If the publishing setting window shows up, click on Save and Close.

Here is the preview of the custom Elementor blog template we just created.

Preview custom elementor blog post template

If you found the method described above too time-consuming, you can opt for the method mentioned below where you don’t have to build and design each section from scratch to build your Elementor blog template.

👉👉 You can also check our blog on How To Add Multi Step Form In Elementor In 5 Easy Steps

How to create the single post page using the premade Elementor blog template

If you plan to use a pre-built template for your Elementor custom blog page, you can do it in just 3 steps. Let’s check how:

Step 1:  Create a new Single Blog Post Template from the dashboard

Like the first method, you need to create a new single blog template. For more details on how to create the new template scroll up a little and check the first step of the first method (how to build a blog template from scratch).

Create Elementor Blog Post Template custom blog page elementor

Step 2:  Choose a premade Elementor Single Post template

Once you click on Create Template, you will see the Elementor library window with many custom single post templates. Here you can choose any of the Single post blocks you like. Hover on the template of your preference, and click on insert.

Insert premade blog post templates

Step 3:  Choose a premade Elementor Single Post template

Once the template loads, click on the publish button to save all new blog templates.

Here is a final look at a blog post using an Elementor blog post using a premade single post template.

Elementor blog post with premade template

👉👉 You can also checkout How to Add Multi Currency Switcher to Elementor WooCommerce Website

How to create an Elementor latest posts page with ElementsKit

Now that you have an attractive single blog post template, it’s time to make a custom blog listing page so all your blogs are displayed in an eye-soothing and user-friendly way.  Let’s have a look at how you can create a custom Elementor’s latest posts with ElementsKit.

Step 1: Install and Activate ElementsKit

To create a stunning blog listing page, along with Elementor page builder, you will need ElementsKit. ElementsKit is an all-in-one plugin for Elementor with 85+ widgets and modules to make web development easier than ever.

install and activate ElementsKit all in on addon for Elementor

Step 2: Enable Posts List related Widget

Once activated you need to turn on the post-related widget to build the post list page. ElementsKit provides several widgets to display your blog lists which include Blog Posts, Post Grids, Post Lists, Post tab widgets, etc.  You can enable the widget you want to use.

Enable post related widgets of ElementsKit to build Elementor blog template

👉👉 Check out how can create a beautiful Elementor one-page scroll navigation using ElementsKit

Step 3: Add the widget and customize

Now, go to the blog list page, search for the widget, and simply drag and drop. Once the widget loads, you can customize the related settings to personalize your blog list page. 

Let’s have a look at what a blog list page will look like with a few of the ElementsKit widgets and their customization options.

Blog Posts: 

Using the Blog Post widget, you can display your blogs in Block format, Grid with thumb, and Grid without thumb design. You can also set the number of posts to show per row, enable/disable pagination, and many more options. For more details check out our blog on how to display recent blog posts.

Elementor latest posts with ElementsKit

Post Grid:

With the post grid plugin, you can customize which category blogs you want to display in your blog list. You can also choose the number of posts to display and the column numbers each row should have. For more details, check our documentation.

Post grid settings elementor latest posts

Post Tab:

With a Post Tab widget, you get all the customization options like Post Grid along with an extra category tab. With this option, users can just hover on any category tab and see only the blogs from that particular category.

Post tab widget settings custom blog page elementor latest posts

Once you choose your widget and customize it according to your choice, click on the update button to publish.  Now you should have a page that enticingly displays Elementor’s latest posts.

FAQs

How to create a blog page in WordPress with Elementor (free)?

In WordPress, you can use Elementor (free version) to create a blog page. After installing Elementor Free, navigate to Pages > Add New, and then select “Edit with Elementor.” Design the page layout using Elementor’s drag-and-drop editor, adding blog elements as needed.

How to edit a blog page with Elementor?

To edit a blog page with Elementor, go to the WordPress dashboard, navigate to Pages > All Pages, find your blog page, and click “Edit with Elementor.” Use the Elementor editor to make changes to the layout, content, and styling.

What is the best Elementor add-on to design a custom blog post template?

ElementKit add-on is the complete solution for designing a custom blog post template in Elementor. It provides exclusive widgets and smooth drag-and-drop features to enhance the design and functionality of your custom blog posts.

ElementsKit gif

Conclusion: Create Custom Elementor Blog Post Template

We have tried our best to provide you with an easy tutorial on how to create custom Elementor blog post templates. We hope you found the blog helpful in building your custom blog template on the WordPress site. You can follow the steps and change the layouts as well as designs according to your choice.

And don’t forget to give an extraordinary touch to your blog list page with ElementsKit widgets. ElementsKit is the perfect complement to Elementor, do make time to check out all the amazing widgets this addon has to offer.

Comments

  1. Sarah Higgins Avatar
    Sarah Higgins

    Thanks for this article.

Leave a Reply

Your email address will not be published. Required fields are marked *