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.
Here’s how Divi blog posts template will look like.
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.
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.
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.
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.”
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.
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.
4. Build From Scratch
Navigate to the “Build from Scratch” box and click on the “Start Building” button.
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.
6. Create a New Row
We are going to create a new row for creating a post title module.
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.
8. Post Title Module Settings
Set Post Title Text Color to Light and Text Alignment to Center
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.
9. Create a New Section for Post Content
Click on + icon and create a new regular section.
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.
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.
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.
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)
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
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.
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.
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.
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 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.
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 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.
Scroll to the fields option and activate Use Single Name Field.
Navigate to the Design tab and set “layout” to Body on Top, Form on Bottom.
Navigate to the text option and set the text alignment to center.
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.
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.
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 face any trouble you can ask me in the comments section below and I will be very excited to help you. 🙂
If you liked this article, please share it with your friends and subscribe to my mailing list below to get the latest WordPress tips, tricks and how-to tutorials directly into your inbox.
You May Also Like…
Sharing is caring 🙂
Please share this article to spread the word.