How to create a call to action (CTA) button in Divi menus

Divi

Would you like to highlight some element of your navigation menu with Divi?

The idea is to highlight one of the elements of your navigation menu to turn it into a button that attracts attention, that calls to action.

Add some additional CSS

The first step is to create the CSS code that will do the magic. To do this, as always, we will go to the Additional CSS section of the WordPress customizer, that is, in:

  • Appearance Customize Additional CSS.

Once there add the following CSS:

/* Divi normal CTA menu */ 
@media (min-width: 980px) {
.ctamenu {
padding: 0!important;
border-radius: 30px; /* change button border radius */
border: solid 2px #1f769d; /* change button border color */
transition: 0.3s;
background-color: #1f769d; /* change button color */
}
.ctamenu a{
color: #f4f4f4!important; /* change button text color */
padding: 10px 15px 10px 15px!important; /* change button padding */
}
/* Divi menu with CTA hover */
#top-menu-nav .ctamenu a:hover {
opacity: 1;
}
.ctamenu:hover {
border: solid 2px #fe8400; /* change hover border color */
background: #fe8400; /* change hover button color */
}
}Code language: CSS (css)

As indicated in the code comments, you can change the appearance to your liking (colors, spacing, button appearance, etc.). Play a bit with the values when you have done the next step…

Adds the CSS identifier to the menu

Once we have created the CSS we have to decide to which element of our menu we are going to apply it.

Without leaving the WordPress customizer go to the menus section and, first of all, make sure that the box in which to add CSS classes will be visible.

This is done in the gear icon in the menus section of the customizer, checking the “CSS Classes” option.

Divi menus extra settings

Then edit your navigation menu and open the element you want to customize, adding in the “CSS Classes” box the one we created in the code, which is ctamenu, as in the following screenshot:

menu with added css classes and CTA menu item

When you save the changes you will have a menu in Divi in which there will be one of its elements highlighted, converted into a nice menu that changes color when you hover the cursor, but above all that will serve as a CTA, to attract clicks and take your visitors where you want to direct them.

menu item on hover

How useful was this post?

Click on a smiley to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Skip to content