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.
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.
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.