Code by Day | Explore By Weekend

How To Make The Entire Divi Blog Module Posts Clickable Tutorial by Pee Aye Creative

How To Make The Entire Divi Blog Module Posts Clickable

This quick Divi Pro Tip in our blog module tutorial series will show you how to make the entire blog post area in the Divi Blog module clickable.

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.

33
Last updated Jan 3, 2021 @ 12:48 pm

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.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Martin
Martin
9 months ago

Thank you so much, this is a great/must-do UX improvement I believe! Cheers!

Dany
Dany
4 months ago

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!

Khubaib
Khubaib
2 months ago

Thank you. This trick also help me to apply the post link on entire column.

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart