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

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

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

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

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.

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.

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.

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.

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.

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.

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

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

26 Comments

  1. Steve

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Steve,
      Can you tell me more about the issue with multiple categories? I’m not sure exactly what you mean, please share a link and I will check it.

      About the colors, I actually have a tutorial scheduled for that. It will be very similar to the one I did for my Divi Events Calendar plugin, you can check to get the idea: https://www.peeayecreative.com/how-to-highlight-event-categories-by-color-in-divi-events-calendar/

      Reply
      • 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.

      • Steve Vine

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

  2. Ernst

    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.

    Reply
    • Hemant Gaba

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

      Reply
      • Ernst

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

      • Hemant Gaba

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

  3. Matt

    Hello,

    Thanks for this tutorial. I applied it to the posts on my home page but for some reason it also applies to the posts everywhere else on my site, even though I haven’t used the pa-blog-separators on any other modules. Any idea why this would happen? Compare the home page to this: https://liftyourneighbor.org/all-needs/ where I haven’t included the CSS class.

    Reply
    • Hemant Gaba

      Hi Matt,

      As I could see on the page provided, the code that is creating the issue is:

      .post-meta a:nth-child(1) {
      position: absolute;
      bottom: 0px;
      left: 0;
      color: #ffffff!important;
      background: #2f3085!important;
      padding: 2px 8px;
      margin: 20px;
      border-radius: 50px;
      font-size: 13px;
      }

      This is directly being applied to the post meta without any custom class and that is introducing the issue that you are facing. Please look for this code and use the Custom Class in the start to solve the issue.

      Reply
      • Matthew Piccolo

        That’s it, thanks so much!

  4. John

    Hi there! Thank you for this. One question: is there a way on Divi to put the author image in blog module? Or some other solution? Thank you!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      There’s no way to do that, it would need to be modified blog module and that’s get’s complicated because it would need copied to a child theme.

      Reply
  5. Dima

    Nelson thanks for the good and helpful tutorial. But what should I do if I have multiple subcategories, how can I remove the main categories and show only the subcategory or maybe place both categories as highlight?

    Reply
    • Hemant Gaba

      Hey Dima,

      Could you please share the URL of the website and also elaborate a little more about what you want to achieve in order for me to understand the issue accurately?

      Reply
  6. Tans

    Hey Nelson, thanks for all the effort with your posts. Is there a way to place the ‘Category’ tag over the image whilst having the blog module in a list layout (as on one of your other tutorials)?

    Reply
  7. Emma

    Hi Nelson,
    Thank you so much for creating great content. You make my life so much easier!
    Is there a way to do the same but for filterable portfolios? I would like to have the categories on top of the picture, just like in this tutorial. Thanks!

    Reply
    • Hemant Gaba

      Hey Emma,

      That will require a separate Custom Snippets. We will work on it on our end and will get back on this issue.

      Reply
  8. IHADFT

    Hello. Thank you for the great tutorial! Can the code be modified to only do this for certain categories? For example, if I have a category named “Expired”, I would like the post to show “Expired” on the top left of the image as shown in the tutorial above, but to ignore all other categories. If it is any other category, it should just simply appear in the default location, and not overlay the image. Lastly, the posts that are categorized as “Expired” will likely have another category or two attached to the post. I would only like “Expired” to display in that case, not multiple categories (hopefully this makes sense).

    I am also open to a solution (which may be easier, not sure) that simply overlays “Expired” in the manner above for any post in the expired category. So rather than relocating the existing meta, the code would simply carry out overlaying a static text bubble of “Expired”, if the post is in the “Expired” category.

    Any help is appreciated! This is my first post, but this site has helped me tremendously! Thank You!

    Reply
  9. Yevgenia

    Thank you very much! it really makes blog grid looking much better!

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart