How to Configure Call to Action (CTA) Button in the Header of the Theme

Our themes are business and sales oriented so most of them come with an option to add a strong CTA in the header. Usually, you want to put there a link to the desired final action you want your users to complete on your website. That can be a link to your landing page, but it can also be a ‘tap to call’ button which prompts mobile users to call your business cell phone number.

If you import the demo using our One Click Demo Import solution the whole website will be laid out the same as in our demo so the CTA you’ve seen on the demo will be imported as well.

However, if you prefer to setup the theme manually, here is how to set up the main CTA in the header. There are two different types of the CTA placements and setup, some themes come with a dedicated setting for a CTA in the WP customizer, the others come with the widget area meant to be used for CTA. Depending on the theme you are using, you will have to follow either the first or the second set of steps.

Themes with CTA Option in the WP Customizer

In the following example, I will give example from our medical WP theme, but the process is the same for many other themes as well (ConsultPress, Shaka, StructurePress etc.):

  1. The setting is located in the WP customizer, so when in wp-admin click to Appearance → Customize.
  2. When in customizer, navigate to Theme Options → Navigation and find the setting called Featured page:
  3. You have multiple options you can choose from:
    • If you select None then there will be no CTA in the header
    • If you select Custom URL then 2 new additional fields will shop up below the setting and you will be prompted to enter the URL and the text for the CTA button.
      Protip: if you start the URL field with the tel: the button will act as a ‘tap to call’ CTA. Example: tel:1800-123-456 will prompt to call the number 1800-123-456 upon clicking or tapping on the CTA button.
    • Or you can select any other page from the drop-down directly.

Finally, you can decide if you want the CTA page to be opened in a new tab. This can be useful sometimes if you are referring a user to an external website. For example, a dentist institution could have a third party provider for making reservations and in this case, you want the CTA to be opened in a new tab, so users can easily navigate back to your website once they make a reservation on the third party website.

Sticky Header and the Second CTA

Most our themes also have an option for the Sticky Menu. You can enable it if you navigate in the customizer to the Theme Options → Sticky Menu.

Here you can also define a second CTA which can be the same or different than the CTA defined in the Navigation settings. The control itself is functioning the same, so follow the steps from above.

Themes with Widget Areas Meant for the CTA Button

The other themes don’t have a dedicated setting for a CTA but there are widget areas available in the header which are most suitable for the CTA. Here is how to place a CTA button in the header of these themes:

  1. Go to the Appearance → Widgets or in the customizer select Widgets
  2. Find a suitable ‘sidebar’ position defined in the theme for a CTA button. Usually they the sidebars in the header are named Header or Navigation.
  3. Place a Text widget to the desired sidebar and insert the button shortcode. Refer to the docs of your theme for the full documentation of the button shortcode available in your theme.
Example from our Bolts theme

If you have a problem, let us know via the support ticket and we will be more than happy to help you setup the CTA button in your theme!

Finally, remember – every business website needs to have a purpose and a clear Call To Action. Don’t make it hard for your users to find what you want them to do on your website.