How to Create a Call to Action Button in the Divi Menu

June 4, 2019
how-to-create-a-call-to-action-button-in-the-divi-menu Theme Builder Layout

One of the most important pieces of a successful conversion-driven website is the Call to Action button nested in the menu bar. 

Menus work like a map for your website to give users the information they are seeking. It’s important to highlight the most important elements you want users to see, whether that’s a call to action with a phone number (if you expect a user to call you directly) or a link to your product page, services, or sign up page.

Examples of Call to Action Button in the Menu:

WordPress comes with a navigation menu that makes it quite easy for beginner users. However, if you are brand new with WordPress or need a refresher, read this guide which covers the basics: how to create a menu and menu items.

If you have already set up your menu, follow these steps to create a button for any link in the menu!

1. Add custom class name to a menu item

  1. Login to the WordPress Dashboard.
  2. From the ‘Appearance’ menu on the left-hand side of the Dashboard, select the ‘Menus’.
  3. Locate the menu item that you want to customize
  4. Add custom class name to your menu item.

If you don’t see the box to enter your custom CSS class click on “Screen Options” on the top right of your menu dashboard to enable it.

2. Add custom CSS

At this point, it’s time to add some CSS to your website. CSS can be added in the following three ways:

If you don’t already have a child theme setup, you can create a blank one using the Divi Space Child Theme Generator. If you need assistance in using the child theme generator, read our blog post that provides easy step by step instructions on How to Use the Divi Space Child Theme Generator.

    For this tutorial, we’ll be using the Custom CSS box.

    To access it:

    1. Log into your WordPress dashboard.
    2. Go to “Divi > Theme Options” where you will find the Divi theme options.
    3. Go to the “General” tab (it should be the current one.)
    4. Add CSS code to box called “Custom CSS”.
    5. Click Save

    .menu_cta {
    background-color: #ff6900;
    color: #fff;
    padding: 0 !important;
    }

    .menu_cta a {
    color: #fff !important;
    padding: 15px 15px 15px 15px !important;
    }

    3. Adding an Icon

    You can optionally add the icon before text for tablet and desktop view.

    To do that, use the snippet below:

    .menu_cta {
    background-color: #ff6900;
    color: #fff;
    padding: 0 !important;
    }

    .menu_cta a {
    color: #fff !important;
    padding: 15px 15px 15px 15px !important;
    }

    @media (min-width: 980px){
    .menu_cta a:before {
    content: ‘\e090’;
    color: #fff;
    font-family: ‘ETmodules’;
    font-size: 16px;
    line-height: 1;
    position: absolute;
    left: 12px;
    }

    .menu_cta a {
    padding: 15px 15px 15px 35px !important;
    }
    }

    You can change the icon by changing the content value in the code above.
    content: ‘\e090’; stands for phone. If you want to change it, for example, to shop icon, follow these steps:

    1. Head over to the Elegant Themes icon list and search for the icon you would like to use.

    2. The four digits that follow &#x in the html codes are the same last four digits you will need for typing out unicodes (if there only two digits after &#x, type 00 before the two digits).

    3. Find the Unicode number, in the example above for the cart icon it will be: e07a

    4. Replace the unicode number in the snippet above with the new one, taking care to leave the quotes and slash intact.

    4. Be sure to check how buttons look on mobile devices

    Mobile view:

    You can turn off styling for mobile devices. Insert the chosen snippet code inside of the media query.

    @media (min-width: 980px) { }

    You can learn more about using media queries in the article “Divi Media Queries

    Or don’t display menu item when the width is smaller than 980p by adding the code:

    @media (max-width: 980px) {
    .menu_cta {
    display: none;
    }
    }

    You can customize the call to action to fit your current website design. Here are some other CSS values you can play with

    • padding
    • color
    • background-color
    • border radius
    • font-size
    • font-family
    • font-weight
    • border
    • letter-spacing
    • box-shadow
    • …and hover statements 🙂

    If you are using a fixed Header, you may have to use a different color value for the button color to overwrite default settings in the Divi Theme Customizer.

    To do that, use .et-fixed-nav #top-menu selector. To learn more, read our The Divi CSS and Child Theme Guide.

    .et-fixed-header #top-menu .menu_cta a {
    color: #fff!important;
    }

    5. Snippets 🙂

    I created 5 different call to action designs. Choose the one that works for you!

    @media (min-width: 980px) {
    .menu_cta {
    padding: 0!important;
    border-radius: 30px;
    border: solid 2px #fff;
    transition: 0.3s;
    }

    .menu_cta a{
    color: #fff!important;
    padding: 15px 30px 15px 30px!important;
    }

    #top-menu-nav .menu_cta a:hover {
    opacity: 1;
    }

    .menu_cta:hover {
    border: solid 2px #fe8400;
    background: #fe8400;
    }
    }

    @media (min-width: 980px) {
    .menu_cta {
    background-color: #f2f2f2;
    background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
    border: 1px solid #bfbfbf;
    box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #8c8c8c;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    font-family: Verdana, sans-serif;
    transition: all 20ms ease-out;
    }

    .menu_cta:hover {
    background: #f2f2f2;
    border-color: #8c8c8c;
    box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
    }

    .menu_cta a{
    color: #23282d!important;
    padding: 12px 30px 12px!important;
    }
    }

    #top-menu-nav .menu_cta a:hover {
    opacity: 1;
    }

    @media (min-width: 980px) {
    .menu_cta {
    width: 160px;
    height: 46px;
    background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%);
    border-radius: 5px;
    border-bottom: 4px solid #2b8bc6;
    color: #fbfbfb;
    font-weight: 600;
    text-indent: 5px;
    cursor: pointer;
    }
    .menu_cta:active {
    box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
    top: 1px;
    }

    .menu_cta:after {
    content: &#39′;
    width: 0;
    height: 0;
    display: block;
    border-top: 22px solid #187dbc;
    border-bottom: 22px solid #187dbc;
    border-left: 16px solid transparent;
    border-right: 20px solid #187dbc;
    position: absolute;
    opacity: 0.6;
    right: 0;
    top: 0;
    border-radius: 0 5px 5px 0;
    }

    .menu_cta a{
    color: #fbfbfb;
    font-family: &#39Open Sans&#39, sans-serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,.4);
    text-align: left;
    padding: 15px 30px 15px 12px;
    }
    }

    #top-menu-nav .menu_cta a:hover {
    opacity: 1;
    }

    @media (min-width: 980px) {
    .menu_cta {
    background-color: #ff6900;
    color: #fff;
    padding: 0 !important;
    }

    .menu_cta a {
    color: #fff !important;
    padding: 10px 15px 10px 35px !important;
    }

    .menu_cta a:before {
    content: ‘\e090’;
    color: #fff;
    font-family: &#39 ETmodules’;
    font-size: 16px;
    line-height: 1;
    position: absolute;
    left: 12px;
    }
    }

    .menu_cta {
    background-color: #ff6900;
    color: #fff;
    padding: 0 !important;
    }

    .menu_cta a {
    color: #fff !important;
    padding: 15px 15px 15px 15px !important;
    }

    We hope you’ve found the information in this tutorial helpful. If you have any questions, ask them in the comments and while you’re there, let us know what future step by step guides you’d like to see here!

    Source

    Share this article:
     




    eHost-square-ad Theme Builder Layout

    We’re listening.

    Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

    SHARE IT HERE:

    Related Posts

    how-to-create-a-404-page-template-with-divis-theme-builder Theme Builder Layout

    How to Create a 404 Page Template with Divi’s Theme Builder

    Divi’s Theme Builder and the built-in design options have opened a ton of new doors. More than ever before, you’re now able to customize every single page your customers land on. This includes setting up a 404 page. In this tutorial, we’ll show you how to create a...

    how-to-land-your-next-client-with-a-well-designed-proposal Theme Builder Layout

    How To Land Your Next Client With a Well Designed Proposal

    Closing a new project usually depends on how you present yourself and your work. One of the most influential moments with a new prospect is when they receive your proposal. It can be a make-or-break moment. When your proposal creates a positive impression with the...

    Get ALL Your SEO, WordPress & Divi News

    Join Our Daily Roundup

    SEO News and More

    SEO News and More

    Subscribe ToThe Weekly SEO Trade News Updates

    Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

    Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

    Excellent! Now check your email to confirm your subscription.