Hey, today we are here with a new post. The main objective of this post is to share the information for creating the entire section clickable. We can assign any link to the entire Divi Section and can also redirect them to anywhere.
Follow the Simple Steps for Making the Divi Section Clickable
- Open the setting section as shown in the below image.
- Now open the Advanced Section and assign “my_clickable” to the CSS Class field.
- Now navigate to the Dashboard >> Divi Theme Options >> Add code to the < head > of your blog>> and here paste the below code in this field.
|
1 2 3 4 5 6 7 |
<script> jQuery(document).ready(function(){ jQuery(".my_clickable").on('click', function(){ window.location = "PLACE THE REDIRECTING URL"; }); }); </script> |
Please don’t forget to replace PLACE THE REDIRECTING URL text with the desired redirecting URL in the above javascript code.
- Now open DIVI >> DIVI THEME OPTION >> CUSTOM CSS and assign the below code in the custom CSS field.
|
1 2 |
.my_clickable { cursor: pointer;} |
This is all for making the entire section clickable.Please refer the below gif image:
Feel free to comment below for any other help.
Hello, Abishek,
thanks for the fine hint. But how do I go about if I have e.g. a dozen sections that I want to make clickable, if I have to put the redirecting URL in the JQuery script?
Thanks,
Olaf
You can assign different classes to those sections and assign different URLs
Thanks works even on text module.
You’re Welcome 🙂
That is very good. How can we make it open in a new tab?
Hi!
I love your tutorial! But it turns out the whole page on which I used your code turns white on the mobile version. Do you know a way to resolve this problem?
Works perfect, but conflicts tottally with theme and plugins, and most of the contents in the pages simply disappear.
Is there an easy way to fix this conflict?
– Theme: DIVI
– Plugin conflicted: Essential grid
how to make it work on mobile?. on desktop it works like a dream