Click Anywhere On The Divi Blog Post
By default, the Divi Blog Module makes the featured image, title, and read more link clickable. But what if you want the whole thing to be a link? I think this is a very important feature, especially if you are following our Divi Blog module series and want to create similar designs.
This solution enables you to target each blog article in the feed and adds a pseudo class to it which is full width and full height, which essentially makes the title cover the entire article. This trick can be seen in action on our main blog page or any of our blog category pages.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Making The Individual Divi Blog Posts Clickable In The blog Module
This feature is not available in the Divi Builder, so we need to create a workaround. I am happy to say that with a little creativity and some hacking we can accomplish this with a tiny snippet of CSS! It’s very easy to do, so go ahead and try it.
What does the snippet do?
This snippet does two things. The main thing it does is takes the title which normally links to the post and creates an invisible area the entire width and height of the blog post. So it technically is spreading the title link out over the whole thing! Pretty cool, right?
Since the entire blog post is now clickable, we need the mouse cursor to indicate that. So now when you hover over any part of the individual blog posts, the mouses changes to a “hand” or pointer to indicate that the area is a link.
Where To Paste The Code
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.
/*add a neceassry position to the blog posts*/
.et_pb_blog_grid .et_pb_post, .et_pb_posts .et_pb_post {
position: relative;
}
/*make the title link spread over the entire post*/
.et_pb_blog_grid .et_pb_post .entry-title a:after, .et_pb_posts .et_pb_post .entry-title a:after {
position: absolute;
display: block;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
}
/*change the mouse cursor into a pointer*/
.et_pb_blog_grid .et_pb_post:hover, .et_pb_posts .et_pb_post:hover {
cursor: pointer;
}Apply This To Only One Module
The way the code is written, this will affect any blog module on your site. Most of the time that is perfect. But if you want this to only apply to a certain Blog module, you can simply give your blog module a custom class name in the Advanced tab Custom CSS toggle in the CSS Class input field. Then replace “.et_pb_posts” with your custom class name in the snippet.
NOTE: This same process to make code apply only to a specific module applies to any tutorial or CSS snippet. Just remember to replace the main module CSS class with your own custom class.
Thank you so much, this is a great/must-do UX improvement I believe! Cheers!
Hi Martin,
You are welcome! I almost forgot about this one, I believe I will make a video for it!
Hi, I have tried to use post format in Divi without success. How could I put the icon of each post format on the thumbnail. That would be enough for me. Thank you very much for your tutorials, they are very helpful!
I’m not sure, Dany, I never tried that.
Thank you. This trick also help me to apply the post link on entire column.
You are welcome, glad to help!
Thanks Nelson, very useful!
Hi Xavier, glad you found it helpful! Thanks for sharing!
I think you need to be more specific with the code by adding .et_pb_blog_grid before. Otherwise when you click through to the blog post you will see when you hover over the content you have the pointer showing as if the whole blog post is clickable.
.et_pb_blog_grid .et_pb_post {
position: relative;
}
.et_pb_blog_grid .et_pb_post .entry-title a:after {
position: absolute;
display: block;
content: “”;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.et_pb_blog_grid .et_pb_post:hover {
cursor: pointer;
}
Hi Patrick,
Kara also mentioned this, and I am so confused. .et_pb_post does not apply on single blog posts. What am I missing? But sure, being specific is always good!
Thank you for sharing! The .et_pb_post class also affects the single post page though (with the cursor it looks like you can click on the main post content). I added .et_pb_blog_grid (grid layout) and .et_pb_posts (fullwidth layout) in front of it so it’s only targeting the Blog module. So for example:
.et_pb_blog_grid .et_pb_post:hover, .et_pb_posts .et_pb_post:hover {
cursor: pointer;
}
Hi Kara,
I’m not sure what you mean because .et_pb_post does not affect actual single blog posts. But I’m glad you got it solved!
Hi there, I attached a screenshot of where the class is used on single posts.
Oh okay, never knew that! It does not do it for me, but I will update the code to be more specific, thanks!
👍👍 Don’t forget ‘.et_pb_blog_grid’ too (.et_pb_posts applies to the fullwidth layout you select in the Blog module options. If you select Grid, it will use the .et_pb_blog_grid as the class instead).
Thanks again for sharing these code snippets. Super helpful!
Hey guys, I don’t know about you, but for me using the provided snippets in my child theme, the after element and link is not applied. Still only the title clickable. Maybe related to latest divi update 4.9.0 ?
Looking forward to your feedback and update.
Hi Lukas,
Sorry about that, it is working now!
Hi great stuff! I used your button code and I also added this code….Im having an issue. I had the button set up to show the arrow icon on hover. But when I added the code from this video it no longer shows the arrow icon on hover. How do I fix that????
Sounds like your other code is not specific enough, most likely a conflict with the pseudo class “:after” and in that case just check for that and make it mroe specific.
Hi Nelson, I have some issues with this code. I am using your code from this tutorial: https://www.peeayecreative.com/how-to-move-the-divi-blog-title-text-and-button-over-the-image/
and want to make whole image clickable as you mention above.
Cursor changed on hover, but link wont work – clickable are only titles and meta.
I used your pa-blog class for module – maybe it is my problem?
My whole custom css for 2 blog modules is:
/*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;
}
/*projekty obrázky 2 stlpce */
.stlpce .entry-featured-image-url {
padding-top: 60.50%;
display: block;
}
.stlpce .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
.pa-blog article:before{
content: ”;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(44,130,135,0.54);
z-index: 1;
}
.pa-blog article:hover::before {
content: ”;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.0);
transition: all .2s ease;
}
/*projekty obrázok spodný široký*/
.siroky .entry-featured-image-url {
padding-top: 29.50%;
display: block;
}
.siroky .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*add a neceassry position to the blog posts*/
.et_pb_blog_grid .et_pb_post, .et_pb_posts .et_pb_post {
position: relative;
}
/*make the title link spread over the entire post*/
.et_pb_blog_grid .et_pb_post .entry-title a:after, .et_pb_posts .et_pb_post .entry-title a:after {
position: absolute;
display: block;
content: “”;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
/*change the mouse cursor into a pointer*/
.et_pb_blog_grid .et_pb_post:hover, .et_pb_posts .et_pb_post:hover {
cursor: pointer;
}