When a visitor is on your site, it's important to give them as much information about what they are looking for as quickly as possible. For example, this is why Call to Action buttons are highlighted in a different way to stand out.

In a similar way, we can add simple visual cues or signals to aspects of your site to make your visitor understand nearly immediately what they are looking at without really needing to read anything. "Oh, this is a tutorial." "OK, that house is already sold." "I love how tasty those tacos look!"

Background: Category Classes

Each article (blog post) on your WordPress/Divi site will have one or more CSS classes assigned to them. A class for each category. This is true whether it's a single post, or a blog layout. The class name will depend on the slug assigned to the category. Almost always, this is just a lowercase representation of the category name, perhaps with dashes to replace the spaces so that it is URL compliant. Go to Posts -> Categories in your dashboard to see your category slugs.

List of WordPress post categories

By the way, you can't assign categories to WordPress pages. This is one of the differences between "pages" and "posts".

In this Divi tutorial, we'll learn how to add tags, ribbons, emojis and more to your Divi Blog images. We'll go through several examples of the types of effects you can add. By the end of the tutorial, you should even be able to do this with modules, columns, rows and sections!

Example 1: A simple label

As shown in the featured image above, we'll add a "Tutorial" tag to the article images that have that category.

We will need to use two different classes to address Divi and Extra usage both. Just use whichever one for the theme you're using. content is the word(s) you want to show. Any of the CSS after position: absolute; can be adjusted as needed to fit or style as desired.

article.category-tutorial a.entry-featured-image-url::before, /* Divi */
article.category-tutorial a.featured-image::before {          /* Extra */
position: absolute;
content: "Tutorial";
right: 4px;
top: 4%;
background-color: rgba(108, 46, 185, .8);
color: rgba(255, 255, 255, .9);
padding: 2px 14px;
border: 1px solid black;
border-radius: 10px;
}

Example 2: A corner ribbon

Next, we'll add a "Sold" corner ribbon to the article images that have that category. The overflow: hidden; is needed to prevent the ribbon from extending past the edges of the image.

We'll using the rotate() CSS function to make the text wrap the corner. Again, adjust anything you'd like after the absolute positioning to get the effect you want.

article.category-tutorial .et_pb_image_container, /* Divi */
article.category-tutorial .header {               /* Extra */
    overflow: hidden;
}
article.category-tutorial a.entry-featured-image-url::before, /* Divi */
article.category-tutorial a.featured-image::before {          /* Extra */
    position: absolute;
    content: "SOLD";
    right: -36px;
    top: 19px;
    background-color: red;
    color: rgba(255, 255, 255, .9);
    width: 120px;
    text-align: center;
    padding: 2px 14px;
    -webkit-transform: rotate(45deg); /* Needed for Safari */
    transform: rotate(45deg); 
    font-weight: bold; 
    font-size: 125%; 
    border-radius: 10px;
}

Example 3: An Emoji

We're going to slightly modify our first example. Instead of using text for the label. we can use an emoji!

With Windows, this is so easy. Hold down the <Win> key (the flag) and press <.> (period). Up will pop an emoji modal window that you can search and insert to your heart's desire. 😮

Windows emoji search

If you know how to do this on a Mac, please share in the comments below and I will update this tutorial!

Another fast and easy way to find that perfect emoji is to use the really neat EmojiCopy website. It allows you to search, adjust sizes and toggles between the JoyPixels Web Font and your native system emoji.

A third option is to use the ever-evolving Sensa Emoji set. This is a freely-downloadable vectored set, available in PNG, SVG, Sketch and Figma formats, but you can also customize and download individual ones.

So, here's the CSS you will need to use the text copy/paste version of emojis. The main differences are that you paste your emoji into the content: area, we will adjust positioning, and there will be no background or border settings. (My code formatter does not allow displaying of emojis... You'll have to manually select the code below. Sorry about that!)

article.category-tutorial a.entry-featured-image-url::before, /* Divi */ 
article.category-tutorial a.featured-image::before { /* Extra */
    position: absolute;
    content: "😍"; 
    right: 14px;
    top: 4%;
    font-size: 200%;
}

Finally, if you are using images for emoji (like Sensa) then you'll need to use the url() function for the content: part to specify the location of the image. When you've decided on an image emoji to use, upload it to your WordPress media library. You will then need to click the "Copy URL to clipboard" button so that you can paste it into the CSS below.

WordPress copy image URL to clipboard

You can leave off the domain and just use a relative URL if you want. This can prevent issues regarding SSL or if the domain name changes in the future.

<pre>article.category-tutorial a.entry-featured-image-url::before, /* Divi */ 
article.category-tutorial a.featured-image::before { /* Extra */
    position: absolute;
    content: url("/wp-content/uploads/2022/03/Astonished-face.png"); 
    right: 14px;
    top: 4%;
    font-size: 200%;
}
</pre>

So, now you know how to add tags and emojis to your Divi and Extra blog module images! There are other ways of doing this as well. If you know of a different way, or if you have any questions or want to let us know how it goes for you, please feel free to comment below!