Code by Day | Explore By Weekend

How To Highlight Blog Posts By Color Based On Category In The Divi Blog Module Tutorial by Pee Aye Creative

How To Highlight Blog Posts By Color Based On Category In The Divi Blog Module

In this tutorial I will show you a really cool way to style and highlight Divi blog posts by color in the feed based on category.

How This Works

This tutorial gives you the CSS snippets you need to target the posts within any blog category in the Divi Blog module using the Grid layout. We have instructions and snippets for each part of the module, so be sure to follow along with the video to make sure you do it right.

NOTE: Please be sure to watch the video to learn how to use the snippets and see the results in action.

Where To Add The CSS Snippets

If you are using our free Divi child theme, place the snippets into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Custom Classes

Keep in mind that you would need to use a custom class if you want to only target categories in one particular module rather than all of the Blog modules on your site. To do that, replace “.et_pb_blog_grid” with your own class. Be sure to add a matching custom class in the Divi Blog module settings>Advanced tab>CSS IDs & Classes toggle>CSS Class input field.

How To Find the Blog Category Slug

You can find your blog category slugs by going to Posts>Categories in the backend of your website.

Divi blog category slug

Of course you could also use the browser developer tools to inspect the CSS and find the classes, but advanced users already know that, and it is easier for everyone else just to use this simple method of finding the slug in the backed.

Duplicate Snippets For Each Blog Category

You will need to copy the snippets below multiple times if you want to style more than one category. Each category would need it’s own set of CSS snippets. So for example, if you have five blog categories and want each of them to have a different color, you would need to have five sets of the code snippet, one for each blog category.

Replacing The Selector With Your Own

In the snippets below, we have a selector called “category-nature” which is a blog category on the site where we are working the live example in the video. Obviously you will need to change this to your own category slug. To do this, just replace “nature” anywhere you see it like “.category-nature.et_pb_post.” 

In the screenshot below, the posts in the Nature category have blue background with white text.

Divi blog category posts highlighted by color

Sample Selectors

The follow snippets target each item in the Divi Blog module. You can copy snippets you need and add your own CSS properties and values to them. In the video, you will see me walking through some examples.

Entire Post
/*entire post*/

.et_pb_blog_grid .category-nature.et_pb_post {
	YOUR CSS HERE
} 
Featured Image
/*featured image*/

.et_pb_blog_grid .category-nature.et_pb_post .entry-featured-image-url img {
	YOUR CSS HERE
} 
Title
/*title*/

.et_pb_blog_grid .category-nature.et_pb_post .entry-title a {
	YOUR CSS HERE
} 
Meta
/*meta*/

.et_pb_blog_grid .category-nature.et_pb_post .post-meta,
.et_pb_blog_grid .category-nature.et_pb_post .post-meta a {
	YOUR CSS HERE
} 
Excerpt
/*excerpt*/

.et_pb_blog_grid .category-nature.et_pb_post p {
	YOUR CSS HERE
} 
Button
/*button*/

.et_pb_blog_grid .category-nature.et_pb_post a.more-link {
	YOUR CSS HERE
} 
22
Last updated Apr 6, 2021 @ 1:33 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,600 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart