Make Divi Slider Module Image into a Clickable Link

Ever wish you could click anywhere on your Divi Builder Slider module and be taken to the post, rather than having to click on the button. Now you can…

Method #1: Using Divi Booster – New Way

As of Divi Booster 2.3.9, there is a convenient option to add a Background Link URL to in the slider module's slide settings. This makes the slide background into a clickable link, and turns the cursor into a pointer when the user hovers over the slide background.

When Divi Booster is activated, you'll find the setting in the settings for your side, as shown:

This improves on the older method (below) in that you don't need to have a button on your slide.

Method #2: Using jQuery – Old Way

The following jQuery grabs the post URL from the slide button and sends you there when you click anywhere on the 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;
		}
	});
	$('.et_pb_post_slider .et_pb_slide .et_pb_more_button').closest('.et_pb_slide').css('cursor','pointer');
});

A couple of things are worth noting:

  • This will only make the slide background clickable on slides which have a slide button – as it gets the URL to link to from this button. To add a button to a slide, set the Button Text and Button URL in the Slide Settings.
  • 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 linked URL.

Method #3: Using Divi Booster – Old Way

A one-click implementation of the above method has been available since Divi Booster 2.0.1, under "Modules > Slider". It's still available if you need it. However, I'd recommend using the new Background Link URL option Divi Booster adds to the Slide Settings of individual slides as of Divi Booster 2.3.9.

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

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

44 Comments

  1. Awesome! A client asked if they could link on the slider, and I just have to enable this option. Thanks Dan!

    Reply
  2. Hi,

    I am using Divi Booster 2.7.2 and the "background link URL" is not showing in the slider setting. it was working before and stopped working. Any idea what is happening?

    Reply
    • fixed!

      Reply
  3. wow, this is a doozy. divi booster works as expected, namely, the background image url for a simple slider with slide background images only. but then we move the site to the host and even though the links are saved in the divi builder, nothing happens on the front end. currently, using Method #2 : Using jQuery – Old Way; https://divibooster.com/make-divi-slider-module-image-into-a-clickable-link/
    that works. any idea why we can't get it to work on the front end?
    live site (doesn't work): http://www.lakesnewsshopper.com
    dev site (works): http://www.blink26.com/test/lakesnewsshopper/

    Reply
    • Hi, the live site is running a newer version of Divi (3.1) which made some changes to the slider HTML which stopped the background image url feature from working. I've just released an update to Divi Booster (2.7.2) which takes these changes into consideration and should fix the issue. I hope that helps, but let me know if not. Cheers!

      Reply
      • yes, that fixed it! thank you very much.

        Reply
  4. Dan – http://chyr.co.uk/VDLCustomer/home-page-3/ – When clicking the learn button the transition to the anchor point is really smooth, when clicking the background image link it's really sharp and doesn't look right. Can we fix this at all?

    Reply
    • Hey David, I've already sent you a reply by email but I'll update here for everyone's benefit. I've added smooth scrolling to the "Background Link URL" option added by Divi Booster to the individual slides (in the slider module options). If the URL is given as a class or id (e.g. ".someclass" or "#someid") the link will now scroll smoothly. It isn't currently compatible with the old option to make all slide backgrounds into links when there is a button, so this option should be disabled – otherwise you just won't get the smooth scroll. I'll try to add smooth scrolling to the old feature too.

      Reply

Leave a Reply to dan Cancel reply

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