Divi’s Blog-Module

If you are using the Blog-Module from Eleganttheme’s Divi Theme you propably also make use of wordpress’ category-functionality. To sort ones blog posts into different categories is a good idea, so users will have a better overview when the blog grows and about what the blog has to offer. With Divi’s Blog-Module you can create a beautiful looking masonry style blog page with all your posts, from only one category, specific ones or all of them.

HTML Markup of Blog-Module

If you look at the generated html markup from Divi’s Blog-Module, you may have noticed that all the article elements have a dynamic generated css class attached to them, according to the category the post come from. So for example, you create a post and set it’s category to ‘Basics’, in the Blog-Module the article card for this post will have a custom css class called ‘category-basics’.

HTML

<article id="post-337" class="et_pb_post ... category-divi">
	...
</article>

We can now use this information to completely customize the css of each article card in the Blog-Module depending on the category. For example a border-line on top of each article card, where each category has its own color:

CSS

article.category-divi {
    border-top:5px solid purple;
}

article.category-wordpress {
    border-top:5px solid blue;
}

Leave me a comment if you have any questions !

Possible result