In this tutorial, you will learn how to create a call to action button in your Divi menu. A strong call to action on every page can be very powerful and get you more engagement with your website visitors. You can direct your visitors to a contact, quote or a landing page. You can even make it a phone number. You can see a live example here:
Step by step guide
Step 1
The first step you need to add a CSS class to the menu page that you want as a button.
in your WordPress dashboard navigate to Appearance > Menus
Add the CSS class cta_menu to the menu page.
If you don’t see the CSS class field then you need to enable it. You can do this as follow:
Go to the screen options (upper right corner) and check CSS classes.
Step 2
Add the following CSS in Divi > Theme options > Custom CSS or in your child theme CSS style sheet. If you don’t know how to create a child theme you can follow this tutorial.
/* ##### CALL TO ACTION MENU BUTTON ##### */
@media only screen and ( min-width: 981px ) {
.cta_menu a {
background-color: #2eb243;
padding: 15px 25px !important;
border-radius: 25px;
text-transform: uppercase;
color: #fff !important;
box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.1);
}
.et-fixed-header #top-menu .cta_menu a {
color: #fff !important;
}}To change the background color of the button you can change the color code in:
background-color: #2eb243;
To change the font color you can change the color code in:
color: #fff !important;
Excellent – just what a tut needs – a demo, and clear instructions – Thanks very much 🙂
Thanks Andy!
Great work Mark, love you layouts and tut.
Thanks a million Mark-just what the doctor ordered.
Keep ’em coming as your instructions as very clear and easy to follow. Thank you.
Thanks Mark, I love it.
Nice clear instructions (an area where so many others fail). Thanks.
Yes, easy indeed…
Will try to do it.
Thanks!
Do you know how to add javascript code (which generates every day changing data) in the header (secondary menu)?
Hi Eugene,
Sorry, I don’t know any java code that can do that.
Thanks Mark, very nice. But it doesn’t seems to show on mobile…?!
I only created this for desktop. But if you remove this:
@media only screen and ( min-width: 981px ) {
and
}
at the end then it will show up on mobile as well
Why can’t everything be this simple? You’re the best! 🙂
Thanks William
Thanks, Mark, very easy with clear instructions. I have an issue with a line going through the button due to the fact that there is an underscore line for the selected tab in the navbar.
Is there any way of removing this line?
I look forward to any suggestion you may have.
B
Hi Barry,
I can probably remove it. Do you have a link for me so I can take a look?
Hi Mark
Thanks for this tutorial on CTA button. I would love to see more tutorials from you.
Great stuff
This is the best website to learn Divi…thank you Mark, thamk you…bow, bow
Thanks, Adamu!
Hi Mark, thank you for an amazing tutorial! ? It’s simply perfect, but I’m having a small issue here – whenever the code is applied and I just arrive to the page – the button looks good. Once I’m trying to scroll the page down – the background colour+border drops down as well. Wondering what I’m doing wrong?
Hi Elena,
Do you have a link for me? Then I’ll have a look.
Thanks Mark for this tutorial, But it seems it does not display on mobile and tablet. I removed what you asked to remove but still it does not work.
Did you removed this line:
@media only screen and ( min-width: 981px ) {
and
}
at the end.
If so also clear your caches.
great! however on scroll it changes its color (when CTA page is opened)
http://take.ms/SPsvY
Excellent tutorial but this call to action button is not appeared on mobile screen. How to fix it?
Hey Mark! Thanks for this!
Any way to place the button on the top left hand side of the secondary menu
and not the right side?
Here’s a screenshot:
https://cl.ly/b2ba900deb77
We placed a graphic at the top left hand side using CSS, but it’s not as good
looking and effective as your method.
Thanks so much!
Sincerely, Leo
This will probably require some custom CSS
Is there a way to change the font size?
Hi Sarah,
yes add this line in the CSS .cta_menu a
font-size: 16px !important;
Change the fontsize number with the size you want.
Cant make it work
1) Created at custom link in my Main menu and the CSS class cta_button
2) Inserted the code:
/* ##### CALL TO ACTION MENU BUTTON ##### */
@media only screen and ( min-width: 981px ) {
.cta_menu a {
background-color: #ef4138;
padding: 15px 25px !important;
border-radius: 25px;
text-transform: uppercase;
color: #fff !important;
box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.1);
}
.et-fixed-header #top-menu .cta_menu a {
color: #fff !important;
}} in custon CSS
But its not colored (changed it to red red to match the top navi
Great Webly theme by the way 😉
Do you have a link for me?
Hi Benjamin,
You are meant to use cta_menu, not cta_button in the Menu custom link CSS area.
This is nice and all but the menu items are no longer vertically centered in the navigation m80
WOW, this is so nice – thank you!!
Would it be possible to use the button to activate an optin from bloom as well? Would be very cool 😉
Great job! Saved a lot of headache. Thanks 🙂