Make Divi Post Slider Module Image into a Clickable Link to the Post

Written by Dan Mossop

Ever wish you could click anywhere on your Divi Post Slider module and be taken to the post, rather than having to aim for the "read more" button? Now you can…

The following jQuery grabs the post URL from the read more button and sends you there when you click anywhere on the post slider:

<script>
jQuery(function($) {
  $('.et_pb_post_slider .et_pb_slide')
    .css('cursor', 'pointer')
    .click(function() {
      var url = $(this).find('.et_pb_more_button').attr('href');
      if (url) {
        document.location = url;
      }
    });
});
</script>

A couple of things are worth noting:

  • You must have the "read more" button enabled for this to work on any given slide – as it gets the post URL from the read more button. I hope to be able to remove this limitation in the future, but hopefully this will still prove useful to some of you in the meantime.
  • Other links in the slider (category, author name, etc) still remain clickable. When the user hovers over these links the pointer will change to a cursor. Everywhere else will, if clicked, lead to the post.

This feature is available in Divi Booster 2.0.0 and upwards, under "Modules > Post Slider".

Check out Divi Booster

Unlock the full potential of your Divi Post Slider with Divi Booster. This feature-packed plugin allows you to make your slider image into a clickable link, redirecting users directly to the post. It's just one of the hundreds of enhancements included in Divi Booster to streamline your Divi experience.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

13 Comments

  1. I thought it wasn't working… but that's because the mouse doesn't change when you hover over the image – so you don't know the entire image is clickable …. added this css so it was apparent you can click anywhere to actually "read more"

    /*change the mouse cursor into a pointer on slider post*/
    .et_pb_post_slider:hover {
    cursor: pointer;
    }

    Reply
    • Hey John, nice catch – thanks for pointing this out. I've updated the code above to set the cursor. To save having two blocks of code to install, I've just modified the jQuery code to set the necessary CSS, but your standalone CSS, of course, works just as well. Cheers!

      Reply
  2. I dont think this works anymore – September 2023

    Reply
    • Hey John, I've just replied to your follow up comment. The code in the post has been updated with your fix. Thanks again!

      Reply
  3. you can make the button not visible with css and the trick works….

    body #page-container .et_pb_section .et_pb_post_slider_0_tb_footer.et_pb_slider .et_pb_more_button.et_pb_button {
    display:none !important;
    }

    Reply
    • Hey pete, thanks for sharing that. Yes, hiding the button like that won't affect the code's ability to grab the URL as the button is still technically in the page (unlike when you disable in the module settings). Cheers :)

      Reply
  4. I would love to try this out, but where do you put the jQuery code?

    Thank you :)

    Reply
  5. Hi there! Can't find "Show Read More Button" option…

    Reply
    • Hey Alex, which version of Divi are you using? In the latest version, it can be found in the Post Slider settings, on the "Content" tab. Scroll down on this tab and you'll see an "Elements" subheading, and the "Show Read More Button" setting is the 3rd item below that sub heading. If you still can't see it, perhaps you could send me login details for the site (using the contact form linked in the header) so that I can take a look for you and see if I can figure out what's going on. Thanks!

      Reply
  6. "You must have the “read more” button enabled for this to work on any given slide" How do you enable the "read more" button?

    Reply
    • Hi Kim,

      You can enable the "read more" button from within the Post Slider module's settings. If you're on a recent version of Divi you'll find a "Show Read More Button" setting on the "Content" tab (under "Elements"). Set this to "Yes" and the "read more" button will show up on the post slider. Divi Booster will then be able to obtain the post URL from this button and apply the link to the full slide background.

      I hope that helps / makes sense, but let me know if you are still unable to get it working.

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

Mute YouTube Videos by Default in the Divi Video Module

In the Divi Video Module, starting your YouTube videos muted by default can create a more user-friendly browsing experience on your webpage. It is particularly beneficial for reducing distractions, enhancing visitor engagement, and providing a seamless content preview...

Autoplay Videos in Divi Video Module

Enabling videos in your Divi video module to start playing automatically can enhance both the site's design and user engagement. To ensure full compatibility with browser requirements, such as Chrome's autoplay policy, it's often necessary to start your videos muted...

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

Random Divi Posts