Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Header – Choose the Header Style and Design
  5. How to Add a Call to Action Button to the Header

How to Add a Call to Action Button to the Header

A call to action button is a term used to describe buttons that entice users to take action. It could be getting an email of a user, to get users to subscribe, and anything of such sort where you want to accomplish a user based goal.

 If you do not have the call to action button enabled, you may only see a single option namely “Enable Call to Action Button” to enable the options.  Just click the checkbox next to it for activating the configuration options.

Choose the Call to Action Button Location

 

You get to choose out of either the Main Menu or the Functions Menu. Both of these locations are in the header. Main Menu is the primary menu of the website. The functions menu is the one next to the social icons in the header.

You only need to click over the dropdown menu under the “Button Location” label in the Call to Action Button panel to choose a CTA button location.

Add a Link to the Button

Any CTA button would be incomplete without a custom link. A custom link is basically the URL for the page you want to load after clicking the CTA button.

Adding a link to the button is simple. Just enter the button link in the input box under the “Button Link” label in the Call to Action button panel.

Add the Button (Text) Content

You can add a custom text to the CTA button. You might want the button to read just “Get Started” for example or a more customized message. Whatever your business or personal needs are, you can carefully think it through and write down a message that resonates with your audience.

You can easily enter the button text in the input box, under the “Button Content” label in the Call to Action Button panel.

Add Padding to the Button Content

A good spacing (padding) is needed for making the most impact with CTA buttons. Plus, the design looks more aesthetically appealing as well.

The padding can be added by entering the Top, Right, Bottom, and Left padding in four input boxes respectively. These input boxes can be found under the “Padding (px)” label in the Call to Action Button panel.

You can also click the chain icon button to link these inputs together. After clicking it, if you enter padding for any of the input boxes. The other inputs are updated with the same padding.

Adjust a Border Width in Pixels to the Call to Action Button

You can add the slightest of details with Avoori, which calls for adjusting the border width in pixels for the CTA button as well.

Just use the given slider under the “Border Width (px)” label in the Call to Action Button panel to adjust the border width.

Apply Border Radius in Pixels to the Call to Action Button

You have this option to adjust the CTA button corners, to make it either cornered or more rounded.

You can use the slider under the “Border Radius (px)” label in the Call to Action Button panel to change the border-radius.

Add a Background Color to the Call To Action Button 

You can add a background color to the CTA button as well. Colors are helpful in guiding user actions. A green color incentivizes users to think positive of the CTA and encourages them to push it once to read more about it.

Just use the “Select Color” button under the “Background Color” label in the Call to Action Button panel to add a background for the CTA button.

Applying a Background Color to the Call to Action Button on Hover

The background color can be changed for the CTA button over hover. It’s a good way to highlight and gain users attention as well.

Easily use the “Select Color” button under the “Background Color: Hover” label in the Call to Action Button panel to add a background for the CTA button on hover. 

Changing the Text Color of the Call to Action Button

You can easily change the text color of the button to either blend in or contrast with the button.

Simply click over the “Select Color” button under the “Text Color” label in the Call to Action Button panel to add the text color for the CTA button.

Changing the Text Color of the Call to Action Button on Hover

The text color can also be changed for the button on hover (mouse-over) over the CTA.

Just use the “Select Color” button under the “Background Color” label in the Call to Action Button panel to add a background for the CTA button.

Set the Border Color for the Call to Action Button

The border color can also be set for the CTA button. Just use the “Select Color” button under the “Border Color” label in the Call to Action Button panel to set its border color.

Change the Border Color on Hover

The border color can be changed on hover (mouse-over) over the CTA button.

All you need to do is to click over the “Select Color” button under the “Border Hover Color” label in the Call to Action Button panel to change the border color.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?