How to create custom Divi blog post template

Note: This post was first published in Dec 2019, and has been updated for accuracy and comprehensiveness.

Divi 4 has brought many amazing features, one of those is the new Theme Builder. It allows the user to create a beautiful website without much effort. Using the Theme Builder, users can create a custom section on the website. Like, custom header and footer section, a custom search result page, and more. All without writing a single line of code. Furthermore, users have the ability to apply each custom section to their desired page. And to achieve that they have to set each section as custom or global in the Theme Builder library. That is to say, with the new Divi theme, we have the freedom to design.

And if you’re wondering how to create a blog post template with the Divi builder. Then, in this blog post, we’re going to discuss the topic, how you can create a beautiful custom Divi blog post template. Before we move on to the steps to create a custom Divi single post layout, I would like to introduce you to our Grace- Divi Blog Post Layout Pack that you can use with the same Divi 4 feature. It includes multiple stylish Divi article layouts that are suitable for any business or niche.

This step by step article is to help you create an amazing Divi blog post template of your own. However, you can also have this custom single post layout by joining our newsletter. And if you want to create more beautiful blog posts fast and easy, then you may want to check out our premium Divi blog post template plugin.

Adding a new template for custom blog post template inside Theme Builder

Step 1:

Head to the Divi Theme Builder.

Then inside Theme Builder add new template.

Inside template settings, head over to the posts, and choose “All Posts”

After creating a template, click on the “Add custom body,” then choose “Build Custom Body.”

Inside the custom body, choose “Build From Scratch.”

Creating a featured image for a custom blog post template

First, don’t select the insert row section because we’ll do some edits to the regular sections.

Then move to the section settings.

Inside sections settings, head to the Background settings. Choose an image and then click on the “Use Dynamic Content,” then use choose featured image. In this way, we’re giving Divi theme direction to fetch featured image from the blog post.

After doing this head to the design tab. Choose sizing and then height. First, click on the mobile icon to give a custom size for all the devices.

Desktop: 50vw;

Table: 50vw;

Phone: 60vw.

After this save changes.

Add Title, category, and meta to the Divi custom blog post template

For category,

Add a new row, then insert the Post Title module.

Go to elements, and disable “Show title, author, date, comments and featured image.”

After this, navigate to the design tab and select “Meta Text,”

Set Meta Font: Nunito

Font weight: Ultra Bold

Meta Text Alignment: Center

Text Color: #8300E9

Check “Mobile Icon” for Meta Text size, Desktop: 30px; Tablet: 28px; Phone: 26px.

Save changes.

For Post Title-

Add a new row and post title module. Go to elements and disable: Show Meta and Featured Image.

Then navigate to the design tab and in the text menu, choose text as “Light.” Further, set text alignment to center.

Similarly, move to the Title Text menu, and customize settings as follows.

Heading Level: H1

Title Font: Montserrat

Font weight: Heavy

Title Text Alignment: Center

Check “Mobile Icon” for Title Text Size, Desktop: 70px; Tablet: 45px; Phone: 30px.

Similarly, Title Letter Spacing, Desktop: 16px; Tablet: 4px; Phone: 2px.

Title Line Height, Desktop: 1.3em; Phone: 1.2em.

After doing this, move to the Spacing menu, and set Top Margin for the phone to -64px.

Save Changes.

Add another row and post title module. Go to elements and disable Show Title, Post Categories, and Featured Image.

Further, move to the design tab and go to Meta Text. And set fields as follows.

Meta Font: Nunito

Font weight: Ultra Bold

Meta Text Alignment: Center

Text Color: #8300E9

Check mobile icon for Meta Text Size, Desktop: 30px, Table: 20px; Phone: 16px.

Similarly, Meta Letter Spacing, Desktop: 2px; Phone: 1px.

After doing this, move to the Spacing menu, and set Top Margin for Tablet to 23px, and for Phone set it to -10px.

Save Changes.

Adding post content in custom blog post template using Divi’s Theme Builder

Now, before we design our body area of our custom blog post. Add a divider to keep a healthy gap in between pot content and featured image.

Add new row > divider module > disable show divider.

Then add a new row and insert the post content module.

Inside Post Content module settings, navigate to the design tab and then to the image settings.

Set Image Rounded Corners to 10px.

After making this change, further, move to the Text Settings, and apply customizations as follows.

For Text-

Text Font: Nunito

Font Weight: Regular

Text Text Alignment: Left

Check mobile icon for Text Text Size, Desktop: 20px; Tablet 20px; Phone 16px.

Similarly, check the mobile icon for Text Line height, Desktop: 1.8em, and 1.7em for Tablet and Phone.

For Links- Same settings as the Normal Text. Only change link color to #8300E9.

Now, move to the Heading Text Settings. Follow the below for heading text customization.

H1 Heading Text-

Heading Font: Montserrat

Font Weight: Ultra Bold

Heading Text Size: 30px

H2 Heading Text-

Heading Font: Montserrat

Font Weight: Bold

Heading Text Size: 28px

H3 Heading Text-

Heading Font: Montserrat

Font Weight: Semi Bold

Heading Text Size: 26px

H4 Heading Text-

Heading Font: Montserrat

Font Weight: Semi Bold

Heading Text Size: 24px

H5 Heading Text-

Heading Font: Montserrat

Font Weight: Semi Bold

Heading Text Size: 22px

H6 Heading Text-

Heading Font: Montserrat

Font Weight: Semi Bold

Heading Text Size: Desktop-22px; Phone-18px. 

Save changes.

Add post navigation in the custom blog post template

After customizing the post content area, insert the post navigation module.

Inserting a module is easy, just like opening the cap of a pen. Okay, now inside post navigation text settings, type “Old Post: %title” in Previous Link field, and “New Post: %title” in Next Link field.

Move to the design tab, customize links text as follows.

Links Font: Montserrat

Font weight: Semi Bold

Links Text Color: #8300E9

Save Changes.

Designing author area with Divi Blurb

Add a new row and insert the blurb module.

In the content setting, customize the blurb as follows.

Title: Use Dynamic Content > choose Post Author > then check Link Name as “Yes.”

For the author bio,

Go to Body > Use Dynamic Content > choose Author Bio

Move to Image & Icon settings,

Use Dynamic Content > Author Profile Picture

Now, head over to the Design tab, and customize as follows.

Image & Icon-

Image/Icon Placement: Top

Rounded Corners: 50px for each side.

Image Box Shadow: Look in the screenshot

Title Text-

Title Heading Level: H4

Font: Montserrat

Title Font weight: Bold

Text Alignment: Center

Title Text Color: #8300E9

Title Text Size: 18px

Body Text-

Body Font: Nunito

Font Weight: Regular

Body Text Alignment: Justified

Body Text Color: #000000

Text Size: 14px

Save changes.

Creating an opt-in form in a custom blog post template in Divi 4 Theme Builder

Opt-in forms are crucial for blogs. Therefore, we’re going to add a subscription form, so you can create a subscriber list for the email marketing campaigns.  Likewise, the above steps, add a new row. And then insert an opt-in module.

In the content menu, give your subscription form title. And add some content to the body area if you want to.

Further, in an email account, add your email marketing account like Mailchimp or Salesforce. Then in Fields settings, check “Use Single Name Field” as “Yes”.

Add Success Action if you want to, else move to the Background settings.

Background settings: Background > Choose gradient > set both color to #E8E8E8

Proceed to the design tab. Customize layout settings as follows,

Layout: Body On Top, Form On Bottom

Name Fullwidth: NO

First Name Fullwidth: NO

Last Name Fullwidth: NO

Email Fullwidth: NO

Field settings-

Leave color settings as they are.

Fields Font: Nunito

Font weight: Regular

Text Alignment: Left

Text Size: 14px for each device

Title Text settings-

Title Heading Level: H2

Font: Montserrat

Title Font Weight: Ultra Bold

Text Alignment: Center

Title Text Color: #8300E9

Title Text Size: 30px for each device

Button settings-

Check “Use Custom Styles For Button” as “YES.”

Button Text Size: 20px

Text Color: #8300E9

Button Border Radius: 100px

Button Font: Nunito

Font Weight: Semi Bold

Check “Show Button Icon” to “NO”

In addition to make the opt-in form more beautiful, do some box-shadow customization.

Box Shadow: See screenshot

Box Shadow Vertical Position: 16px

Shadow Blur Strength: 100px

Box Shadow Spread Strength: -30px

Save changes.

Related posts section

Similar posts in an article are something that makes the blog template favorable for the user to see glimpses of some other works by the author, and navigate the blog archive with ease.

Therefore, to achieve our related post section, add a new row and insert text module. Write some text in the body and then move to the design tab and customize the text as follows.

Text Font: Montserrat

Font Weight: Semi Bold

Text Color: #8300E9

Text Text Size: 26px

Save Changes.

Add a new module blog.

In Content settings, customize as follows,

Post Count: 3

Included Categories: Current Category

Excerpt Length: 150

Move to elements settings, and customize as shown in the picture,

In order to make related posts appearance similar to the opt-in form, move to the design tab, and choose Grid layout. After that move to the title text settings, and customize as follows.

Title Heading Level: H2

Title Font: Montserrat

Font Weight: Semi Bold

Title Text Color: #000000

Body Text Settings-

Body Font: Nunito

Font Weight: Regular

Body Text Color: #000000

Body Text Size: 14px

Meta Text Settings-

Meta Font: Nunito

Font Weight: Regular

Meta Text Color: #8300E9

Body Text Size: 14px

Border Settings-

Rounded Corners: 20px

Box Shadow Settings-

Save changes.

Designing comment box for custom Divi blog post template

We have almost done with our custom blog post template. It’s time to get reactions from visiting readers. So, let’s make a comment box.

Likewise, all the other steps, add a new row and insert comment module.

After adding the module, jump ahead to the design tab, and customize fields settings.

Fields Background Color: #E8E8E8

Fields Text Color: #000000

Font: Nunito

Font Weight: Regular

Fields Line Height: 1.3em

Fields Rounded Corners: 10px

Image settings-

Rounded Corners: 50px

Title Text Settings-

Meta Text Settings-

Same settings for the comment text but don’t add color.

Button settings-

Check “Use Custom Styles For Button” as “YES.”

Button Text Size: 20px

Button Text Color: #8300E9

Border Radius: 100px

Button Font: Nunito

Font Weight: Regular

Disable “Show Button Icon”

Button Alignment: Left

Save Changes. And we’re done with our Divi custom blog post template made in Theme Builder.

Final result

For Computer-

For Tablet and Phone versions,

I hope following these step by step instructions, you can create a custom Divi blog post template of your own. However, you can also try our premium blog post template plugin or Grace- Divi Blog Post Layout Pack for more beautiful Divi article layouts.