How To Make The Entire Divi Post In The Blog Module 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.

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.

Last updated Aug 31, 2021 @ 11:27 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

20 Comments

  1. Martin

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

    Reply
  2. Dany

    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!

    Reply
  3. Khubaib

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

    Reply
  4. Xavier

    Thanks Nelson, very useful!

    Reply
  5. Patrick Quirke

    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;
    }

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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!

      Reply
  6. Kara

    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;
    }

    Reply
      • Kara

        Hi there, I attached a screenshot of where the class is used on single posts.

      • Kara

        👍👍 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!

  7. Lukas

    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.

    Reply
  8. Johnny

    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????

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  9. Pavol

    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;
    }

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart