So, a while back I showed you how to Create An Image That Scrolls Up When You Hover Over It. This is basically done by scrolling the background image of a text module. Well, a few folks have asked how to make the whole text module clickable, so in this tutorial I’m going to show you how to do just that, in other words, hyperlink the whole text module.
In the example below, you’ll see that as you move your mouse pointer over the image, it changes to the same pointer used when you hover over a hyperlink and if you click on it, it’ll take you to the Free & Premium Layouts page of this site.
The next step is to add a CSS class name hyper_this to the text module that you want to make clickable. You will need to add this class name to the CSS Class field which you’ll find under the Advanced tab of the Text Module. If you’re using this tutorial together with the scrolling image tutorial, you’ll already have the class name slippery here. Add a space and then the class name hyper_this. Leave the class name slippery out if you aren’t going to do the scrolling background thing.
Now, head to the Advanced tab of the Text Module and add the following CSS to the Main Element.
This will make your mouse pointer change to indicate a link.
Wrapping It Up
And there you have it! The whole text module can now be used to link to another page, site, or anchor. You could actually use the logic in this tutorial to make almost anything in Divi clickable, so go ahead and experiment. And if you’re looking for a great and free playground, give Pilvia.com a bash.
Support Divi Notes
Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.