All Collections
FAQ's and Troubleshooting
How to add CTA button to the header
How to add CTA button to the header

You can add a button to the navigation or header with Custom CSS.

Karen avatar
Written by Karen
Updated over a week ago

To add a Call-To-Action button to the header you simply need to add an extra menu item under the WordPress Menus page and assign a Custom CSS class to the menu. 

In the screencast above you can see that the assigned class is cta-button to the additional menu item. If you don't see the Custom CSS file make sure it's enabled under the Screen Options.

Now you only need to add the following code to the Custom CSS field in your WP Dashboard > Divi Theme Options > General Settings

.cta-button {
    border: 1px solid red;
    border-radius: 19px;
    background: blue;
    box-shadow: 0px 0px 12px 3px violet;
    transition: all .3s 0s;
}

.cta-button a {
    padding: 18px !important;
    color: white !important;
}

.cta-button:hover {
    transform: scale(1.1);
    transition: all .2s 0s;
}

That's it! You can play with all the values in the code to customize the button the way you like. You can see the final result in the screencast below:

Did this answer your question?