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>Related Post: Adding JavaScript / jQuery to Divi.
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".
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;
}
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!
I dont think this works anymore – September 2023
Hey John, I've just replied to your follow up comment. The code in the post has been updated with your fix. Thanks again!
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;
}
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 :)
I would love to try this out, but where do you put the jQuery code?
Thank you :)
Hi Sophie, this post explains how to add the jQuery code to Divi:
https://divibooster.com/adding-javascript-and-jquery-to-the-divi-theme/
I hope that helps!
:)
Thank you so much Dan.
Hi there! Can't find "Show Read More Button" option…
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!
"You must have the “read more” button enabled for this to work on any given slide" How do you enable the "read more" button?
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.