> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a Call to Action to a header

> Encourage your page visitors to open a separate page, purchase an Offer, and more with a Call to Action.

## Overview

Include a Call to Action in your Header to encourage your page visitors to open a separate page, purchase an offer, and more.

<Note>
  **Note:** This guide refers to Kajabi Pages Templates. If you are using Premier Legacy Templates, [please refer to this guide](../../website/pages/how-to-add-a-call-to-action-to-your-header-with-premier).
</Note>

[Learn more about the Call to Action](../../website/pages/how-to-use-a-call-to-action)

***

## How to add a Call to Action to your header

1. Open the **Website** tab from your Dashboard.
2. Select the **Pages** tab.
3. Open the page editor for your Page. [Learn more](../../website/pages/how-to-get-to-the-page-editor)
4. Click **Header** in the sidebar.
5. Then, click **Add Content**.
6. From the list, click **Call to Action** to add it to your Header.
7. Customize the Call to Action Text, Button Action, and appearance.
8. To change the location of the Call to Action Button, click and drag `=` next to the block in the sidebar editor.
9. Click **Save**.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/bj2nukgalm" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Customize your Call to Action

### Text

Enter text to display on your Call to Action button.

### Button action

Select an action:

* Go to a Landing Page
* Go to a Checkout Page
* Download a file
* Go to a URL
* Open a [two step optin](../../website/pages/how-to-use-the-two-step-optin-popup) pop-up
* Go to a section on the page

### Open in new tab

Enable this setting to trigger your action in a different tab of your user's browser.

### Button background color

Click the **Button Background Color** to select a color from your site color palette.

If you prefer to use a custom color, click the color wheel and then either enter your RGB color code or use the sliders to choose your color:

* The **square box** allows you to adjust the brightness and saturation of your color.
* The **horizontal rainbow bar** allows you to select the hue.
* The **horizontal gradient bar** allows you to select the opacity of your color.

### Button text color

Complement your Button Background Color with a different **Button Text Color**.

<Note>
  **Note:** The Button Text Color is for [solid buttons](../../website/pages/how-to-add-a-call-to-action-block-to-your-website-page-and-landing-page#h_4a31d1a6-26f8-4a0d-b917-5a7f8112e654) only.
</Note>

Click Button Text Color to select a color from your site color palette.

If you prefer to use a custom color, click the color wheel and then either enter your RGB color code or use the sliders to choose your color:

* The **square box** allows you to adjust the brightness and saturation of your color.
* The **horizontal rainbow bar** allows you to select the hue.
* The **horizontal gradient bar** allows you to select the opacity of your color.

### Button width

Adjust the width of your Button:

* Full: fill the width of the button area
* Auto: automatically adjust the width to fit the text

### Button style

Change the style of the Button to display:

* Solid colored button
* Outline of your Button Background Color

### Button size

Adjust the size of your Call to Action Button:

* Small
* Medium
* Large

Changing the size of your Call to Action will change both the button background and text size.

### Border radius

Customize your **Call to Action Border** to appear more rounded or squared.

### Stretch block

Enable the **Stretch Block** setting to fill the remaining space of the Header section.

A good rule for using the Stretch Block feature is to enable it for the Block on the far left of your Header section.

For example, if you want to have your Logo on the far left side of your Header and a Menu and User Menu on the far right side, select **Stretch Block** for your Logo.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/oitpibdldv" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

Control the alignment and positioning of your Blocks by adjusting the Stretch Block and Block Alignment for the Blocks in your Header.

### Text alignment

Adjust the horizontal alignment of your Block in the Header to appear more left, centered, or right-aligned.

Keep in mind, this setting will be impacted by surrounding Blocks and their positioning and alignment.