Enhancing your website's navigation with a prominent call to action (CTA) button can significantly improve user engagement and conversions.
In this article, we will show you how to add a custom call to action button to Divi's menu.
Whether you want to highlight a special offer, encourage sign-ups, or direct visitors to an important page, our step-by-step guide will help you create and integrate a standout CTA button seamlessly into your menu.
Learn how to customize the button’s appearance, position it effectively within your menu, and ensure it grabs the attention of your visitors, all using Divi's powerful tools and settings.
Create the button and add it to the main WordPress Menu
Go to WordPress Dashboard → Appearance → Menus
Edit the WordPress Menu which has been set as the Primary Menu
Use the Custom Links option to add a new Menu item
Set the URL of the page that needs to be opened when the button is clicked
Set the Link Text. This is going to be the text that the button displays
Set the custom CSS class of cta-button to the Menu item
Note: if you are not seeing the CSS Classes field, follow these steps:
Click on the Screen Options button
Ensure that the CSS Classes option is checked
Style the new CTA button
Go to Divi → Theme Options → General → Custom CSS
Paste in the following CSS code:
.cta-button {
border: 1px solid red;
border-radius: 19px;
background: blue;
box-shadow: 0px 0px 12px 3px violet;
transition: all .3s 0s;
}
.cta-button a {
padding: 18px !important;
color: white !important;
}
.cta-button:hover {
transform: scale(1.1);
transition: all .2s 0s;
}
The result will be as shown in the screenshot below:
