How to Easily Create a Divi Menu Button in Divi 4.0+

by | Nov 23, 2020 | DIVEMBER, Divi Tutorials | 6 comments

Welcome to D I V E M B E R (Divi + November) here at Divi Life! All month long during November we’re going LIVE on Facebook & YouTube, and publishing new tutorials, freebies, new product features, new product releases, and more! Make sure you subscribe to our email list so you don’t miss any of the action or awesome free stuff! And, follow us on Facebook & YouTube to be notified when we go LIVE.

In today’s tutorial, I’m going to show you how to add a call to action button to your Divi Menu!

This method words on the default header, AND headers/menus that are created with the Divi Theme Builder (Divi 4.0+).

How to Add a Call to Action Button to Divi Menu

  1. Add the CSS Class divi-life-cta-menu to the Menu Item
  2. Add the CSS Code to Style the Link to Look Like a Button
  3. Optional: Add our “Attention Grabber” CSS to Grab User’s Attention

Sounds simple right? It really is! Let’s dive in!

Step One: Add the CSS Class divi-life-cta-menu to the Menu Item

Go to WP Admin > Appearance > Menus, and turn on the CSS Classes option in Screen Options.

Then, open up the menu item you’d like to transform into a button, and paste the CSS class divi-life-cta-button as shown in the screenshot below:

Step Two: Add the CSS Code to Style the Link to Look Like a Button

Now that the CSS class has been added, we can now add the CSS code. Copy and paste the CSS code below to the custom CSS box within Divi Theme Options, or in your Divi Child Theme.

That’s it! Once that’s saved, your menu link will now be a menu button! You can of course customize the color, padding, and border radius, by adjusting the CSS.

Step Three: (Optional) Add our “Attention Grabber” CSS to Grab User’s Attention

Call to Action buttons in the menu have become extremely common. While they’re intended to stand out from the rest of the menu, they don’t have the same impact as they used to since users have grown so accustomed to them. (sort of like ad blindness!)

So how do we make them standout? We add some slick animations! But be careful with this. You don’t want to go overboard and annoy your visitors.

We have some simple animation you can easily add to your menu button to help it really stand out! Here’s what they look like:

Here’s how to add the Call to Action Attention Grabbers:

  1. Add either of the CSS classes to your menu CSS Field (with a space after the previous class we added above)
    1. Wiggle: divi-life-wiggle
    2. Breathing: divi-life-breathing
  2. Next, add the CSS code below to your Divi Theme Options (or your child thee style.css file).

That’s it! Let us know what you think in the comments, and don’t forget to subscribe below to get access to all of our Divi Tutorials, Freebies, and more.

6 Comments

  1. Avatar

    Tim, I may have missed it in your live stream but what is the purpose of the “@keyframes wiggle…. ” section at the bottom of the code? Isn’t the wiggle covered in the .divi-life-wiggle{ code at the beginning?

    Reply
    • Avatar

      Hey Mickey! So the keyframes is necessary for the animations. It’s essentially what creates and defines what the animation looks like (What’s happening, the position, etc). And then the rest of the CSS is actually adding the animation to the specific CSS class and defining how quickly it should run, etc.

      Reply
  2. Avatar

    It also works on other Divi elements. : )

    Reply
  3. Avatar

    Fabulous, you solved my problem. However, is it possible to have have a different color then the other buttons, like for example when your on the home the color of the home button should be different!?

    But, I am already saved by this little tutorial. Thank you sir for sharing.

    Reply
    • Avatar

      absolutely! This should do the trick:

      .home .divi-life-cta-menu a {
      background-color: #000;
      }

      Reply

Submit a Comment

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

Pin It on Pinterest

Share This