> ## 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.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://help.kajabi.com/feedback

```json
{
  "path": "/articles/website/pages/how-to-add-a-call-to-action-block-to-your-website-page-and-landing-page",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Add a Call to Action block to a website page and landing page

> Learn to add a Call to Action Block to encourage website visitors to open a page, purchase an offer, and more.

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

***

## What is a Call to Action?

A Call to Action (CTA) is commonly used to encourage an immediate response from your site users to subscribe to your marketing emails or purchase an Offer.

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

***

## Adding a Call to Action block

* Open the **Website** tab from the Dashboard.
* Select the **Website Pages** or **Landing Pages** tab.
* Open the page editor for your Page. [Learn more](/articles/website/pages/how-to-get-to-the-page-editor)
* Click the Section you want to edit or [create a new Section](/articles/website/pages/add-sections-to-your-pages).
* In the sidebar, click **Add Content**.
* From the list, select **Call to Action**.
* Your newly created Call to Action Block will generate at the bottom of the Section.
* Click **Save** to keep your changes:

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

***

## Customizing your Call to Action block

In a Call to Action block, customize the:

* [Block Width](/articles/website/pages/how-to-customize-the-block-width)
* Text
* Button Action
* Behavior
* Button Background Color
* Button Width
* Button Style
* Button Size
* Border Radius
* Block Settings

### Text

Enter your custom text to display on your CTA button. Use this opportunity to communicate to your users what the button will do.

### Button actions

Select a Button Action to:

* Go to a Landing Page
* Go to a Checkout Page
* Download a file
* Go to a URL
* Open a [two step optin](/articles/website/pages/how-to-use-the-two-step-optin-popup) popup for visitors to complete a form
* Go to a section on the page
* Open a modal

<Note>
  **Note:** When using the **Go to a URL** action, be sure to enter a full URL (e.g., [https://kajabi.com/](https://kajabi.com/)). If your button action is set to "Download a file," there is a 250MB file limit.
</Note>

### 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 **vertical bar** allows you to select the hue.
* The **square box** allows you to select the brightness.
* The **horizontal 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 only.
</Note>

Click the **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:

* A solid colored button
* The 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.

If you are customizing a CTA block in your standard website page, enter your desired value up to 50 to customize the individual buttons appearance.

### Call to Action modal

Launch a modal when the CTA is clicked. Within the modal you can customize:

* Modal text
* Text alignment
* Modal text color
* Modal background color

Select Edit Modal to preview and edit the Modal within the theme editor.

<Note>
  **Note:** The Call to Action Modal is only available in Encore 1.8.0 and above. [Learn more.](/articles/website/pages/how-to-update-a-template)
</Note>

### Block settings

To adjust the look and feel of the Block, configure your Block Settings by customizing the:

* [Background](/articles/website/pages/customizing-block-background-settings)
* [Desktop and Mobile Layout](/articles/website/pages/customizing-block-layout-settings)
* [Animations](/articles/website/pages/customizing-block-animations)
* [Time Reveal](/articles/website/pages/customizing-time-reveal-settings)