How To Add Blog Category In Module Divi

Whenever you land on a blog page on any website, do you seriously take the time to read every title, and load more posts, just to see that one article or blog post that hits your interest?

I do that for the rare few blogs that I follow, but almost never for new websites I just discovered.

If I'm looking for something specific, I will more likely browse through a blog page divided up in categories than a general blog page that's a catchall for every topic.

I'm willing to bet that's how most people browse blog pages as well.

In Divi, creating and designing category pages is incredibly flexible. The front-end editor, modules, and dynamic content make it easy to format a page however you like. If you want to create a category page like this below, keep reading...

Why Do You Need Categorized Blog Pages on Your Website?

In every page of your website, you should be aiming to direct visitors towards the next page. There should always be a different page they can go to that will bring them deeper into your content. That should be the general rule.

When a website visitor lands on your blog page, they won't immediately browse through the titles, the next thing they'll probably look for is the categories that will narrow down the list of posts.

So give them what they want.

For one, this makes them stay longer on your website, minimizing bounce rates. Once you've caught their attention, they will get more curious and jump to different pages.

As they get more engaged with your website, it gets easier to make them trust you or your business. And the longer they stay on your website, you get back the stats of who are actually staying and engaging with your content. You get more information on your target audience.

Divi Modules You'll Need for Post Categories

Divi's modules are simply elements that you add to a page, like text, image, gallery, image slider, etc. Each module can be formatted however you like. To make a category page like the one above, you'll need these modules:

Post Slider Module

The post slider module displays a certain number of posts one at a time. It typically displays the title, featured image, excerpt, and occasionally the author and date published.

You probably see this used for featured posts because the design and layout pops out. It's an effective attention-grabber.

Blog Module

The blog module is an element that displays the list of blog posts, whether in a single column list or grid layout. This type of module is specifically for displaying blog posts. You just have to configure the settings if you want to display posts under a specific category, which we'll do later on.

How to Build a Category Blog Page Template in Divi

Creating a category page using Divi Builder can be summarized in two major steps. Follow along as you create your own.

Create a custom template.

Start from the WordPress Dashboard. Hover over Divi and click 'Theme Builder' on the secondary menu that appears on the right.

Add a new template.

At this point, you have a choice whether you will apply this template to all post categories, or just a select few.

If you want to apply this new template to all post categories, check 'All Category Pages'.

If you just want the template for one or a few categories, check 'Posts in Specific Categories', then check the categories you want the template to be applied to. For this tutorial, I only selected one category: Sales & Marketing.

Click on 'Build a Custom Body'. You can also choose to create a custom header and footer for this category page template.

You can choose from tens of Divi's pre-made templates, but for this tutorial, we're going to build from scratch.

Layout your page.

On your blank page, insert a new row. Choose the 1/3, 2/3 column option.

On the left column, add a Text module. This will be the category title of the page.

Under 'Content' in text settings, hover over the empty text field. Click the dynamic content icon that appears on the top right.

Select 'Post/Archive Title' from the dropdown menu.

Click the gear icon to edit the content.

Wrap the text in H1 tag, like so…

You can decide what to put before or after the post category. I wanted it to say, Blogs: [Category]. You can also make it say [Category] Posts.

Format the text module.

I made it ultra bold, capitalized, aligned to the left, and I added a 150px spacing on top. I will add a post slider on the right column, and I want this H1 title to be aligned at the center of the slider. (Follow along to see how it will look like.)

Click the + button on the right column, then add a Post Slider module.

On the Content tab, slide the 'Posts for Current Page' toggle to YES. Doing this will make sure that the posts you're displaying are according to the category the page is for.

Also indicate how many posts you want to be displayed in the post slider. I limited it to 3.

I went back to the Post/Archive Title text, and adjust the top margin spacing to 190px to make it more centered.

Now for the rest of the blog posts, add a new row with only a single column.

Click the + button, and select the Blog module.

Under the Design tab, click on Layout and select 'Grid'.

On the same tab, edit the Post Title Text. Make it an H2 and set it to bold.

Go back to the Content tab, again toggle the Posts for Current Page to yes. I set the post count to 9 as there are 3 columns.

Since you've already displayed 3 posts on the post slider, make the post offset number 3.

And that's that! Now you have a blog category page template.

If you go to the Content and Design tabs of every module, you can edit what's displayed there. You can change the 'Read More' button or replace the text for 'Load More Posts', etc.

View your page.

To view your page, go back to your WP Dashboard. Hover over Posts, then click 'Categories'.

When I hover over the category the template is applied to, click 'View'.

Other things that you can use this template for...

Location-specific blog posts – This is efficient if you run a website where location pages could help visitors filter your content to what's most relevant to them. Having location-specific pages is better for your SEO than mentioning a certain city or state X times in every blog post.
WooCommerce product category page – Divi integrates with WooCommerce, so once you have finalized your products and categories, you can download a plugin for a product filter menu, and use Divi's Shop Module to display products per category.