Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
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.

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

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.

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*/
}

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

13 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      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*/
      }

      Reply

Comments By Others

  1. Kate

    Hi, could you give me some advice please? I have inserted the code exactly as instructed and if I have Visual builder active everything works as it should. But if I disable Visual builder then the color of the highlighted category overwrites the design that is set in the blog module. How do I fix this so that the blog module design is preserved and at the same time it does not overwrite the code for the highlighted category?

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Kate!

      The visual builder needs to be activated for the customization. I’m afraid there is no other solution right now.

      Reply
  2. Lucas

    Hi Nelson! Is there a way to respect the colors once you enter the entry to read it?

    In the article I have:
    1- Title
    2- Metadata
    3- Content

    I would like to respect the color in that metadata, thank you very much!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Lucas,
      If you mean that you want to apply color to those items on single blog posts, sure, you could do that the same way. Just use the selector for that category. You will need to inspect the page with the browser tools and get the selector from the code.

      Reply
  3. Raquel Nicolas

    Hi Nelson, I’m new to your blog and starting in the divi web design, I found this interesting post but having some trouble implementing. the image snippet has a typo is “featured” but nevertheless it does not work when I try to ad a bottom border
    this is the code i’m using
    /*featured image*/

    .eleva-blog .category-mundo-justo.et-pb_image_container .entry-featured-image-url img {
    border-style: solid!importan;
    border-width: 10px!important;
    border-color: #524793!importan;
    }

    /*entire post*/

    .eleva-blog .category-mundo-justo.et_pb_post {
    background-color: #524793;
    }

    Reply
    • Lucas

      Hi! Looking your code I found that you have forgot the last “t” in !important. Check that

      .eleva-blog .category-mundo-justo.et-pb_image_container .entry-featured-image-url img {
      border-style: solid!important;
      border-width: 10px!important;
      border-color: #524793!important;
      }

      Reply
  4. Philipp

    I try to make this work with custom post types but it seems it does not work.
    Could you give me a hint on how to make it work?

    I am using CPT Ui for creating the custom post type.

    When querying blog post it directly shows my css styling, but with my teams custom post type it does not.

    Reply
    • Philip

      Found the solution: .blog-team .et_pb_post.cat_team-test 🙂

      Reply
  5. David Cutrano

    I can’t seem to access the code from the snippets. It looks like its just a URL. Also would like to know if this is applicable to blog posts that are fullwidth and not grid layout.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart