Highlight The Divi Blog Date Or Category On The Image
In our last tutorial, I showed you how to remove the Divi Blog module meta separators. That tutorial is the perfect prerequisite to this one, and complements it perfectly. In this tutorial I will be showing you how to move the Divi blog module meta author, publish date, and/or category up over the top of the featured image. This creates a beautiful highlight! This is a very requested feature, and there are no other tutorials like this, so I am excited to show you this.
Be sure to check out all our other tutorials, especially our entire Divi Blog module series. You’ll find everything you need and didn’t know you needed there, and if you have any suggestions for new blog related tutorials let me know!
▶️ Please watch the video above to get all the exciting details! 👆
Overview And Preparation
This is a very nice effect, but it will take some focus to get it right. A lot of the items in this tutorial depend on the scenario you want, which you will see when we get to each of the snippets. I really do mean it when I say, please watch the video. It explains things so much better than I can do with written words.
Remove The Post Meta Separators
As mentioned at the top, you will most likely want to remove some or all of the post meta separators, such as the “by” before the author and the vertical pipes “|” between the items. Please be sure to check the full tutorial and video:
How To Remove The Divi Blog Module Meta Separators
Add A Custom CSS Class
We are going to starty by adding a custom CSS class to the Divi Blog module. Using a custom class like this will make sure that our code only affects the module with this class, rather than affecting other Blog modules on your site.
Open the Divi Blog module settings and go to the Advanced tab and open the CSS ID & Classes toggle. From there, copy and paste or write “pa-blog-separators” into the CSS Class input field, as shown in the the screenshot.
This first snippet is needed to accompany any of the snippets below. It is critical for this to work. Basically it allows us to move the meta relative to the individual posts. Otherwise, without this, all the meta from all of the posts would move onto one post, creating a crazy mess.
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.
/*position the blog posts to prepare for moving the meta*/
.pa-blog-separators article {
position: relative;
}Now you can move on to the rest of the tutorial. Be sure to take a glance over all of it first in order to decided which items you want to move, and get an idea of how they will look from the included screenshots.
Move And Highlight The Divi Blog Published Date Over top The Featured Image
The first thing you can choose to do is move the date. This will allow you to highlight the date the blog posts were published. Just take note of the “left: 0;” in the code. This means it will align the date to the top left. If you prefer this to be on the right, simply replace the word left with right.
The one small caveat to this is that you would need to turn off either the author or the category, since the separator pipes | are removed.
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.
/*move the Divi Blog post meta published date up over the image*/
.pa-blog-separators .et_pb_blog_grid .et_pb_post .post-meta span.published {
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff!important;
background: #0071fc!important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}
Here is how it looks with this snippet with the blog date highlighted on the image. Feel free to adjust the top, left, right, color, background, padding, margin,, and border radius to your own branding and preferences.
Move And Highlight The Divi Blog Category Over top The Featured Image
Another thing you can choose to do is move the category up over the image to highlight it. Just take note of the “left: 0;” in the code. This means it will align the category to the top left. If you prefer this to be on the right, simply replace the word left with right.
One thing to note is that this works beautifully with only one category. But if the post has 2 or 3 or more categories, I think it would lose the effect.
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.
/*move the Divi Blog post meta category up over the image*/
.pa-blog-separators .et_pb_blog_grid .et_pb_post .post-meta a:nth-child(3) {
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff!important;
background: #0071fc!important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}Here is how it looks with this snippet with the blog post category highlighted on the image. Feel free to adjust anything in the snippet like the top, left, right, color, background, padding, margin,, and border radius to your own branding and preferences.
Move And Highlight Both The Divi Blog Published Date And Category Over top The Featured Image
In the previous two snippets we provided separate snippets to move either the date or the category. But if you want, you could also do them both! Just make sure to make one of the on the left, and the other on the right.
There is a caveat for doing this, depending on the number of other meta items you have. If you also have the the Author and Comment Count turned off, then the snippet will work as is. But if you have those on, then you need to add “:nth-child(3)” to the end of the second snippet like “.post-meta a:nth-child(3)” to make sure it only targets the category.
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.
/*move the Divi Blog post meta published date up over the image*/
.pa-blog-separators .et_pb_blog_grid .et_pb_post .post-meta span.published {
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff!important;
background: #0071fc!important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}
/*move the Divi Blog post meta category up over the image*/
.pa-blog-separators .et_pb_blog_grid .et_pb_post .post-meta a {
position: absolute;
top: 0;
right: 0;
margin-bottom: 0;
color: #ffffff!important;
background: #0071fc!important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}Here is how it looks with both the date and category moved up over the Divi blog featured image. As usual, you can customize the colors and other values in the CSS to your own liking.
Move And Highlight The Divi Blog Post Author Over top The Featured Image
The last one here is about moving the blog post author over the image. To me this would only be needed if your blog has a lot of different well-known authors that you want to highlight. This is very similar to the other ones here, and works best if you either have 1 or no other meta items turned on.
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.
/*move the Divi Blog post meta author up over the image*/
.pa-blog-separator .et_pb_blog_grid .et_pb_post .post-meta span.author.vcard a {
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff!important;
background: #0071fc!important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}Here is how it looks with this snippet with the blog author highlighted on the image. Once again, feel free to adjust any of the other values in the code.
Hi Nelson!
Thank you so much for this. Question, is it possible to add custom text to one of these bubbles? I would like to have the category and then in the other bubble either have a tag or custom text to the effect of ‘Members Only’.
Thanks so much!
Kieran!
If you want to add tags to the meta texts, then you need to use a third-party plugin for it. However, if you want to use the same static text for all the posts, then use the following code:
.cstm-blog p.post-meta a:last-child:after {
content: ” | Hello”;
}
Make sure to add the cstm-blog class to the Blog module.
Hi,
As I’ve turned off the date, and writer in the ‘elements’ section of the blog module. Do I still need to follow the ‘Remove the separators’ tutorial first if I only want the category shown over the image? I’ve tried it, and it doesn’t seem to work.
It is good to remove the separators between the meta tags because even if you are showing only the categories then also there can be two or more categories for a single post and then also the separators will show up. But if every post of yours is having a single category then you don’t need to remove the separator just go to the Blog Module Settings > Advanced > CSS ID & Classes and give a custom class there. For example, the custom class is pa-blog-module
After that go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and paste the code given below:
.pa-blog-module article{
position: relative;
}
.pa-blog-module article .post-meta a{
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff !important;
background: #0071fc!important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}
I hope that this will help. 🙂
Perfect. I was messing with too many different classes. That messed it up. This works!
Great! I am glad that the issue is resolved now. 🙂