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 by leaving a review on the Yates Design Facebook page:

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.

Drop me an email at hello@yatesdesign.com.au to discuss.

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

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!

Pin It on Pinterest

Share This