Adding a CTA (or Call To Action) button to the Divi menu is a great way to catch a visitor’s attention and drive them to well…answer your call to action. This might be to request a quote, get in touch, or check out your collection of pet rocks, it really is up to you.

In today’s tutorial, we will show you how you can easily add a CTA button to your Divi Menu using just a little bit of CSS magic in under 7 minutes.

Let’s take a look!

Preview:

BEFORE
Divi Menu with no Call to Action
AFTER
Divi Menu with a Call to Action button

Video Tutorial

Table of Contents

Difficulty

Easy

Time

10 Minutes

How to add a Call To Action Button to Divi Menu

Setting it Up

Adding our CTA to the Divi Menu

 We need to do a little bit of work before we can add the CSS that will add a button to our Divi menu and we are going to want to make sure that we already have a menu assigned as the Primary Menu. We also need to add the link for our CTA, so let’s get to work.

Head over to Appearance > Menus

Make sure that your “Primary Menu” is selected

Add a New Custom Link by going to Add menu items > Custom Link

Set the URL to whatever action you want the user to do, we will set it to the contact page

Set Link text to “Get in touch

Click Add to Menu

Save

Ok, so now if you take a look at your site on the frontend, you’ll see this new “Get in touch” link added to your Divi menu, but it looks no different than the other menu items and certainly won’t inspire any of your visitors into action.

We’ll enable ourselves to spice things up a bit by adding a class to the CTA we just added.

Still, on the Menus page, click on the Screen Options in the top right corner of the screen

Check the box next to CSS Classes

Expand the Custom Link we added > CSS Clasess > Add the CSS Class de-menu-cta

Save

Add CSS Class to Divi Menu

If you hastily saved and refreshed the frontend of your site you might be a little disappointed now, because hey, nothing changed! You are both right and wrong. The change we made by adding this class was 100% under the hood and we will use this in the next step to tell the CSS where it needs to go to make things look all button-ey.

Adding the CSS Code

Transforming our CTA Link into a CTA Button

With all the bones in place, it is time to kit it out with our CSS which will finalize adding a CTA button to our Divi menu. Since we will be applying this style throughout our site, we will add the code to the Divi Theme Options.

Go to Divi > Theme Options > Custom CSS

Paste the Code below in the Custom CSS Box

Save

Add CSS for Divi CTA Button

If you go and take a look at the front end of your site, you’ll see that our CSS code has turned that uninviting text into a flashy Call to Action button that has a fun scale effect on hover. Now you might be happy with the way it looks, but keep going to the next section if you want to make some minor changes.

Polishing the Design

Changing Colors

Changing the look of our brand new CTA button in our Divi menu looks more intimidating than it really is because we added a good amount of comments in the CSS code that will guide you on making some easy changes.

Take a look at our code again.

On lines 5 and 6 respectively, you can easily change the colors of the text and button background.

On line 7 you change the text size, and on line 8 you can change the shape of the button borders.

All you need to do is go back to your Divi Theme Options and change those lines to mix things up a bit.

If you want to take things a step further like adding a wiggle animation, for example, check out our tutorial How to add attention-grabbing pure CSS Animations to your Divi Modules.

Add attention grabbing pure CSS Animations to your Divi modules

You know what to do…

Add CTA Button in Divi Menu

Conclusion

Adding a CTA button to our Divi Menu was an easy change with a big result. It is a fantastic way to draw your users toward a desired action like signing up for your newsletter or maybe checking out your blog. Whatever you use it for, we’d love to hear your feedback!

Please let us know what you thought in the comments below, we are always looking for ways to engage and enrich our community!

Until next time 😁