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.

16

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

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

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

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart