How to add CTA button in the Header of Divi Theme

Divi is a sleek and modern theme by ElegantThemes. ElegantThemes has a knack for designing superb, user friendly themes for WordPress.

Below you will find all the information you need in order to utilize the CTA (call to Action) button on the main header or the primary header of the Divi site.

We strongly advise the use of child themes for any modifications and enhancements. Learn here about how to make a child theme for your current site.

Every menu item in Divi has a unique number to it. We can get this number by inspecting the element in any browser. For Google Chrome, right click on the menu item and select Inspect Element (Windows Shortcut: Ctrl=Shift+I).

Once you get the menu-item number for the one you want to turn into a CTA Button, replace the number in the code below with yours.

Paste the below code in the epanel Custom CSS section of divi Theme Options, or better, in the style sheet.

#menu-item-493 {
padding: 0px 0;
}


#menu-item-493
a
{
border-color: grey;
border: 1px solid black;
color: #000000;
padding: 6px 6px !important;
display: inline-block;
opacity: 1;
border-radius: 3px;
}

#menu-item-493
a:hover
{
opacity: .9;
background: #FF0707;
color: #fff;
}

This is how it will look:

The size of the Button can be changed by tweaking the padding values in the above code. The background color, text and hover effects can also be changed by changing their respective values.

Get Divi Theme here.