How to Create a Divi Blog Posts Template with Divi Theme Builder

v0 comments pThis post may contain affiliate links, read our disclosure for more info.

Written by Shakeel Anjum
Last updated on Nov 10, 2019

Elegant Themes recently released Divi 4.0, which includes a most-awaiting feature called Theme Builder.

Divi Theme Builder is a game-changer, it lets you create custom headers, footers, and custom body sections for your page(s) or post(s).

You can create a separate header, footer, and body section for each of your pages and posts.

Apart from creating custom headers and footers, another good use of Divi theme builder is to create a Divi blog posts template with Divi Theme Builder.

So today, we are going to create a Divi blog posts template with Divi Theme Builder.

The process is very simple and straight forward, so let’s get started before wasting any time.

Preview

Here’s how Divi blog posts template will look like.

Divi Blog Posts Template Final Preview

Download Divi Blog Posts Template for Free

Download Divi blog posts template for free and save your time instead of building it from scratch.

To access the download link, you need to subscribe to our channel because this content is exclusive to our subscribers.

Subscribe below to unlock the content, and click on the Download button to download your freebie. Cheers. 🙂


Once you download Divi blog posts template file, unzip it and then import the .json file to your Divi theme builder using the portability option.

Import Divi Blog Posts Template using Portability Option in Divi Theme Builder
Import Divi Theme Builder Templates Portability Option in Divi Theme Builder

Requirements

The only requirement is that you should have the latest version of the Divi theme installed.

If you don’t have Divi theme, now is the best time to get it, because the latest version of Divi includes a lot of awesome features including Dynamic Content and Divi Theme Builder.

Let’s get started onto the step by step tutorial.

You don’t have to create anything from scratch if you have already downloaded Divi blog posts template with the above download link and imported it to your Divi theme builder. But, I recommend you to follow the tutorial so you know how to make changes to your Divi blog posts template.

1. Open Theme Builder

If you’ve updated your Divi theme to its latest version, then you should be able to see “Theme Builder” in your Divi menu.

So scroll down to Divi menu and navigate over Divi menu and then click on theme builder.

Click on Theme Builder in Divi Theme

2. Add New Template.

Click on the + icon as shown in the below screenshot and click on it to add a new template in your Divi theme builder.

Click on Add New Template in Divi Theme Builder

Once you click on the + icon which says “Add New Template” a new template settings window will pop up. In this window, navigate to posts section and select “All Posts” and click “Create Template.”

Create an All Posts Template in Divi Theme Builder

3. Add Custom Body

You’ve created a new blog posts template for all your blog posts, but it’s blank, and you need to build it as you want.

We’ll only use a custom body module, and the header and footer will be the same as defined in the global template.

Add Custom Body inside All Posts Template in Divi Theme Builder

Once you click on the “Add Custom Body,” another pop up will appear where you need to click on “Build Custom Body” because we are going to create a custom post body section from scratch.

Click on Build Custom Body inside All Posts Template in Divi Theme Builder

4. Build From Scratch

Navigate to the “Build from Scratch” box and click on the “Start Building” button.

Navigate to Build from Scratch and Click on Start Building Button inside All Posts Template

5. Create a Post Title Section with Gradient Background

We’ll add a gradient background to the section which contains post title and post meta.

Gradient background details are:

Background Color 1: #2b87da

Background Color 2: #29c4a9

Gradient Type: Linear

Start Position: 0%

End Position: 100%

Note: This is the default gradient background, which will be automatically added when you click on “Add Gradient Background” in section settings.

Adding Gradient background to post title section inside Divi Blog Posts Template

6. Create a New Row

We are going to create a new row for creating a post title module.

Create a Row for Post Title Module in Divi Blog Posts Template

7. Add a Post Title Module

Search for the post title module and click on it to add it to the row you just created.

Add a Post Title Module inside the row in Divi Blog Posts Template

8. Post Title Module Settings

Set Post Title Text Color to Light and Text Alignment to Center

Post Title Module Settings for Divi Blog Posts Template

Show/Hide Post Title Elements according to your preference.

In Post Title elements settings, you can show or hide meta elements like author name, publish date, categories, comments count, and featured image according to your preference, or you can hide complete meta if you want.

We will hide the featured image in this example.

Post Title Module Elements Settings

9. Create a New Section for Post Content

Click on + icon and create a new regular section.

Create a New Section for Post Content in Divi Blog Posts Template

10. Add a Row

Once you create a section, another popup will open, which will let you create a row, click on one column layout to create it.

Create a row with one column for Post Content Module in Divi Blog Posts Template

11. Add a Post Content Module

Now another popup will appear, which will let you add a module. Search post content and click on it to add it to your post content section.

Add Post Content Module in Divi Blog Posts Module

12. Set Padding and Box Shadow to Post Content Row

Hover over post content row and click on the gear icon to make some changes to it.

Set Padding and Box Shadow to Post Content Row for Post Content Module

Add Box shadow to post content

Hover over the post content row and click on the gear icon to open settings and scroll down to box-shadow inside the design tab.

Box shadow details.

Box shadow horizontal position: 0px (default)

Box shadow vertical position: 2px (default)

Box shadow blur strength: 18px (default)

Box shadow spread strength: 0px (default)

Shadow Color: (default)

Box Shadow Position: Outer shadow (default)

Add a box shadow for Divi Post Content Module

Add Border

Now scroll to Border section and add following border.

Rounded Corners: 8px

Border Width: 0px

Border Color: Border width is 0px so border color doesn’t matter.

Border Style: Solid

Add a border for Divi Post Content Module

13. Add a New Section and Row for Comment Module

Repeat the same process mentioned in steps 9 and 10 to add a new section and row respectively. We will use these to display our post comments.

Also, use the same box shadow settings from step 10 to add a box-shadow.

14. Add Comments Module

Now, inside your row, click on the + icon and type comments in the search field to quickly locate the comments module and then click on it to add to row.

Add Comment Module for Divi Blog Posts Template

Once you add the comments module, it will automatically display the number of comments title and the actual comments in the boxed style.

15. Add Padding

Because we are using a box-shadow in our row settings, so we also have to add padding, so the comments section looks good.

So hover over the row, which contains comments, and click on the gear icon to open row settings.

Open Row Settings and Add Padding and Box Shadow for Divi Comments Module

Now in the Design tab, scroll to the spacing section and add 40px padding to all sides (top, bottom, left, right).

Adding padding will make our comments section well organized with box-shadow.

Add 40px padding in spacing section for Divi Comments Module

16 – Add Opt-in Box

Create another row below the comments section to create an enticing opt-in box for your readers to subscribe to your mailing list.

Add a New Row

Click on the + icon and add a new one-column row below the comments section.

Add a New Row in Divi Builder

Add Email Opt-in

When you create a new row, it will ask you to add a module to it, so type Opt-in in the search field and click on Email Opt-in to add it.

And this is how your Opt-in box might look like when you add it for the first time.

Add Email Optin Module in Divi Builder

This Opt-in is completely fine if you want to use it, but in this example, we’ll remove text and last name field and put the title above the fields section.

So hover over the Opt-in module and click on the gear icon to open Opt-in settings and make the following changes.

Change the Opt-in module background:

We’ll remove the simple background and add gradient background the same as like post title module we did in step 5.

Change Email Opt-in module background to gradient background in Divi Builder

Change Title and Remove Body Text

Scroll to the Text section and change the title to “Subscribe to Our Newsletter” or anything else you want and remove body text.

Remove Email Opt-in Body Text in Divi Builder

Fields Settings

Scroll to the fields option and activate Use Single Name Field.

Email Optin Module Fields Settings in Divi Builder

Layout Settings

Navigate to the Design tab and set “layout” to Body on Top, Form on Bottom.

Email Optin Module Layout Settings in Divi Builder

Text Alignment

Navigate to the text option and set the text alignment to center.

Email Optin Module Text Alignment Settings

Attach Your Preferred Email Marketing Account

In the content tab of email opt-in settings, navigate to the email account option, and select an email account and list to store your email. You can use MailChimp as your service provider or any other email marketing service provider.

Attach Your Preferred Email Marketing Service Provider Account

Email Opt-in Final Result

So after making changes to the opt-in email module, it should now look like this. And you can easily change the background color or subscribe button color according to your brand color in the email opt-in module settings.

Email Optin Module Final Design in Divi Builder

That’s it.

If you’ve followed this tutorial, then by the end of this tutorial, you should have a basic Divi blog posts template for all of your current and upcoming blog posts along with post title with a gradient background, post content, and comments section in boxed-style layout and an eye-catching email opt-in module.

I hope this article helped you, but if you still face any problem then let me know in the comments section below. And I will be very thrilled to help.

If you liked this article, then please subscribe to my mailing list below to receive the latest WordPress How-to tutorials, tips, tricks, and news directly into your inbox.

Sharing is caring 🙂 

Please share this article to spread the word.

Shares

Master the Art of WordPress

Get exclusive access to how-to WordPress tips, tricks, and tutorials.

Thanks. You have successfully subscribed.

Shakeel Anjum

Master the Art of WordPress

Get free access to exclusive how-to WordPress tips, tricks, and tutorials that I may not publish here because of lack of time but will definitely send them to my awesome subscribers.

Thanks. You have successfully subscribed.

Pin It on Pinterest

Shares