By default, you can have a maximum of 2 CTA buttons on a Divi module (e.g. Fullwidth Header module). However, what if you need 3 or more? There is a quick trick on how to do it and today I will explain you how.

 

 

So let’s say I have the fullwidth header module on the top of my homepage and I want to have 3 CTA buttons in it. You can add the details for the 2 of them in the General Settings of this module. You can enter your Button #1 Text and URL (and same for Button #2). However, to add a third CTA button, you will need to do the following:

Into the Content area of your module add the following code:

 

<a href="Your URL" class="et_pb_more_button et_pb_button third_button">Button Text</a>

 

Replace “Your URL” with your desired target link for this button and “Button Text” with your button’s text.

NOTE: If this code doesn’t work, try replacing the “” characters in the code and write them manually. They sometimes get changed to ”” or ¨¨ and that is causing issues.

So this code will add another CTA button to your Divi module, but it may not be aligned well with the first two CTA buttons, so you may want to do some tweaking to it by adding a custom CSS code to your Divi theme options field (or your child theme’s stylesheet.css file). You can try the following code (and play with the 45% width value):

 

@media (min-width: 981px) {
.et_pb_fullwidth_header_container.center .header-content {
width: 45% !important;
}
.header-content .third_button {
float: left;
}
}

 

For some more help with aligning this third CTA button, you can check my thread on the ET support forum: https://www.elegantthemes.com/forum/viewtopic.php?f=187&t=622036 (Note: you need to be logged into your ET account to view it).

Also, you may want to style this third CTA button to look like the other 2 ones. If you want to make it look just like e.g. your first CTA button, you can use the Chrome browser’s Inspect Element feature. Just right-click on your CTA button on your live website and choose “Inspect”. Then in the right column you should see some styling settings (like you can see on the screenshot below). In FireFox this feature is called the Debug Mode. Browsers have these features for developers like us.

 

 

Finally, you will just need to customize your CSS code and add it to the Divi theme options custom CSS field (or to your child theme’s stylesheet file). The code could look like mine below:

 

body #page-container .et_pb_section .et_pb_fullwidth_header_0 .third_button.et_pb_button {
border-color: rgba(0,0,0,0);
border-radius: 1px;
letter-spacing: 1px;
font-size: 17px;
text-transform: uppercase !important;
background-color: rgba(0,159,227,0.52);
}

 

That should do the trick. And if you need some more basic advice on how to style the Divi CTA buttons, you might like to check out my other tutorial on how to create animated CTA buttons with Divi.

I hope you will find this small trick helpful.

For more Divi tricks like this one, you can subscribe to my newsletter.