How to Add a 3rd CTA Button to Divi Theme
By default, you can have a maximum of 2 CTA buttons on a Divi module. However, what if you need 3 or more? There is a quick trick on how to do it and today I will explain to 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).
