Divi Tutorial – create a full width call to action button

May 18, 2016

At the bottom of each page on yatesdesign.com.au I’ve got a button that reads “Ready to launch a new project? Let’s work together →”. It’s a full width button that changes colour on hover and I get asked about it often so here’s a tutorial on how I did it.

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:

Here’s a look at what the finished product looks like:

Ready to launch a new project? Let’s work together 

OK! On to the tutorial.

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:


zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

Step 4

Add a code module and paste the following:

<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>
That’s it! I’d love to hear about any successes or failures you have with this. Email me at hello@yatesdesign.com.au.

Thanks for reading!

If you found this post helpful you can show your appreciation in any of the following ways:

Send a tip

$
AUD
GBP
EUR
Powered by Stripe

Hire me!

No matter how big or small your project is, I’d love to hear about it. I’ll do my best to help you and if I can’t I’ll try to point you in the right direction.

Ready to launch a new project? Let's work together 

Pin It on Pinterest

Share This
Like this post? Subscribe!

Like this post? Subscribe!

Sign up to the Yates Design newsletter & receive news, tips & tricks about how to improve the online presence of your business.

You have Successfully Subscribed!