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.
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_post {
position: relative;
}
/*make the title link spread over the entire post*/
.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_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_post” 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!