I have been tinkering around with jQuery and am finding so many fun and easy things to do with it.
Recently someone asked if they could make an entire Divi Section link to another url. It’s not a common request and may not be used too often but I thought it was a great opportunity give you a small & simple jQuery project so that you can see just how easy it is.
So in this tutorial I am going to show you how you can make a section clickable and how to send the user to another url when they click on it.
Let’s Get Started
Creating the Modules
1. The first thing we are going to do is go to the section you want to be clickable and open the Section Settings.
2. Go to the Custom CSS tab and assign the following class: mp_s_clickable
Once you have added content to the section, update the page and move on to the next part.
Adding The jQuery
3. Go to “Divi Theme Options > Integration > Add code to the < body > (good for tracking codes such as google analytics)” and paste this jQuery. Be sure to update the url with the url you want to send people to when they click on it.
<script> // jQuery Send On Click $(".mp_s_clickable").on('click', function(){ window.location = "http://www.google.com/"; }); </script>
Adding The Custom CSS
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)
Add this CSS to give the section a cursor pointer on hover.
/*------------------------------------------------*/ /*------------[JQUERY SEND ON CLICK]--------------*/ /*------------------------------------------------*/ .mp_s_clickable { cursor: pointer;}
And that’s it.
This can be used for anything that does not allow you to natively add a link. In fact there are probably a number of other applications this can be used for.
If you used this on one of your projects, please share a link below so we can see how you used it.
Have fun!
Well, that’s all for now. I hope you find this article useful.
Great.
Now it sounds so easy with yours explanations.
Thank you very much.
My pleasure
Hi,
Thanks for this snippet.
I tried your code but it didn’t work until I modified it as explained her:
https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/
Thanks for sharing Isaac. This might come in handy for someone else who might have had a similar problem as you.