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!
Table of Contents
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
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.
Check the box next to CSS Classes
Expand the Custom Link we added > CSS Clasess > Add the CSS Class
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
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 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.
6 respectively, you can easily change the colors of the text and button background.
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.
You know what to do…
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 😁