How to Easily Create a Divi Menu Button in Divi 4.0+
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
- Add the CSS Class divi-life-cta-menu to the Menu Item
- Add the CSS Code to Style the Link to Look Like a Button
- 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:
- Add either of the CSS classes to your menu CSS Field (with a space after the previous class we added above)
- Wiggle: divi-life-wiggle
- Breathing: divi-life-breathing
- 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.