Visually Showcase Your Blog Categories
We have been pumping out tons of tutorials every week, and especially in the Divi Blog series. I have another cool idea here that I never saw talked about, but works great and is very easy to do if you follow the instructions here. I’m going to show you how to highlight Divi blog posts by color based on the category in the Divi Blog module.
▶️ Please watch the video above to get all the exciting details! 👆
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.
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.
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.
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.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
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-featued-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
/*entire post*/
.et_pb_blog_grid .category-nature.et_pb_post a.more-link {
/*YOUR CSS HERE*/
}
Is there any way I could target a post with the category “ripples” on this page? I am using Divi Engine so it is not a typical post item. I was hoping to add a badge to the top right corner.
https://livingripples.au/resources/
Any help will be appreciated!
Hi Nicole!
Please try the following CSS and see if it helps:
.et_pb_de_mach_archive_loop_0_tb_body .organisation-living-ripples .et_pb_row{
/*YOUR CSS HERE*/
}