Customizing your Blog Module by displaying an icon for each post based on the category it has been assigned to can significantly enhance its visual appeal and user experience.
This helps visually distinguish different types of content and makes navigation easier for your readers.
Create Post Categories
Note: If you already have a bunch of Post Categories created and Posts are already assigned to those categories, you can skip this step.
Go to WordPress Dashboard → Posts → Categories
In the left column, create the new category
Click on the Add New Category button
Take note of each Category's Slug:
Edit the Page which contains the Blog Module and open the Blog module's settings by clicking on the Gear icon
Go to Advanced Tab → Custom CSS → Free Form CSS and add this CSS code:
selector .et_pb_post[class*="category-"] .entry-title {
position: relative;
padding-left: 34px;
}
selector .et_pb_post[class*="category-"] .entry-title::before {
font-size: 24px;
font-family: 'ETmodules';
position: absolute;
left: 0;
top: 0px;
color: #73c32e;
}
selector .et_pb_post[class*="news"] .entry-title::before {
content: "\e059";
}
selector .et_pb_post[class*="landscape"] .entry-title::before {
content: "\e04e";
}
selector .et_pb_post[class*="houses"] .entry-title::before {
content: "\e05a";
}
Notes:
In the CSS Code above, you will have to replace the news, landscape, houses with your own categories slug text.
When using the above CSS code, the Dynamic Icons option from the Divi → Theme Options → Performance tab should be disabled.
Each icon is defined based on this code
content: "\e059". You can get the code for all icons here.
The result can be seen in the screenshot below:
