The technique I use is to add a button module to the column I want to turn into a link & then position that button absolutely so that it covers the entire column. I’ve used this method on a few other layouts as well, like Blurb Cards, Image Module Hover Effect & Blurb Module Hover Effect.
Here’s a layout file you can import into Divi using the portability feature:
Ready to launch a new project? Let’s work together →
Step 1
To start, add a row with 1 column & then use these settings:
- Enable “Make This Row Fullwidth:”
- Enable “Use Custom Gutter Width:” & set it to “1”
- Set “Custom Padding” to 0
- Enable “Keep Custom Padding on Mobile:”
- In the Custom CSS tab for the row, set the CSS Class to “fullwidth-cta”
Step 2
Add a text module & enter the text you want to show on the button.
Step 3
Add a button module and enter a URL and a description. The description will be hidden so it doesn’t matter what you put here. In the Custom CSS for the button module enter this into the Main Element section:
[css] zoom: 1; filter: alpha(opacity=0); opacity: 0; position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; [/css]
Step 4
Add a code module and paste the following:
[html] <style> .fullwidth-cta, .fullwidth-cta .arrow { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .fullwidth-cta:hover { background: #4CD964; } .fullwidth-cta:hover .arrow { padding-left: 5px; } </style> [/html]
Thanks for reading!
If you found this post helpful you can show your appreciation by leaving a review on my Google Business listing.
If you need help…
I am available for hire! No matter how big or small your project is, I’d love to hear about it. All quotes are obligation free.