{"id":42815,"date":"2019-02-20T10:58:10","date_gmt":"2019-02-20T16:58:10","guid":{"rendered":"https:\/\/audiotheme.com\/?p=42815"},"modified":"2022-11-25T14:14:41","modified_gmt":"2022-11-25T20:14:41","slug":"how-to-add-a-call-to-action-button-to-your-websites-menu","status":"publish","type":"post","link":"https:\/\/audiotheme.com\/blog\/how-to-add-a-call-to-action-button-to-your-websites-menu\/","title":{"rendered":"How to Add a Call to Action Button to Your Website’s Menu"},"content":{"rendered":"
Do you have a specific page on your website that you wish stood out a little more than the others? Maybe it\u2019s a shop page<\/a>, a contact page, an EPK<\/a>, or a booking form. Is there a page on your site that you\u2019d really like to shine the spotlight on? In today\u2019s post, we\u2019re going to cover how you can easily add a call-to-action button to your site\u2019s main menu.<\/div>\n

<\/p>\n

What is a Call to Action?<\/h2>\n

A call to action on a website is an element that is specifically designed to entice a site visitor to take a certain action, or visit a certain page. The idea is that the page appears more enticing because it stands out from others in the menu.<\/p>\n

If we take the DuoTones\u2019 website for example, you\u2019ll see that there is a booking call to action in the menu bar. When that link is clicked, a contact form loads, requesting all the details necessary to quote a show price for a private event.<\/p>\n

\"\"<\/p>\n

How to Create a Call-to-Action Button in Your Site\u2019s Menu<\/h2>\n

If you\u2019re using an theme from AudioTheme, the process for creating a call-to-action button in your header is very simple. Most of our themes come with button styles built right in since they\u2019re used for other aspects of the theme.<\/p>\n

Let\u2019s use\u00a0Encore<\/em><\/a>\u00a0as an example and do a step by step walk through using the existing button styles.<\/p>\n

Step 1<\/h3>\n

First, we\u2019ll visit the primary menu settings under the Customize \u2192 Menus \u2192 Primary Menu<\/em>.
\n\"\"<\/p>\n

Step 2<\/h3>\n

We\u2019re going to add the call-to-action button to our contact page in this example, so we\u2019ll need to expand the options related to that menu item. This can be done by clicking the triangle on the far right of the menu item.<\/p>\n

\"\"Step 3<\/h3>\n

Once the options have been expanded, we will add the button<\/code> class to the CSS Classes<\/strong> field for the menu item.<\/p>\n

Step 4<\/h3>\n

Be sure to save your changes!<\/p>\n

You\u2019ll notice that this changes the contact page in the menu to display as a button.<\/p>\n

\"\"<\/p>\n

If you\u2019d prefer another type of button, you can use the theme\u2019s alternate button style by changing the CSS Classes<\/strong> to button-alt<\/code>. This will display a slightly more subtle button style.<\/p>\n

\"\"<\/p>\n

What If I Don\u2019t See the “CSS Classes” field<\/em>\u00a0in the Customizer?<\/h2>\n

The CSS Classes<\/strong> field may not display in your customizer by default. However, you can enable on that field via your WordPress dashboard. Navigate to Appearance \u2192 Menus<\/em>. In the upper right corner of the screen, you should see a tab labeled “Screen Options.”<\/p>\n

\"\"<\/p>\n

When you expand this menu, you\u2019ll see the option to select the CSS Classes<\/em> option under the Show advanced menu properties<\/em> area of the drop down menu.<\/p>\n

\"\"<\/p>\n

Clicking that tab will allow you to add CSS classes to each individual menu item.<\/p>\n

What If I Want to Create My Own Call-to-Action Style?<\/h2>\n

Maybe you want the call-to-action button on your menu to stand out a little more than the default styles. If that\u2019s the case, you can create a custom call-to-action button style using some CSS. Here\u2019s how.<\/p>\n

Step 1<\/h3>\n

Just like before, we\u2019ll visit the primary menu settings under the Customize \u2192 Menus \u2192 Primary Menu<\/em>.<\/p>\n

Step 2<\/h3>\n

We\u2019re still going to add the call to action button to our contact page in this example, so we\u2019ll need to expand the options related to that menu item. This can be done by clicking the triangle on the far right of the menu item.<\/p>\n

\"\"Step 3<\/h3>\n

Once the options have been expanded, we will add the custom-button<\/code> class to the CSS Classes<\/strong> field for the menu item.<\/p>\n

You\u2019ll notice that the contact menu item doesn\u2019t look any different at this point. This is because we need to define the CSS styles for the button.<\/p>\n

Step 4<\/h3>\n

In order for the custom-button<\/code> class to effect the contact menu item, its CSS styles must be defined. If you\u2019re new to CSS buttons, a helpful tip is to just copy the theme\u2019s default button as a starting point. You may also find our primer on CSS<\/a> to be helpful.<\/p>\n

You\u2019ll want to add your custom styles to the Additional CSS<\/em> area of the customizer. If we want to add some interesting elements to our button class, we may add a new background color, font weight, and font color.<\/p>\n

\r\n.custom-button a {\r\n\tbackground-color: #c8596e;\r\n\tcolor:#ffffff;\r\n\tfont-weight:600;\r\n\tborder-radius: 3px;\r\n}\r\n<\/code><\/pre>\n
You can tell that even with just a few properties added, the button is really starting to stand out.<\/p>\n
\"\"<\/p>\n
You can of course add hover effects to your button using CSS as well. For example:<\/p>\n
\r\n.custom-button a:hover {\r\n\tbackground-color: #333333;\r\n\tcolor:#ffffff;\r\n\tfont-weight:600;\r\n\tborder-radius: 3px;\r\n}\r\n<\/code><\/pre>\n
Which would result in the following hover style:<\/p>\n
\"\"<\/p>\n
That\u2019s it! That\u2019s all there is to creating custom call to action buttons in your site\u2019s menu bar.<\/p>\n
What Are Some Potential Uses<\/h2>\n
Simply put, anything you want site visitors to pay attention to would make a great use case for a call-to-action button. A few ideas to consider are:<\/p>\n