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

This post may contain referral links which may earn a commission for this site

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

Ever wish you could click anywhere on your Divi Builder 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:

jQuery(function($){
  $('.et_pb_post_slider .et_pb_slide').click(function(){
    var url=$(this).find('.et_pb_more_button').attr('href');
    if (url) {
      document.location = url;
    }
  });
});

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".

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

7 Comments

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

    Thank you 🙂

    Reply
  2. 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
  3. "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

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

Ever wish you could click anywhere on your Divi Builder 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:

jQuery(function($){
  $('.et_pb_post_slider .et_pb_slide').click(function(){
    var url=$(this).find('.et_pb_more_button').attr('href');
    if (url) {
      document.location = url;
    }
  });
});

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".

Hundreds of new features for Divi
in one easy-to-use plugin

7 Comments

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

    Thank you 🙂

    Reply
  2. 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
  3. "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

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