Holiday Deals are Here!

UP TO

35%

Discounts

Ending in:

Get Yours Now!
wpmet-website-logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • GetGenie AI
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
wordpress plugin

How To Create Custom Elementor Blog Post Template (Easy Guide)

Editorial StaffEditorial Staff Updated on: December 13, 2022 Elementor ElementsKit WordPress 7 Min Read
How To Create Custom Elementor Blog Post Template

Are you looking for the easiest tutorial on how to create a 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 Elementor custom blog page from scratch as well as build one using prebuilt templates.

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

Contents hide
Plugins you need to install to create custom Elementor blog post template
How to create Elementor custom blog page Template from scratch
How to create the single post page using premade Elementor blog template
How to create a Elementor latest posts page with ElementsKit
Final Words

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

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

  • Elementor (Free)
  • and Elementor Pro.
ElementsKit gif

How to create Elementor custom blog page Template from scratch

Elementor Pro provides all the necessary widgets you will need to create a stunning custom  blog post template from absolute scratch. Just follow the below-mentioned steps to create your single Elementor post template:

Step 1: Create a new Single Blog Template

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

how to Add new template in Elementor

and click on the Add New button. Once the new window open, 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 a 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 Elementor custom blog page template click on the + icon and 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, 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 on 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 Elementor 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 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 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. 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, border type.

Elementor Social Icons settings style settings

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

Search for 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 Picture, display name, and Biography. You can also customize other settings such as HTML tag, Link, Layout, 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 Post Navigation widget for 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 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 styles of layout, 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 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 checkout our blog on How To Add Multi Step Form In Elementor In 5 Easy Steps

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

If you plan to use an 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, click on insert.

Insert premade blog post templates

Step 3:  Choose a premade Elementor Single Post template

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

Here is a final look of 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 a Elementor latest posts page with ElementsKit

Now that you have an attractive single 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 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
Get ElementsKit Now

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 a number of widgets to display your blog lists which includes  Blog Posts, Post Grid, Post List, Post tab widget, 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 make customization according to your choice, click on the update button to publish.  Now you should have a page that displays recent Elementor latest posts in a enticing way.

ElementsKit gif

Final Words

We have tried our best to provide you with an easy tutorial on how to create a custom Elementor blog post template in two ways. We hope you found the blog helpful to build your custom Elementor blog template. 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.

Get ElementsKit Now
  • Share :

How to Remove Malware from WordPress Site

Previous post

ElementsKit Hits Another Milestone: 600K Active Installations

Next post

1 Comments

  • Reply
    Sarah Higgins says:
    December 29, 2022 at 1:32 pm

    Thanks for this article.

Leave a Reply Cancel reply

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

Get Subscribed Today!

wpmet-website-logo
© 2022, Wpmet. All Rights Reserved. Built with ElementsKit.
Elements Kit
ShopEngine
GetGenie AI
Metform
WP Social
Wp Ultimate Review
Wp Fundraising
About us
Contact us
Support
Login/Register
Collaborate
Affiliates
Affiliate Area
Privacy Policy
Terms and Conditions
Refund Policy
Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT