How to Design a Blog Page and Blog Post Template with Divi
Are you looking to add your own design to your Divi blog?
Then you’ve come to the right place.
In this tutorial I’ll show you step-by-step how to give your entire blog a unique design with the Divi theme.
After finishing this short guide, you’ll have added the following skills to your arsenal:
- Design a blog article template
- Use a blog module which automatically displays your latest articles
- Add a sidebar with an author bio and search functionality
- Create a template for your blog categories
- Create a template for your visitor’s search results
If you follow the instructions of this guide to the letter, then this is what your blog will look like:
Of course, you can alter this design in any way you please.
This guide is perfectly suited to all skills levels.
Are you a complete Divi beginner? This guide will still be super easy to follow. I don’t skip any steps and use imagery to explain all necessary actions.
Do you already have some Divi experience? In that case you might not be interested in my explanations on how to adjust fonts, background colors and other design elements.
Don’t worry though: the sections that deal with design are clearly indicated as such. You can easily skip them if you wish.
With that out of the way, let’s jump straight into it.
1. Create a blog page with Divi
A blog page contains an overview of all blog articles on your site. WebsiteGecko’s blog page looks like this. Most websites follow a pretty similar structure.
To create your own blog page, first add a new page through the WordPress dashboard. Click on Pages » Add New.
Name your new page “Blog” and click on Use Divi Builder.
Select the Start Building option.
Then, remove the pop-up that shows up.
1.1 Setting up a blog header
Let’s first add a header to our blog page. Add a New Section by clicking on the blue plus icon. Choose Fullwidth and subsequently select the Fullwidth Header.
Change the Title to “Blog” and remove the text below Button #1 and Body.
Design instructions
Scroll down. Click on Background and then on the colored square.
Add the following color code: #228278.
Then, head over to Design » Title Text. Change the Title Font to Roboto. Center the Title Text Alignment and change the Title Text Size to 48px.
Click on the green checkmark icon to save your header.
1.2 List with latest blog articles
Now we’re going to add a list which will display your latest blog articles.
Again, click on the blue plus icon to add a new section. Select Regular.
Choose the column structure indicated on the image below. The broad part will contain a list with your articles. The narrow part will contain your blog’s sidebar.
Now you’ll be asked to insert a module. Search and select the Blog module. You’ll now see an overview of the latest blog articles.
You can adjust a bunch of things here, such as:
- Post Count: how many articles are included in your list
- Included Categories: Blog categories you wish to include
- And Date Format: depending on your language / country, you might for instance want to alter this to j F, Y (this leads to the following format: 1 December, 2020)
When scrolling down, you can choose at the Elements section which elements your blog list should contain. For instance:
- Featured Image: Enable this to show your article’s featured image
- Show Excerpt: Enable this to show the first few lines of your articles
- Pagination: Enable this to let users click through to older articles on your blog
These are the settings I recommend:
Design instructions
Let’s add some design tweaks to make your latest articles a tad more attractive looking.
First, head over to Design » Border. Change the value to 4px. This will round the corners of your featured articles, thereby making them appear a little softer.
Scroll down and select Title Text. Change the Title Font to Roboto and the Title Text Size to 32px.
Then, go to Body Text. Again, select the Roboto font. Change Body Font Weight to Light. Select 16px for Body Text Size.
Finally, we’re going to adjust the Meta Text. This alters the design of the author’s name, the date, and other elements below the article titles. Pick Roboto as your font and change the Meta Text Size to 12px.
1.3 Adding a sidebar to your Divi blog
In your blog’s sidebar you can stuff a whole bunch of neat things. If you want to build an email list, you can add an email capture form in your sidebar. Would you like to promote an eBook at some point, then your sidebar is a good place for this, too.
I’ll now show you how to add an author bio, search functionality and a list of recent articles to your sidebar.
First, click on Add New Module (dark grey plus icon) and select the Blurb module.
Then, fill out the Title and Body. Add something about yourself or your business.
Design instructions
Head over to Design and change at Title Text the font to Roboto with a font size of 24px.
At Body Text, change the font to Roboto as well with a font size of 16px. Change the Body Font Weight to Light.
Click on the green check mark to save the module. Now you’ve got yourself an author’s bio.
Below your author’s bio, click on the Add New Module icon. Search for the Sidebar module to add a search function and a list of the latest articles.
Design instructions
At Design, change the Title Text font to Roboto with a font size of 24px.
At Body Text, follow the settings from the image below. Change the font color to #158cba.
Once you’ve happy with your page, click on save & publish in the bottom right.
Congrats, you’ve now got yourself a custom-designed blog page! The hardest part of this tutorial is over.
Next up, let’s make sure your visitors encounter the same blog design when they use your site’s search functionality.
2. Design a blog page with Search Results
If you don’t set up a template for your search results, your visitors will see the standard WordPress design. To prevent this, let’s create a template for your website’s search results.
2.1 Make a template with the Divi builder
Head over to the WordPress dashboard. Click on Divi » Theme Builder and then Add New Template.
Tick the Search Results box and hit Create Template.
Then, click on Add Custom Body.
Next, select Add From Library.
Choose Blog, which is the page we just build.
And click the pen icon to edit the Custom Body.
2.2 Add search keyword to the page title
We’ll now ensure that whatever keyword your visitors use, they’ll see them right on top of the page.
Right above the word “Blog,” click on Module Settings.
Then select the Dynamic Content functionality and pick Post/Archive Title.
You’ll now see the following text in your header:
From now on, whenever your visitors search for something (for instance “marketing”) this text will change into:
Results for “Marketing.”
2.3 Showing the correct articles in search results
In order for your visitors to actually see search results which contain their keywords, select Yes underneath Posts for Current Page within Blog Settings.
There it is: your search results page. Don’t forget to save it.
Now it’s time to put together a category page, which pretty much follows the same process.
3. Create a blog category page
Your blog’s visitors will have a much easier time finding your content when you use categories.
For instance, one of WebsiteGecko’s category pages is the Make a Website category.
In order to create a blog category page, first create a template like you did in the Make a Template with the Divi Builder section in the last chapter.
Just make sure to select All Category Pages this time around.
Well… that’s all there is to it. You’ve now got yourself a blog category page template.
4. Create a blog post template with Divi
For the final step of this tutorial, we’ll be designing the blog post template.
Follow the same steps as in the previous chapter to create a template. This time though, make sure hit the checkmark next to All Posts to apply this template to your blog posts.
Then, click the pen icon in order to edit the template.
First, let’s delete the blog module. This gives you clean slate for your article template.
4.1 Setting a featured image
Click on the dark grey plus icon and add the Image Module. Head over to Image Settings and remove the image.
Now you can add Dynamic Content. Pick Featured Image.
Design instructions
Soften up your featured image’s edges via Design » Border. Change all values to 4px.
4.2 Author’s name, date and other details
Below the image, add a new module. Select the Post Title module. At Elements, turn off the Featured Image.
Design instructions
At Design » Title Text, change the Title Text Size to 32px. At Design » Meta Text Size change the size to 14px. For both, choose Roboto as your font.
4.3 Blog text design
Below the author’s name and other details, add the Post Content module. Don’t worry about the misalignment between the placeholder text and your other design elements. The indent disappears once you view an actual blog article.
Design instructions
At Design » Title Text change the Heading 2 font to 32px. At Heading 3 change the size to 24px. Pick Roboto for both.
At Design » Text change the font to Roboto and the size to 16px.
4.4 Adding blog comments
Finally, we’ll be adding a comment module. All you’ve got to do is add the Comments module right below your post content module. Your visitors will now be able to easily leave comments on your content.
Design instructions
Change the font of all text elements to Roboto.
And… it’s a wrap. We’re at the end of this tutorial. You now understand all ins-and-outs of designing a blog and blog post templates with Divi in WordPress.
In conclusion
As you can see, designing your own blog with Divi is a pretty straightforward exercise.
Now I want to turn it over to you. Is there anything related to Divi that you’d like to get some help with? Or is there anything you think is missing in this tutorial?
Let me know by leaving a comment below.
