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.

Text Over Divi Blog Featured Image
If you like to style and customize the Divi blog module, be sure to check out the many tutorials we have been doing in our Divi Blog tutorials. This tutorial builds on some of the others. It also was a request, and I’ve been planning this for a long time. I think it’s great and really looks nice! So let’s get to it. This tutorial will do some tricks and move the Divi Blog module text over top of the featured image.

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!

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.

Become a member of our Divi Adventure Club!

Thanks for watching!

[KatlynFountain]

This is great! Is there a way to do just the excerpt and button inside the image and then have the title and meta information still outside (preferably on the top if possible)? Really appreciate it!!

[carlcyphers]

Nelson, EXCELLENT tutorial !!! Been waiting for a tutorial like this.

[mdabullais]

Your channel is better than many others.

[mrkbjames]

yeah! now you're talking my language "blog modules" I can't wait for more.

(FEED ME MORE!) :>)

[mrkbjames]

ME: What is it going to do?
NELSON: you'll see!
ME: OK :>)

[RikGierman]

Hi Nelson, Is this also possible combined with your "full width" method using the column count tutorial? I use that on my blog and woul'd like to do the same in that view

[mujeebrathore]

Hi Nelson, i have used it and really worked for me but i want to have hover effects to change color on hover. and also some animations. please help me in this regard

[richardlill-dv]

Hi im using this but Iwant the entry title white over the image like this. I just want the text to sit on the bottom with maybe a 50px padding . However i cant get it to work on a 2 col and a three coloumn

any help would be great ? thanks

[pamcho]

Hey, Nelson... Why could be that it doesn't work for me? Any Divi update maybe? everything works except the text, etc... is below the pic.

[doeyehof]

Very useful tutorials Nelson! Thanks a lot! I'm a way better designer/developer thank to you

[mayureshwarang]

Loved it ❤️!!!
Just one question can we add that code in the code module on the same page after the blog module?

[WILLIAMANZAI]

Hi Nelson: I did the job as it appears in the video and it turned out excellent. But when I did it with your child theme it didn't work. I think I did something wrong. It would be interesting to complement that information with a tutorial using your child-theme. I would also like to know how I can change the height of the image of the posts in this tutorial. Thanks for your information. It really helps to stay motivated with Divi.

[MRSasory]

I wish to make it on woo 😍
And make more video specially about woo design with divi 😍

[gidaralawle]

I have a sticky footer, and every time I scroll the text is above it, do you have any solutions?

[PabloTabo]

it doesnt work for me, it shows how i want it in the editor, but not in the page

[guilhermearaujopinheiro]

how it is possible to show the title of blogs to alphabetical order?

[iamrkjha]

Awesome video sir, I'm your really old viewer. i want to live chat to you. Please give me your any social media where i get in touch with you.