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

# Final CTA

> Close a page with a bold colored band, a headline and two buttons.

End a page with a clear next step. The Final CTA (short for "call to action") is a bold colored section with a headline, a line or 2 of short text and 2 buttons.

 **Who can do this:** anyone who can edit the page. The **CSS** tab is for Admins and Owners.

![Parker's Final CTA as visitors see it: a solid accent band with two decorative rings, a rocket icon, the headline "Ready for your pup's first day?", the line "Book a free trial visit and meet the team." and two buttons, Book a visit and Contact us.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/final-cta/guides-sections-final-cta-overview-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=a94b26003bb3e92ff7ddb27dfe90a857)

A closing band with one clear next step.

## When to use it

* To end your home page with a clear next step, such as booking a visit.
* To close a service or pricing page with a call to get in touch.
* To finish a blog post with an invitation to visit or sign up.

Use one per page, at the bottom. It's meant to be the loudest moment on the page, so it works best on its own.

## Add it to a page

**1. Open the page**

Sign in, open the page on your site, and choose **Edit** in the edit bar at the top.

**2. Find the spot**

Select the section next to where the new one should go. A round **+** button appears on its top and bottom edges. On an empty page, choose **Add Content** in the middle.

**3. Choose the section**

The **Add Content** menu opens with its groups. Choose the section, then select it and choose **Edit** in its side toolbar to make it yours.

For the full walkthrough, see [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md).

Choose **Add Content** → **Conversion** → **Final CTA**. Put it last on the page, above the footer.

The new section arrives with sample words and a first button that links to the Fetchski website. Before you publish, replace them:

**1. On the Final CTA tab, write your Headline and Supporting copy, such as "Ready for your pup's first day?" and "Book a free trial visit and meet the team."**

**2. On the Buttons tab, change the first button's label and link to your own next step, such as "Book a visit" linking to /contact-us**

**3. Check the second button**

It starts as "Contact us", linking to your Contact Us page. Change it, or clear its label to hide it.

## What you can change

Select the Final CTA on the page and choose **Edit**. The editor opens beside the page, so you see each change as you make it. It has 4 tabs.

Your changes go into the page's draft. Visitors see them once the page is published with **Update** in the edit bar (**Publish** on a page never published).

![The Final CTA editor open on the Final CTA tab beside the live band, with the four tabs (Final CTA, Fonts, Buttons, CSS) and Background type ringed, above the band color pickers for each theme.](https://mintcdn.com/fetchski-attract-api/l0eBwtzJpLtH9LWE/images/cms/guides/sections/final-cta/guides-sections-final-cta-editor-light.png?fit=max\&auto=format\&n=l0eBwtzJpLtH9LWE\&q=85\&s=f32f3bc50a02ec8fa7072fbd76fcf24b)

The Final CTA editor, with the band updating beside it.

> [accordion] Final CTA
>
> Everything about the band's own look. Some options appear only once you turn on the one they belong to.
>
> **Layout**
>
> * **Content alignment**: **Centered** or **Left**.
>
> **Eyebrow**
>
> * **Show eyebrow / kicker** and **Eyebrow**: a short line above the headline. It's off by default.
>
> **Decorative icon**
>
> * **Decorative icon**: **Above the headline** shows an icon, a rocket to start. Choose **None** to remove it.
> * **Icon name**: any Font Awesome icon name, such as "calendar-check" or "paw". Find names at [fontawesome.com/icons](https://fontawesome.com/icons) and type them without "fa-". Then set its **Icon family**, **Icon color**, **Icon animation** and **Icon size**.
> * **Icon tilt**: **Tilt left**, **Tilt right** or **None**.
>
> **Headline and copy**
>
> * **Headline**: your closing message, such as "Ready for your pup's first day?".
> * **Supporting copy**: 1 or 2 sentences under the headline.
> * Each has its own weight and color.
>
> **Background**
>
> * **Background type**: **Solid color** keeps a bold block of color. **Image (with overlay)** puts a photo behind the text, under a tint that keeps it readable.
> * **Band color**: the solid color. Leave it empty to use your site's main color.
> * **Background image**: the photo, for an image background.
> * **Overlay color** and **Overlay opacity (%)**: the tint over the photo and how strong it is. The default is 70%.
> * **Show decorative rings**: the 2 large outlined circles on the band. It's on by default. Choose their **Ring color** if you like.
>
> Most colors come in pairs, one for the dark theme and one for the light theme. Leave the light one empty to use the dark one in both themes. Leave both empty to keep text readable on your site's main color.

> [accordion] Fonts
>
> Use a different typeface for parts of this section only, such as the headline. Leave it empty to use the page's fonts, which normally come from **Site design** → **Typography**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Buttons
>
> The band has 2 buttons. They start in colors that stand out on the band: the first solid, the second an outline.
>
> The first starts as "Get started", linking to the Fetchski website, so always change it (see [Add it to a page](#add-it-to-a-page)). The second starts as "Contact us", linking to your Contact Us page.
>
> Each button shows only when it has both a label and a link, so clear the label to hide a button. To learn every button option, see [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).

> [accordion] CSS
>
> Custom styles for this section only. Admins and Owners can change this tab. See [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md).

## Looks you can make

![A Final CTA over a photo of puppies playing, with an accent tint over the photo, no rings, centered headline and both buttons.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/final-cta/guides-sections-final-cta-image-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=2aefa69fec2f085aa4cfdd2c064494f6)

A photo behind the band, tinted so the text stays readable.

**A photo band.** Set **Background type** to **Image (with overlay)**, choose a **Background image**, set **Overlay opacity (%)** to 60, and turn off **Show decorative rings**.

![A left-aligned Final CTA with an eyebrow "Limited spots" above the headline, no icon, and one button.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/final-cta/guides-sections-final-cta-left-eyebrow-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=870acca4b793b3699203184febc1c21c)

Left-aligned, with an eyebrow and a single button.

**One clear action.** Set **Content alignment** to **Left**, turn on **Show eyebrow / kicker**, set **Decorative icon** to **None**, and clear the second button's label.

## Good to know

* **Animations play for visitors only.** The band's text and buttons rise into view as visitors scroll to it. While you edit, you see the finished state. Visitors who prefer less motion see it without animation.
* **Check the contrast.** If you change the band color or the text colors, make sure the headline stays easy to read in both themes.
* **Alt text for a background photo.** If the photo only sets a mood, leave its alt text empty in the media library, so screen readers skip it. If it shows something visitors should know about, write alt text for it.
* **Where it fits.** The Final CTA is a full-width band. It isn't offered inside columns or in a blog post's body, but you can add it after a post.

## Appearance options

Most sections also share a few tabs that work the same everywhere:

* **Background**: set the color behind the section, separately for the dark and light themes.
* **Fonts**: use a different typeface for parts of this section only.
* **CSS**: add custom styles to this section. Admins and Owners can change it.

See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md) for every option.

## Related

> [card] [Hero](https://docs.fetchski-attract.com/guides/sections/hero.md)
>
> the bold opener to match your closing band.

> [card] [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md)
>
> every button option.

> [card] [Pricing / Packages](https://docs.fetchski-attract.com/guides/sections/pricing.md)
>
> show your packages just above it.

> [card] [Motion](https://docs.fetchski-attract.com/guides/site-design/motion.md)
>
> turn site animations on or off.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.