Code by Day | Explore By Weekend
How To Move The Divi Blog Title Text 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 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 begginging and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code the the < head > of your blog" code area.

<script>
	(function ($) {
		$(document).ready(function () {
			$(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 And Customize The Divi Blog Read More Button Tutorial by Pee Aye Creative
5

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mark
Mark
4 days 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.

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart