How to create a call to action button in the menu

by | Apr 11, 2018 | Divi tutorials | 29 comments

How to create a call to action button in your menu

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.

Add CSS class

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

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;

Join today

Free Membership

Sign up for a Free membership and get access to this and all other free Divi layout packs, cheat sheets, exclusive discounts and much more.

29 Comments

  1. andy

    Excellent – just what a tut needs – a demo, and clear instructions – Thanks very much πŸ™‚

    Reply
    • Mark

      Thanks Andy!

      Reply
  2. Atif

    Great work Mark, love you layouts and tut.

    Reply
  3. Tom Roche

    Thanks a million Mark-just what the doctor ordered.
    Keep ’em coming as your instructions as very clear and easy to follow. Thank you.

    Reply
  4. Derek

    Thanks Mark, I love it.

    Reply
  5. Brett

    Nice clear instructions (an area where so many others fail). Thanks.

    Reply
  6. Eugene

    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)?

    Reply
    • Mark

      Hi Eugene,

      Sorry, I don’t know any java code that can do that.

      Reply
  7. Herman

    Thanks Mark, very nice. But it doesn’t seems to show on mobile…?!

    Reply
    • Mark

      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

      Reply
  8. William

    Why can’t everything be this simple? You’re the best! πŸ™‚

    Reply
    • Mark

      Thanks William

      Reply
  9. Barrie

    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

    Reply
    • Mark

      Hi Barry,

      I can probably remove it. Do you have a link for me so I can take a look?

      Reply
  10. Shane Paulsen

    Hi Mark

    Thanks for this tutorial on CTA button. I would love to see more tutorials from you.

    Great stuff

    Reply
  11. adamu musa

    This is the best website to learn Divi…thank you Mark, thamk you…bow, bow

    Reply
    • Mark

      Thanks, Adamu!

      Reply
  12. Elena

    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?

    Reply
    • Mark

      Hi Elena,

      Do you have a link for me? Then I’ll have a look.

      Reply
  13. Segun Alalade

    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.

    Reply
    • Mark

      Did you removed this line:
      @media only screen and ( min-width: 981px ) {

      and

      }

      at the end.

      If so also clear your caches.

      Reply
  14. Karen

    great! however on scroll it changes its color (when CTA page is opened)
    http://take.ms/SPsvY

    Reply
  15. Pranav

    Excellent tutorial but this call to action button is not appeared on mobile screen. How to fix it?

    Reply
  16. Leo

    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

    Reply
    • Mark

      This will probably require some custom CSS

      Reply
  17. Sarah

    Is there a way to change the font size?

    Reply
    • Mark

      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.

      Reply
  18. Benjamin Wulff

    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 πŸ˜‰

    Reply
    • Mark

      Do you have a link for me?

      Reply

Submit a Comment

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

20 Shares
Share20
+1
Tweet
Share
Buffer