Hello everyone, today we’re going to create a blog post template using the divi theme builder! But before we start, let’s look at what our blog post looks like without our custom blog post template.
As you can see, the blog post doesn’t look that exciting or interesting. It’s dull, lacks color and design elements. So let’s turn it around and make it look even better!
After clicking on Theme Builder, this is what you should see:
Now what you need to do next is click the “+” icon in the Add New Template box. Once you’ve clicked the “+” icon, you should see a selection pop-up.
Under Post, choose All Posts.
What happens is the design that you build from the All Posts template will affect all the blog posts that you have on your website – including the new posts that you create for your latest blogs.
Designing Your Blog Post Template
Now that we’ve created our blog post template, we can move on to designing our blog post template! On the All Post Template box, navigate to Add Custom Body and click it – then Build Custom Body.
After creating a custom body, this is what your builder should look like:
Creating Your Blog’s Header
To make the header, simply add a section like you always would when building a website. After adding a section, navigate to the section settings by clicking on the gear icon while hovering over the blue section.
After clicking the gear icon, you should see Background. You can add any background you want for your header – like a plain color, a gradient, or a background image!
For now, I’ll be using this color “#281fff“. You can use any color you like!
After adding your background color, gradient, or image to your header – navigate to Design in your Section and click Spacing. Now that you’re in Spacing, focus on the top and bottom padding and press the link “🔗” icon in between them!
Once you clicked the link “🔗” icon, type “10vw” on the top padding, and it will automatically add “10vw” to the bottom padding, then click the green check box to save your changes.
Adding Your Blog Title
Now it’s time to add our blog title – in your section click the green “+” icon and choose the 1 block row. After selecting the 1 block row, click the gray “+” icon to add a module.
In the module pop-up, search for Text and add it to your row!
Now we’re on the best part! To get your blog title to automatically change to the titles of all your blog post’s, you should see the Dynamic Content icon in your text module:
Click the icon, and in the pop up select Post/Archive Title. After that, click on Design, then click on Text to design your Blog Title.
In the text settings, scroll down until you see Text Font and set the font to Roboto or any font you desire – then under Text Font, set the Font Weight to Bold. And lastly, set your text color to white!
Next, scroll down till you see Text Size, Text Letter Spacing, and Text Line Height.
Put in The Following:
Text Size: 30px
Text Letter Spacing: 0.5px
Text Line Height: 1.7em
Once you’ve applied the settings, scroll down until you see Text Alignment and click the center icon to fix your title to the center.
Now that we finished creating our header with a blog title. We can move on to the next step, adding our featured image, post author, categories, date & time blog was created, and the comments counter!
Adding Featured Image
To add your featured image, click the “+” icon while hovering over your section and choose Regular – after adding a new section, click on the green “+” icon and select this row:
After adding the row, click the “+” icon and add an image module.
After adding the image module, trash the image that already exists. Then you should see the Dynamic Content icon, click it and select Featured Image.
Next, navigate to Design, click on Alignment, and set the image alignment to the center.
After that, click the green check box to save the changes!
Adding Blog Info
Now we’re going to add the blog info:
- Post-Author
- Post Categories
- Post Date & Time
- Post Comments Counter
Let’s start with the post author! Click the gray “+” icon – then add a Blurb module.
For this module, we’re going to create a Post Author. Here you should see the title, and on the right side inside the title’s text box is again the Dynamic Content icon. Click it, and you should see Post Author!
So the next thing to do is scroll down to Image & Icon, trash the existing image, and again, click the Dynamic Content icon, and select Author Profile Picture.
Then navigate to Design, click Image & Icon, set the Image/Icon Alignment to the left, and finally set the Image Rounded Corners to “60px“.
Moving on, we’re going to add the blog’s post categories, post date & time, and post comment count.
Under the first Blurb you created, add another Blurb module, and in the title box, click the Dynamic Content icon. After clicking the icon, choose Post Categories.
Next, navigate to Image & Icon and click Use Icon. After that, you will see a selection of icons – choose an icon similar to “categories.”
After choosing an icon, navigate to Design and click Image & Icon. Set the icon color to “#d0d0d0” – then set your Image/Icon Placement to “left“. Under Image/Icon Placement, click on Use Icon Font Size and set it to “25px“.
Scroll down and click Title Text, make sure the title text is h4 aka header 4 – then set the title text font-weight to Semi Bold and title text size to “16px“.
Next, let’s add the post date & time! Hover over the Blurb you made for your post categories, and click the duplicate icon.
After duplicating it, go into the 2nd Blurb and delete the post categories dynamic content. After deleting it, click the Dynamic Content icon and choose Post Publish Date.
Then all you need to do is scroll down to Image & Icon and choose an icon similar to “date & time.”
Once again, duplicate your Blurb and go into the 3rd Blurb. Delete Post Publish Date and click the Dynamic Content icon, and select Post Comment Count.
Before clicking off the pop-up for your post comments, you should see After – inside the text box of After, press “spacebar” and type in “comment(s)” and go down to Image & Icon to choose an icon similar to “comments.”
Now that you have all the blog info and the post author, we can start adding the Post Content Template.
Adding Post Content Template
What the Post Content Template does is that it automatically sets all your content on all your blog posts to the settings you have set, so you keep your blog style consistent.
Create a new row by clicking the green “+” icon and choose a single row.
Then click the gray “+” icon, and search for Post Content. This is what it should look like after selecting the post content module.
Go into the post content module, navigate to Design and click Text – in the text settings, set the text font to Roboto. Scroll down to Text Size and set the size to “15px“, after that, set the Text Letter Spacing to “0.5px“.
Next, scroll down to Heading Text. Under heading 1, set the font to Cabin, and the font-weight to Bold. Do the same to heading 2, 3, 4, 5, and 6.
After applying the font style and font-weight to all headers, click the green check box to save your changes!
Adding Related Posts
The most important part we’re creating is our related posts – this is what it looks like:
To make it, simply create a new Row by clicking the green “+” icon and select the single row.
From there, you can add a text module – in the text module, delete all the content and replace it with “You May Also Like…“
Now let’s add the blog module! Click the gray “+” icon and select the blog module. After selecting the blog module, make sure the Post Count is set to “3” – then scroll down until you see Excerpt Length, and set it to “200“.
Next, scroll down to Elements and enable the features as shown:
Navigate to Design and click Layout – then change the post layout from fullwidth to grid.
Now scroll down to Title Text, set the font to Raleway, font-weight to Ultra Bold, change the title size to “14px“, and title line-height to “1.4em” – next, scroll down to Meta Text, set the font to Cabin, font-weight to Semi Bold, and the font size to “15px“.
Scroll down to Border, set the border-radius to “12px“, scroll down until you see “grid layout border-width” and set the border width to “0px“
Lastly, let’s add our shadow to make the related posts stand out!
From the Border settings, scroll down until you see Box Shadow. Select the first shadow, then set the vertical position to “21px“, blur strength set to “50px“, and spread strength set to “-25px“.
Now that we have added our related posts – let’s add the comments section!
Adding the Comments Section
Finally, the comments section! This is what the comment section will look like when we finish.
Under the blog module, add another module called “comments“. In the comments module, navigate to Design, click on Fields, set the fields background color to “#eaeaea“, fields text color to “#222222”, and the fields focus background color to “#eaeaea“.
Next, scroll down until you see Fields Margin, set the bottom margin to “3px“, and the top & bottom padding set to “18px“.
Then change the font to Cabin, font-weight set to Medium, text size set to “16px“, letter spacing set to “0.5px“, and line height set to “1.4em“.
Now scroll down to Comment Count Text, set the font to Roboto, letter-spacing set to “0.5px“, and line-height set to “1.4em“.
After that, scroll down to Form Title Text. Make sure it’s set to h3/header 3 and change the font to Raleway, font-weight set to Bold, font size set to “26px“, and finally the line-height set to “1.4em“.
Next, scroll down to Meta Text and set the font to Raleway. Under Meta Text, you should see Comment Text – set the font to Raleway, font-weight to Semi Bold, letter-spacing set to “0.5px“, and the line-height set to “1.7em“.
Then scroll down to Spacing, and set the top, bottom, left, and right padding to “5%“.
Finally, the button style! If you want, you can design the button to your liking. But if you wish to follow along, you can!
From Spacing, scroll up until you see Button – set the button text size to “17px“, the text color to “#645aff“, the button’s background color to “#e7e5ff“, the button border width set to “0px“, the button border radius set to “5px“, letter spacing set to “3px“, font set to Raleway, font-weight set to Bold, and the button font style set block caps – click the “TT” icon.
Finished! Let’s save our post template and see how it looks!
Saving Your Post Template
To save your post template, before exiting the Theme Builder, click the checkbox icon at the bottom-right to save all your changes. After the changes are saved, click the “x” on the top right of your screen.
After that, click the “Save Changes” button on the left side of your screen.
Now that we have saved our post template, you can visit a post you’ve already created to see what your blog looks like!
Conclusion
So now that you know how to create a post template for your blogs, you can have lots of fun and curate your very own cool-looking post templates for your website visitors to enjoy their reading experience! Really hope this helped – if it did, please share this with your family and friends!
