How To Highlight Blog Posts By Color Based On Category In The Divi Blog Module Tutorial by Pee Aye Creative

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

Nelson Miller Pee Aye Creative
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.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

11 Comments

  1. 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
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi David,
      It seems there was some bug on this post, I have fixed it now.

      And yes it would work fine, just make sure to remove the grid class .et_pb_blog_grid

      Reply
  2. 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
  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
    • Hemant Gaba

      Hi Raquel!

      Can you please share the URL of the page to investigate further?

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

      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
  5. Nicole Denton

    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!

    Reply
    • Hemant Gaba

      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

Submit a Comment

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

Recent Posts

0

Your Cart