How To Move The Divi Blog Text Title And Button Over The Image Tutorial by Pee Aye Creative

How To Move The Divi Blog Title, Text, And Button Over The Image

This unique tutorial will show you how to move the Divi blog grid title, meta, and button up over top of the featured images.

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

#1. Add The Code Snippets

Add A Custom CSS Class To The Module

Start by adding a custom CSS class “pa-blog” to the Divi Blog module settings>Advanced tab>Custom CSS & IDs toggle>CSS Class field.

Add The jQuery

The first thing you need to do is add the following snippet of jQuery code to your website.

What Is This Doing?

This is doing a very special trick. By default, the blog module is broken into parts, the title, the meta, and the content. In order for us to move all thee parts as a unit, we first need to combine them into one element. Pretty cool, huh!

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<script>
    (function($) {
        $(document).ready(function() {

            $(".pa-blog .et_pb_post").each(function() {
                $(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="pa-blog-text"></div>');
            });

            //Do the same for ajax
            $(document).bind('ready ajaxComplete', function() {
                $(".pa-blog .et_pb_post").each(function() {
                    $(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="pa-blog-text"></div>');
                });
            });

        });
    })(jQuery); 
</script>

Add The CSS

Once the previous snippet is added and saved, we can move on to the CSS.

What Is This Doing?

This code is  moving the combined element that we wrapped together with the jQuery and placing it up over the featured image. It is centering this new element vertically and horizontally over the image.

We also needed to include some CSS to clean things up. For example, we needed to adjust the margin and padding on the featured image.

Another thing we are doing is adding an overlay to the image so that the text stands out. We can’t use the overlay in the module settings for this because it would put the text behind it.

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.

/*move wrapped title, meta, and text up over the image*/

.pa-blog-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	padding: 30px;
	z-index: 1;
}


/*keep the moved items positioned with their parent items*/

.et_pb_blog_grid article {
	position: relative;
}


/*remove spacing around entire blog post*/

.et_pb_blog_grid .et_pb_post {
	padding: 0px;
}


/*remove negative margins on blog featured image*/

.et_pb_image_container {
	margin: 0;
}


/*remove the margin below the featured image frame*/

.et_pb_post .entry-featured-image-url {
	margin: 0;
}



.et_pb_blog_grid .entry-featured-image-url::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

#2. Adjust Divi Settings

Remove The Border

By default, Divi adds this annoying little 1px gray border. Just remove that, you can barely see it now but it is still noticeable.

Title Text

Because we added an overlay to the image (to make it easier to read the text), now we need to do part two of that and make the text a light color. In my example, I made the H2 Title Text white.

Meta Text

Again, if you are using any meta text like author name, categories, date, etc. then you would want this to be a light color as well.

Body Text

I don’t think there would be enough room for this in the grid mode, but if you have a large enough space, you could keep the Excerpt turned on. If so, the same idea applies and this would need to be a light color.

Button (Read More Text)

If you are using the read more button, then you probably want to make it look better. We have a great tutorial on How To Style And Customize The Divi Blog Read More Button, which shows you how to style the link text as a button, add an icon, and change the button text.

How To Style Customize and Change The Divi Blog Read More Button Tutorial by Pee Aye Creative
18
Last updated Aug 31, 2021 @ 11:27 am

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!

By commenting you agree to our Blog & YouTube Comments Policy

76 Comments

  1. Mark

    This is exactly what I want to do with my wesbite. However, When I changed the layout from Grid to Full Width, this code: .et_pb_blog_grid .entry-featured-image-url::before {
    content: ”;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    }

    Is not working. I hope you can help bro. I appreciate so much what you do.

    Reply
  2. Mont

    How can this be applied to a blurb element. I’m a bit confused when inspecting it, and I don’t know which class is which.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Mont,
      This tutorial and CSS is specifically for the blog. I would not try to do this with the blurb, but use image and text modules in a column instead.

      Reply
  3. David

    Hello, just for info I miss info that you need to add class .pa-blog on blog module.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi David,
      Actually no, you don’t. That class is the class used to wrap the title, meta, and button together, and should not be added to the blog module.

      Reply
  4. Mercy

    Thank you for this tutorial! This is so helpful.

    I wanted only the title and meta pulled up over the image and it worked great! When I re-size the screen however, the meta starts to get cut off on the bottom. Is there any way to remedy this? Thanks!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Mercy,
      I guess it’s kind of a physics thing. The title longer and there’s nowhere for the text to go. The best thing I can think of is to reduce the text size.

      Reply
  5. Elisandro Borges

    It wil be quite useful to me! Love it! Thank you!

    Reply
  6. Wouter

    Not working for me…

    Edit: working now, worked when I added .pa-blog class to the blog module

    Reply
  7. Streater

    I get a bunch of errors with this code

    Reply
      • Streater

        I think I was placing it in the wrong place… because I just tried following this again and it worked… I don’t even remember now I ended up finding a different solution at the time

  8. Josef Průša

    HI Nelson,

    looks like WordPress 5.6 update has just managed to break your code. Has something to do with dropping some old JQuery support.
    Any idea how to fix that?

    Josef

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      I updated the snippet in the tutorial, it should work now.

      Reply
  9. william Brown

    Hi there not sure if im missing something but i was working on local and worked perfect! then migrating to live url and now div “pa-blog-text” isn’t added to wrap the title, meta and content? am i missing something

    Reply
  10. Sarah

    I’ve just used this on a website and it worked perfectly until WordPress 5.6 was released and JQuery was updated to the latest version. Could you advise what changes we need to make to the script? It’s broken in 5.6 now. Sorry to bother, I’m not that good with scripts and this was perfect for what I was doing. Thanks!

    Reply
      • Sarah

        Hi, the url is here I managed to get it working again by installing the jquerymigrate helper, but it’s a bit of an iffy solution for now. Thanks 🙂

      • Nelson Lee Miller (aka The Divi Teacher)

        I updated the snippet in the tutorial, it should work now.

      • Sarah

        Thank you, it works perfectly! 🙂

  11. Parham Shafti

    Hi there! Hope you are well. I’ve been using this on the blog post module for the last two months without trouble. Suddenly everything jumped out of place again. The only thing I can think of that might have interfered with it is the recent WP update. Am wondering if anyone else has issues and if you got any remedy?

    Here is the link to the website I’m referring to https://gobeyond.se/starta-har
    Have also inserted a screenshot.

    Worth mentioning, when I’m in the visual editor, the text is placed on top of the image as it should be. Just not showing in the public version.

    Would appreciate any help.

    Kind regards,
    Parham

    Reply
      • Parham Shafti

        Hi again! Yes, I have sorted the issue now. It seems that the new Wp Update removes a jquery library. Which was what interfered with the script. I got advised to Install the “Enable jquery migrate helper” plugin and then choose the legacy version of jQuery. That sorted the issue. 

      • Wouter

        Hello, this indeed sorted the issue. But i would rather not use the plugin. Is it possible to adjust the script to make it work? Thank you

      • Nelson Lee Miller (aka The Divi Teacher)

        It is hard for me to know since I can’t replicate it, but try this and reply back:

      • Nelson Lee Miller (aka The Divi Teacher)

        I updated the snippet in the tutorial, it should work now.

  12. Tom

    Hi Nelson,

    I’ve had the same issue as others with the recent WP 5.6 update breaking your code. Installing the Enable jQuery Migrate Helper plugin works as a temporary fix – do you have plans to update the code?

    Attached a before and after screen grab.

    Tom

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Tom,
      I’m still not able to replicate it, would love to find the common denominator. You can try this and let me know:

      Reply
      • Tom

        Thanks for getting back to me, no luck with this – this code hid the blog all-together!

        It was all working fine before the WordPress 5.6 update – all plugins and DIVI has been updated too?

      • Nelson Lee Miller (aka The Divi Teacher)

        How strange, no idea why the module would hide. Try the updated code snippet in the tutorial to fix the original issue.

      • Tom

        The new code has fixed it! Thanks for your fast response on this!

  13. Jordan Mason

    That did not work for me. In addition, you say in your instructions: “By default, Divi adds this annoying little 1px gray border. Just remove that, you can barely see it now but it is still noticeable.”

    How exactly do you do that? You never said.

    Reply
    • Jordan Mason

      K. Got it. Is it possible to create this overlay as a hover effect? So essentially it starts out as a picture, and then when mouse over – it goes to like a move-up class transition effect with the title and screen overlay?

      Reply
      • Nelson Lee Miller (aka The Divi Teacher)

        That is a good idea. You could certainly do this, yes. You could try something like .pa-blog-text {opacity: 0;} and .et_pb_post:hover .pa-blog-text {opacity: 1;}

  14. Natashya

    Hi there – this was a terrific snippet; but I’m having issues because it only works on the initial page-load, and stops working as soon as you click to go to the next page. Any suggestions?

    Reply
  15. Luis

    Excellent guide, I congratulate you on your Blog, they are knowledge pills, thanks for sharing.

    Reply
  16. MadMango

    How would you change the post title font size in a Blog Module? I only. see header. fonts, H1,H2,H3, etc… and cant find the option for mobile.
    Thank you .

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Rebecca,
      Yes for sure. Just add the :hover selector to your CSS. You could try something like making the text opacity: 0; and then on hover opacity: 1;

      Reply
  17. sasha

    Hi, when i post the first bit of code into the integrations within divi options, it comes up with an error next to the final </script> saying ‘tag must be paired, no start tag [</script>]. But there is the <script> at the beginning. Can you please help?

    Reply
  18. Matt Andrews

    Hi there, I added the js and the CSS and then the class to the blogs on this page but they change the layout of the grid, they are no longer in a clean little block.

    Reply
      • Matt Andrews

        pw: trorblog

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Matt, so I see you have three blog modules, one in each of the three columns. I’m not sure what you are asking, I thought you meant it changed the column layout. What I do see is a physics problem, where there is too much text to fit inside the images. Is there something else I’m missing?

      • Matt Andrews

        They lined up like smooth blocks, in three columns, one large block to the left and then two smaller blocks that i put blog modules in as well. so you would have 5 total post , one big one on the left and 4 to the right, lined up all smooth…. then I add your code and you see its distored, the blocks are all out of whack

      • Matt Andrews

        This is what it looks like before the code is installed

      • Matt Andrews

        This is what the page looks like before adding in the code

      • Matt Andrews

        THis is what it looks like after the code is installed

  19. Matt Andrews

    I am having trouble with the your code. When I install the CSS , JS, and the class code the action seems to work to bring the text within the image. I have provided a before and after to what happens when I applied the code mentions on this blog post. Am I doing something wrong?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Matt,
      You have to understand that the way you are trying to use the Divi Blog module is not the same as in the tutorial. Also it looks like you may have tried to share screenshots?

      Reply
      • Matt Andrews

        Please explain what I did wrong then. I installed the JS and CSS and applied the class, what did I miss and I will try to share the screen shots again.

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Matt, please review the answers I shared to your other comment thread here.

  20. Jorge

    Hi Nelson! Thank u very much for this amazing tutorial. I have a small problem, the separation of the bottom edge is not the same for web as tablet and mobile, how can I do so that each one has a different separation, also, when the title has three lines, it is perfect, but if it has two lines, it starts to rise and it doesn’t look good. Thanks for the help.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Jorge,
      I’m not sure what you mean by the separation. But in general, he physics of having different length text are a problem that you could maybe solve with adjusting the font size.

      Reply
  21. Matt

    Thank you for this post–it’s very helpful. I’ve tried everything I can think of to make the overlay shadow to get lighter (just the shadow, not the text) when you hover over the post image, but it won’t work. I’ve tried both of these but don’t really know what I’m doing (just copying from other parts of the code):

    .et_pb_blog_grid .entry-featured-image-url:hover {
    background-color: rgba(0, 0, 0, 0.3);
    }

    .et_pb_blog_grid .entry-featured-image-url:hover img {
    -webkit-filter: opacity(30%);
    /* Safari */
    filter: opacity(30%);
    margin-top: -1px;
    }

    Any ideas?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Matt,
      It sounds like you are asking how to change the opacity of the overlay on hover. The code you want to be working with is the last snippet in the post:

      .et_pb_blog_grid .entry-featured-image-url::before {
      content: ”;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      }

      So you could simply add :hover into that like .et_pb_blog_grid .entry-featured-image-url:hover::before

      Reply
      • Matt Piccolo

        Thanks. I got it to work sort of. It gets lighter on hover when you hover around the edges of the image but not when you hover over the text in the middle of the module. Any quick fix to that?

      • Hemant Gaba

        Hi Matt,

        There is no snippet mentioned in the CSS that triggers any styles on hover. So could you please share the URL of the page so that I can look from where that hover is coming from and how can fix the hover text issue?

      • Hemant Gaba

        The issue is happening because you have given the before pseudo-class to the anchor tag and the z-index of that anchor tag and before pseudo-element is not defined but the container containing the text has a z-index of 1 so that is why it is being on the higher priority. Now increasing the z-index of the anchor tag or decreasing the z-index of the text container is not a solution here because the black overlay will come on the text if we do that.

        The best solution here for you is to remove the before and the before hover code that you are using and use the code given below instead:

        .pa-blog article:hover::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
        transition: all .5s ease;
        }
        .pa-blog article:before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.55);
        z-index: 1;
        }

        This will add the before pseudo-class to the whole article and that will remove the issue.

        Let me know if that helps. 🙂

      • Matt

        Yes, it worked great, thanks so much!

      • Hemant Gaba

        Great! I am glad to hear that.

        Let me know if you need any further assistance. 🙂

  22. Jona

    Worked brillantly! Thank you so much.

    Reply

Submit a Comment

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

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

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart