Code by Day | Explore By Weekend

How To Move And Highlight The Divi Blog Module Author Date Or Category Over The Image Tutorial by Pee Aye Creative

How To Move And Highlight The Divi Blog Module Author, Date, Or Category Over The Image

In this tutorial I will show you how to highlight the meta in the Divi Blog module by moving the author, date, and/or category over the image.

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

How To Remove The Divi Blog Module Meta Separators YouTube Video Tutorial by Pee Aye Creative

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-meta-highlight” into the CSS Class input field, as shown in the the screenshot.

Where To Place The Snippets

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

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.

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

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

how to hightlight and move the Divi Blog date over the featured image

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.

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

how to hightlight and move the Divi Blog meta category over the featured image

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.

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

how to hightlight and move the Divi Blog meta date or category over the featured image

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.

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

how to hightlight and move the Divi Blog author over the featured image
8
Last updated Apr 15, 2021 @ 8:51 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Steve
Steve
1 month ago

Hi Nelson, Thanks for this. I’m trying to get this to work with multiple categories assigned to a blog but I can only get one to show. How would you do this for multiples?

Also, is it possible to change the background colour based on the category value? I’m assuming that would have to be by done by script.

Thanks, Steve.

Last edited 1 month ago by Steve
Steve
Steve

Sorry for delayed reply. Working with a temp domain name which I’ve included below. Plus I’ve attached an image. You can see I’ve got two categories – massage and physiotherapy. I can’t figure out how to isolate them as they seem to be lumped together under the category-physio class so when I change the background colour for physio, the massage background colour changes too.
The workaround as far as I can see is to ensure you only ever assign one category to a blog post.

Thanks,
Steve.

Blog Card Example.png
Steve Vine
Steve Vine

Ok, thanks Nelson. That at least confirms what I thought.

Ernst
Ernst
1 month ago

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.

Hemant Gaba
Hemant Gaba
Reply to  Ernst
1 month ago

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 >… Read more »

Ernst
Ernst
Reply to  Hemant Gaba
1 month ago

Perfect. I was messing with too many different classes. That messed it up. This works!

Hemant Gaba
Hemant Gaba
Reply to  Ernst
1 month ago

Great! I am glad that the issue is resolved now. 🙂

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,900 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart