How to Add a CTA to the Divi Menu

by | Jan 31, 2018 | Divi, Light Side

Demo:

Requirements:

No requirements 🙂

1. The Link

Let’s start by going into Appearance -> Menus.

Add a new Page link or other kind of link.

On the Navigation Label field you need to add a span tag in wich will be assigned our CSS class.

Attention! In my case I’m using a Custom Link with no URL assigned. Simply place your desired URL in there.

Once this is done, it is time to add some CSS to style the CTA.

2. Adding the CSS

From the WordPress Dashboard go to Divi -> Theme Options -> Scroll Down to see the CSS box.

Now let’s see the CSS

1
2
3
4
5
6
7
.best-cta {
    background-image: linear-gradient(31deg,rgba(46,62,234,0.39) 0%,rgba(41,196,173,0.42) 100%);
    background-color: #4170b4;
    padding: 10px 30px !important;
    border-radius: 20px;
    color: white;
 }

The background-image property is defining a linear gradient with some transparent colors in RGBA which will be automatically placed on top of the background-color overlaying it.

In the background-color I have placed an HEX color.

The padding property is defining 10px for top and bottom & 30px for right and left.

The border-radius is just for making our borders rounded.

The color property will simply make our text white.

Play with the value of all this properties and find out what is the best combination for your project.

Congrats you have your CTA 🙂

2 Comments

  1. Ibrahima

    C’est vraiment très simple à utiliser et avec un résultat très très raffiné. Bravo

    Reply

Submit a Comment

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

How to Cache and Boost WordPress Performance

Want to boost your site performance? Learn how to do it by activating caching in your site. With a simply and clean plugin and as always in a couple of minutes. Let’s not forget about the small extra for fixing Google Analytics!.

How to Make any Element Fixed – Divi Builder

Want to learn how to make any Section / Row / Module fixed? So whenever you scroll the element stays in there with you! Learn how to achieve this trick in a couple of minutes with R2D2 help!.

How to Maintain a WordPress Site Clean

Hello everyone, is time to talk about how can you clean your WordPress site for a better maintenance, optimization and security purposes in just a couple of minutes once again!

Follow MasterDivi on Facebook

Be updated with the latest tricks!