Code by Day | Explore By Weekend

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.

#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
16
Last updated Jan 11, 2021 @ 5:57 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

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
43 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mark
Mark
5 months ago

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.

Mont
Mont
4 months ago

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.

David
4 months ago

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

Mercy
Mercy
3 months ago

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!

FireShot Capture 072 - NEW Insights - Data Driven - www.datadriven.works.png
Elisandro Borges
2 months ago

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

Wouter
Wouter
1 month ago

Not working for me…

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

Last edited 1 month ago by Wouter
Streater
1 month ago

I get a bunch of errors with this code

Streater
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

Josef Průša
Josef Průša
1 month ago

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

Last edited 1 month ago by Josef Průša
william Brown
1 month ago

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

Sarah
Sarah
1 month ago

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!

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

Sarah
Sarah

Thank you, it works perfectly! 🙂

Parham Shafti
1 month ago

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

2020-12-11 at 14.33.png
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
Wouter
Reply to  Parham Shafti
29 days ago

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

Tom
Tom
30 days ago

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

before-and-after.jpg
Tom
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?

Tom
Tom

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

Jordan Mason
Jordan Mason
24 days ago

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.

Jordan Mason
Jordan Mason
Reply to  Jordan Mason
23 days ago

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?

Luis
Luis
11 days ago

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

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 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart