{"id":5110,"date":"2016-09-14T08:57:48","date_gmt":"2016-09-14T15:57:48","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=5110"},"modified":"2023-11-22T14:01:31","modified_gmt":"2023-11-22T22:01:31","slug":"header-cta-button-bb-theme","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/header-cta-button-bb-theme\/","title":{"rendered":"How to Create Call to Action Button in Header Menu – Beaver Builder Theme"},"content":{"rendered":"\n

Call to Action<\/strong> or CTA buttons are very important to boost conversions on your website. Because of the same reason, our Beaver Builder Templates<\/a> have many prominent Call to Action<\/strong> blocks and forms.<\/p>\n\n\n\n

Adding a call to action button in header navigation is a common practice. A lot of websites, including our own site use the same.<\/p>\n\n\n

\n
\"beaver-addons-header\"<\/figure><\/div>\n\n
\n
\"beaver-builder-cta\"<\/figure><\/div>\n\n\n

To create a CTA button like this one, you will need to add a custom class to menu items.<\/p>\n\n\n\n

Go to WP admin > Appearance > Menus and click the “Screen Options” button in top right. This will open up a panel to control various elements. Enable CSS Classes, if that’s not already enabled. <\/strong><\/p>\n\n\n

\n
\"menu-screen-options\"<\/figure><\/div>\n\n\n

Enabling the CSS Classes option displays a new CSS Class field for Menu items as shown in the screenshot below.<\/p>\n\n\n

\n
\"header-cta-css\"<\/figure><\/div>\n\n\n

I have added a custom CSS Class – header-menu-cta<\/strong> so that I can use the same to style the link differently.<\/p>\n\n\n\n

Here’s the code that you can use to highlight this link and make it look like a call to action button.<\/p>\n\n\n\n

\n