Divi Toolbox ➜ Header ➜ Add CTA Menu Button
You can easily change one (or more) of the Primary Menu items to a Call To Action Button-style link. You can choose to apply this style to the first or the last menu item, or to the link with a custom CSS class of cta-link.
If you’d like to apply this style to a menu item which is not the first nor the last one, follow these steps:
1. Navigate to Appearance ➞ Menus
2. Click on the Screen Options button in the top right corner of the Dashboard
3. Make sure that the “CSS Classes” option is enabled
4. Click on one of the menu items and add a CSS class of cta-link
5. Save your menu.
Note for advanced users: If you decide to add your own custom CSS to the button, you should know that there’s an additional <span> element added inside the standard link, and all the styles from the Customizer are applied to the <span> tag and not directly to the <a> element. So, to target it, you would use CSS like .cta-link a span {…some code…}
Toolbox Customizer ➜ Header ➜ CTA Menu Button
Here’s the list of all the settings you can easily change:
- Button font family
- Button font weight
- Button font size
- Button letter spacing
- Button text transform (uppercase, lowercase, capitalize)
- Button text color
- Button background color
- Button border color
- Button border width
- Button border radius
- Button padding
HOVER STATE
- Button text hover color
- Button background hover color
- Button border hover color
- Button hover effect (Grow, Shrink, Move Up, Move Down, Wobble, Heartbeat, Jello, Pulse)
Plase note:
These effects apply to the default Divi navigation. If you are using a custom Theme Builder Header and you’d like to add a Call to Action Button menu item to Menu or Fullwidth Menu module – navigate to module Settings ➜ Advanced tab ➜ CSS ID & Classes ➜ CSS Class and add a custom class of: dtb-menu
The CTA button can be added to the Secondary nav by using a custom CSS class of cta-link on the menu item.
