Badges are a great way to highlight important information or to catch a reader’s attention. They can indicate that a blog post is new and part of a series (author/category). Badges can also be used to promote special offers or to showcase sponsored content.
Divi is a popular WordPress page builder that makes creating custom designs for your website easy. Sadly, Divi does not have a built-in badge module. However, we found a way to add badges to your blog posts by moving and highlighting one of the post meta items (author, publish date, and category) over the post images (featured images).
In this article, we will show you how to add a badge to your Divi Blog module without the help of any third-party plugin.
Steps to Add Badge to Divi Blog Module
Step 1: Remove the Post Meta Separators
As mentioned, we will add the badge to the Divi Blog module by moving and highlighting one of the post meta items (author, publish date, and category) over the post images (featured images). So, to make the appearance of the badge cleaner and minimalist, we start this tutorial by removing the default post meta separators, such as the “by” before the author and the vertical pipes “|” between the items.
- Add the CSS Class
Go to the Divi Builder, add a new Blog module, or select the existing one.
Go to the Advanced tab -> CSS ID & Classes on the module settings. Afterward, add “wppb-remove-meta-separators” to the CSS Class input field.
- Add the JavaScript Code
Go to the Divi Theme Options page (Divi -> Theme Options) and navigate to the Integration tab. Next, paste the JavaScript snippet below into the Add code to the < head > of your blog field.
<script>
//Remove meta seperator pipes (|) and by from Divi Blog module meta
jQuery(function($) {
$(document).ready(function() {
$('.wppb-remove-meta-separators .post-meta').each(function() {
$(this).html($(this).html().replace(/\|/g, " "));
$(this).html($(this).html().replace('by', " "));
$(this).html(jQuery(this).html().replace(/,/g, ""));
});
//Do the same for ajax with pagination enabled
$(document).bind('ready ajaxComplete', function() {
$('.wppb-remove-meta-separators .post-meta').each(function() {
$(this).html($(this).html().replace(/\|/g, " "));
$(this).html($(this).html().replace('by', " "));
$(this).html(jQuery(this).html().replace(/,/g, ""));
});
});
});
});
</script>
Once the JavaScript snippet is added, apply the changes by clicking the Save Changes button.
Alright, now the post meta separators on your Blog module are removed. Please return to your Blog page, preview it in a new tab or window, and see that the post-meta separators are removed.
Step 2: Move the Post Meta Item
Next, we will move and highlight the post-meta item over the post images.
- Add the CSS Class
Navigate to the Advanced tab -> CSS ID & Classes on the Blog module settings. You must already have a CSS class that you use to remove the post-meta separators (wppb-remove-meta-separators). So, make a space, then put this CSS “wppb_blog_meta” into the field.
- Add the CSS Snippet
It’s time to add the custom CSS to move and highlight the post-meta item over the post images. In this example, we will use a category item as a badge of the Divi Blog module.
On your WordPress dashboard, go to Divi -> Theme Options. Once you enter the Divi Theme Options page, navigate to the General tab -> Custom CSS section.
Copy the CSS snippet below and paste it into the Custom CSS field.
.wppb_blog_meta article {
position: relative;
}
/*move the Divi Blog post meta category up over the image*/
.wppb_blog_meta .et_pb_blog_grid .et_pb_post .post-meta a:nth-child(3) {
position: absolute;
top: 0;
right: 0;
margin-bottom: 0;
color: #ffffff!important;
background: #f438c8!important;
padding: 7px 14px;
margin: 10px;
border-radius: 10px;
}
Once you add the CSS snippet into the Custom CSS field, apply the changes by clicking the Save Changes button. Please return to your Blog page, preview it in a new tab or window, and see that you now have a badge on your Divi Blog module.
Feel free to modify the badge appearance by editing the values in the CSS snippet, such as the text and background color, padding, etc.
As mentioned earlier, the CSS snippet above moves and highlights the category item over the post images. But, if you want to move the other items (author and publish date) and set it as a badge for your Divi Blog module, you must replace some CSS Selector in the CSS snippet.
Here are the following examples:
- Blog Post Author
/*move the Divi Blog post meta author up over the image*/ .wppb_blog_meta .et_pb_blog_grid .et_pb_post .post-meta span.author.vcard a
- Blog Post Published Date
/*move the Divi Blog post meta published date up over the image*/ .wppb_blog_meta .et_pb_blog_grid .et_pb_post .post-meta span.published
The Bottom Line
The bottom line is that you can add a badge to your Divi Blog module without the help of any third-party plugin by moving and highlighting one of the post meta items (author, publish date, and category) over the post images (featured images).
To do this, you need to:
- Remove the post-meta separators.
- Move the post meta item.
You can follow the steps in the article to learn how to do this in more detail.
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud and access from any website you create.
