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.
#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.
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.
Hi Mark,
Yes that’s because you are targeting the .et_pb_blog_grid, so just remove the _grid part or remove the whole thing and it will work.