Learning how to add a CTA (or Call To Action) button to the Divi menu is a great way to catch a visitor’s attention and drive them to well…answer your call to action. This might be to request a quote, get in touch, or check out your collection of pet rocks, it really is up to you.
In today’s tutorial, we will show you how you can easily add a CTA button to your Divi Menu using just a little bit of CSS magic in under 7 minutes.
What is a Divi Menu Call to Action Button?
Good question!
A call to action button is a button that is placed on a website to get your user to perform a certain action. Now these action items might be to request a quote, schedule an appointment, or check out your menu, this is really up to you. When we talk about adding a call to action (CTA) button in the Divi Menu, it is usually a button that is placed either at the start of your Divi menu, or at the end.
Divi does not natively allow you to add a call to action button in the Divi Menu, so we need to use some CSS to transform a menu link, into a call to action button.
Take a look below.
Preview:
BEFORE
AFTER
Video Tutorial
Table of Contents
Difficulty
Easy
Time
10 Minutes
Setting it Up
Adding a Call To Action (CTA) to the Divi Menu
We need to do a little bit of work before we can add the CSS that will add a button to our Divi menu and we are going to want to make sure that we already have a menu assigned as the Primary Menu. We also need to add the link for our CTA, so let’s get to work.
Head over to Appearance > Menus
Make sure that your “Primary Menu” is selected
Add a New Custom Link by going to Add menu items > Custom Link
Set the URL to whatever action you want the user to do, we will set it to the contact page
Set Link text to “Get in touch“
Click Add to Menu
Save
Ok, so now if you take a look at your site on the frontend, you’ll see this new “Get in touch” link added to your Divi menu, but it looks no different than the other menu items and certainly won’t inspire any of your visitors into action.
We’ll enable ourselves to spice things up a bit by adding a class to the CTA we just added.
Check the box next to CSS Classes
Expand the Custom Link we added > CSS Clasess > Add the CSS Class de-menu-cta
Save
If you hastily saved and refreshed the frontend of your site you might be a little disappointed now, because hey, nothing changed! You are both right and wrong. The change we made by adding this class was 100% under the hood and we will use this in the next step to tell the CSS where it needs to go to make things look all button-ey.
Adding the CSS Code
Using CSS to turn our CTA Link into a CTA Button in the Divi Menu
With all the bones in place, it is time to kit it out with our CSS which will finalize adding a CTA button to our Divi menu. Since we will be applying this style throughout our site, we will add the code to the Divi Theme Options.
Go to Divi > Theme Options > Custom CSS
Paste the Code below in the Custom CSS Box
Save
If you go and take a look at the front end of your site, you’ll see that our CSS code has turned that uninviting text into a flashy Call to Action button that has a fun scale effect on hover. Now you might be happy with the way it looks, but keep going to the next section if you want to make some minor changes.
Polishing the Design
Customize the Call to Action Button in our Divi Menu
Changing the look of our brand new CTA button in our Divi menu looks more intimidating than it really is because we added a good amount of comments in the CSS code that will guide you on making some easy changes.
Take a look at our code again.
On lines 5 and 6 respectively, you can easily change the colors of the text and button background.
On line 7 you change the text size, and on line 8 you can change the shape of the button borders.
All you need to do is go back to your Divi Theme Options and change those lines to mix things up a bit.
If you want to take things a step further like adding a wiggle animation, for example, check out our tutorial How to add attention-grabbing pure CSS Animations to your Divi Modules.
You know what to do…
Conclusion
Adding a CTA button to our Divi Menu was an easy change with a big result. It is a fantastic way to draw your users toward a desired action like signing up for your newsletter or maybe checking out your blog. Whatever you use it for, we’d love to hear your feedback!
Please let us know what you thought in the comments below, we are always looking for ways to engage and enrich our community!
Until next time 😁
My button looks perfectly fine on iPhone mobile, but on Android phones the button covers part of the logo.
Website: Staging2.keresafortexas.com
Disregard, it wasn’t your button code, it was a code for showing the button in the mobile heading bar.
Thanks for sharing this 🙂
One minor tweak… if the button text is long enough to wrap onto a second line on mobile, the default line height (9px) is too low – the lines overlap each other. I fixed it with this:
#mobile_menu .de-menu-cta a {
line-height: 1.3em !important;
padding-top: 9px !important;
padding-bottom: 9px !important;
}
It increases the space between the lines, but reduces the top / bottom padding to avoid an increase in the space above and below the text.
Cheers!
Thanks, Dan. Awesome comment and appreciate the code for others to use
Great tutorial. How can I get the button to display on mobile?
So sorry for the delay, missed this comment 😀
The way you would do it on mobile would be in the theme customiser I am afraid – or are you wanting the button in the menu that opens?
Even though you have !Important next to the color it does not seem to change the font color using this CSS code.
Sorry for the delay here – missed the comment.
Probably too late, but if you send me a link to the site i could check it and let you know the CSS to use
Hi there. Thanks for the tutorial. My button sits on the bottom of the header and I have tried changing the menu padding to no avail. https://aname.tech Can you please show me where to change the padding to get the button go up some so it’s centered vertically?
I have the same issue, did you fix it? The top of the colored button is aligned with the top of the other menu items. We need the top of the button TEXT to be aligned with the top of the other menu items. See https://stilltinnitus.com
Sorry for the delay.. I see no button on the site, do you need help with this still?
Hi there. Thanks for the tutorial. My button sits on the bottom of the header and I have tried changing the menu padding to no avail. https://aname.tech Can you please show me where to change the padding to get the button go up some so it’s centered vertically?
How would you change the background color when the link is active? I’m really stuck trying to find the correct CSS!
I ran into the same issue where the text keeps it’s color based on the original menu. This seems to be the case across several tutorials.
Hi Shanne
I ran into the same problem 🙁 – and I have solved it 🙂
If you set an CSS ID to your menu modul (advance tab) eg “menu-cta” then you can add that ID to your css code like this:
#menu-cta .menu-cta-button a {
background-color: #008491; /* Change button background color here */
color: #fff !important; /* Change button text color here */
}
And the rest of the css code of course 🙂
Hi, thanks for this tuto, it’s great! Unfortunatly, the texte keeps his colors (on my case dark, and green when we are on the page) and it could be nicer in white. I don’t anderstand why it doesn’t want to turn white, it’s white with an important on your code … Strange …
Hi Rashel
I ran into the same problem 🙁 – and I have solved it 🙂
If you set an CSS ID to your menu modul (advance tab) eg “menu-cta” then you can add that ID to your css code like this:
#menu-cta .menu-cta-button a {
background-color: #008491; /* Change button background color here */
color: #fff !important; /* Change button text color here */
}
And the rest of the css code of course 🙂