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

# CTA

> The main features of the CTA block.

This is a simple block with some text and one or more CTA buttons that accomplish certain actions. The block has a **Title**, **Subtitle**, and a **Button(s)**.

<Frame caption="CTA Block">
  <img src="https://mintcdn.com/softr-2b8a27e1/X6254DSqrOzqPIWR/building-blocks/images/cta/image1.png?fit=max&auto=format&n=X6254DSqrOzqPIWR&q=85&s=a750623801db702318475e53f5f65c1c" alt="CTA Block" width="2148" height="628" data-path="building-blocks/images/cta/image1.png" />
</Frame>

# Common Block Features

## Title, Subtitle, and Background Image

These settings are located under the **Features** tab of block settings, and here you customize the **Title** and **Subtitle** texts and can add a **Background Image** for the whole block.

<Frame caption="Title, Subtitle, and Background Image">
  <img src="https://mintcdn.com/softr-2b8a27e1/X6254DSqrOzqPIWR/building-blocks/images/cta/image2.png?fit=max&auto=format&n=X6254DSqrOzqPIWR&q=85&s=d472c1d7dc53227395b9d539adbca67d" alt="Title, Subtitle, and Background Image" width="846" height="982" data-path="building-blocks/images/cta/image2.png" />
</Frame>

## Button

By default, there's only one button, but you can use the **Add Button** option to add more buttons.

<Frame caption="Adding a button">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/cta/image3.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=99f20aedbe5c0ced633fd6a227c276d6" alt="Adding a button" width="842" height="758" data-path="building-blocks/images/cta/image3.png" />
</Frame>

In the [Call to action with email capture](/6772b65a34c84bfdbe1bc16e8b03f525) layout the button allows to capture the user's email, but in the rest of the layouts it has the following **Action** options:

* **Open page** to open another page within the app;

* **Scroll to section** to scroll to a specific section within the page;

* **Open external url;**

* **Open Modal** to open another page within a pop-up.
  <Frame caption="Button actions">
    <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/cta/image4.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=27df457062ec08a45d890f5c1c9fdb66" alt="Button actions" width="828" height="774" data-path="building-blocks/images/cta/image4.png" />
  </Frame>

# CTA Block Layouts

## Layout: Call to action with a button

<Frame caption="Call to action with a button">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/cta/image5.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=1227e2263629256236d04bacd654a613" alt="Call to action with a button" width="2148" height="628" data-path="building-blocks/images/cta/image5.png" />
</Frame>

A layout with a button positioned at the bottom of the block.

## Layout: Call to action with email capture

<Frame caption="Call to action with email capture">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/cta/image6.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=e2710cbc665e4e9597400e2abc6a5838" alt="Call to action with email capture" width="1376" height="674" data-path="building-blocks/images/cta/image6.png" />
</Frame>

In this layout, instead of a simple CTA button, you have an email capture area. You can set the button **Action** to send the captured email to one of the supported services (more details in the [Integrations](/integrations/etS18kJqm1fuD58KCsjC3z/mailchimp/2GvSLRGrgMfe8S3drMWao1) section) or simply forward it to the specified email address.

<Frame caption="Button actions">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/cta/image7.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=485bed99a5849586c438e220c1432c2a" alt="Button actions" width="840" height="846" data-path="building-blocks/images/cta/image7.png" />
</Frame>

## Layout: Call to action with a button on the right

This layout is similar to the Call to action with a button but the button is positioned on the right hand.

<Frame caption="Call to action with a button on the right">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/cta/image8.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=65aa32782d25f698d2fb6e96ed7ba9ce" alt="Call to action with a button on the right" width="1936" height="628" data-path="building-blocks/images/cta/image8.png" />
</Frame>

## Layout: Call to action with a text and action button

<Frame caption="Call to action with a text and action button">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/cta/image9.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=112b1ededaae1f093eb629c7915a0468" alt="Call to action with a text and action button" width="2164" height="666" data-path="building-blocks/images/cta/image9.png" />
</Frame>

This is a layout with a large text on a dark background and a CTA button.
