Call or text
0421 137 610


From the blog

Divi Tutorial – create a full width call to action button

May 18, 2016

At the bottom of each page on 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 !important;
top: 0;
left: 0;
width: 100%;
height: 100%;

Step 4

Add a code module and paste the following:

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

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.