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 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.
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.
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.
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.
Hello, just for info I miss info that you need to add class .pa-blog on blog module.
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.
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!
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.
It wil be quite useful to me! Love it! Thank you!
I am glad, I hope you can put this to good use!
Not working for me…
Edit: working now, worked when I added .pa-blog class to the blog module
Great, glad to hear you got it working!
Thanks, updated the post 🙂
I get a bunch of errors with this code
Okay, but you didn’t say where you are putting it and the errors are. My code is fine, so let me know.
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
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
Hi Josef,
It still works for me. Could you share a link to your site? Is it up to date?
I updated the snippet in the tutorial, it should work now.
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
What do you mean “isn’t added”? Couldn’t you just add the code above to the live site?
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!
Hi Sarah,
It still works for me, could you show me a link?
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 🙂
I updated the snippet in the tutorial, it should work now.
Thank you, it works perfectly! 🙂
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 »
Hi Parham,
It works for me, and it looks fine in your link, so I’m not sure what you mean.
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.
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
It is hard for me to know since I can’t replicate it, but try this and reply back:
I updated the snippet in the tutorial, it should work now.
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
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:
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?
How strange, no idea why the module would hide. Try the updated code snippet in the tutorial to fix the original issue.
The new code has fixed it! Thanks for your fast response on this!
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.
Hi Jordan,
That is in the Divi Blog module borders settings 🙂
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?
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;}
Excellent guide, I congratulate you on your Blog, they are knowledge pills, thanks for sharing.
Thank you Luis, I’m glad you are enjoying our content!