Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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.

View The Live Demo

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.

jquery 01

 

2. Go to the Custom CSS tab and assign the following class: mp_s_clickable

jquery 02

 

 

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.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest