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 new Theme Builder. It allows user to create a beautiful website without much effort. Using Theme Builder, user can create custom section in the website. Like, custom header and footer section, custom search result page and more. All without writing a single line of code. Furthermore, user 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 new Divi theme, we have 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 post template. Before we move on to the steps to create a custom post template, 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 blog post templates that are suitable for any business or niche.

This step by step article is to help you create an amazing blog post template of your own. However, you can also have this custom post template 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 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.

Add New Template in Theme Builder Library

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

Choosing All Posts from template settings

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

Choosing Build Custom Body

Inside custom body, choose “Build From Scratch.”

Build custom blog post template from scratch

Creating featured image for custom blog post template

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

Close insert row

Then move to the section settings.

Inside sections settings, head to the Background settings. Choose 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 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 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.

Post Title for featured image

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

Post Title Text Settings

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 phone to -64px.

Save Changes.

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

Post title for meta description disable function

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 healthy gap in between pot content and featured image.

Add new row > divider module > disable show divider.

Then add a new row and insert 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 mobile icon for Text Line height, Desktop: 1.8em, and 1.7em for Tablet and Phone.

Post Content text settings in Divi 4

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 custom blog post template

After customizing post content area, insert post navigation module.

post navigation module for custom blog post template

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 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 blurb module.

Blurb module for custom blog post

In content setting, customize blurb as follows.

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

For 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 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

Custom Blog Post author image shadow

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 opt-in form in 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 subscribers list for email marketing campaign.  Likewise above steps, add a new row. And then insert a opt-in module.

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

Further, in 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 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 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 blog archive with ease.

Therefore, to achieve our related post section, add a new row and insert text module. Write some text in body and then move to the design tab and customize 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 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. Also, you can download this post template by joining our newsletter. However, you can also try our premium blog post template plugin or Grace- Divi Blog Post Layout Pack for more beautiful blog posts.

Divi 4 header footer pack

Fill up your details to download the file

Please check your email for the download link.