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

# Hero

> A big, bold opening for your home page or a landing page.

Open a page with a big, bold first impression using the Hero. It holds your main headline, a short intro and up to two buttons, over an illustration, a photo or a video.

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

![Parker's home page Hero as visitors see it: left-aligned, full screen, ghost wordmark "PARKER'S", eyebrow, headline with the last word highlighted.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/hero/guides-sections-hero-overview-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=4e9f9557d4cd92132ae8d3593c1b867e)

A Hero with the ghost wordmark, a highlighted headline and two buttons.

## When to use it

* To open your home page with one clear message and a next step.
* To open a landing page for a campaign, an offer or an event.
* To show a photo or a short video that sets the mood before anything else.

A page has exactly one main heading. The Hero provides it, so a page holds either one Hero or one **Page Header**, never both. For a quiet interior page, the **Page Header** is the lighter choice.

## 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** → **Header** → **Hero**. Put it first on the page, so visitors see it before anything else.

A new page starts with a **Page Header**. To use a Hero instead, swap them:

1. Select the **Page Header**, and choose the round **+** button on its top edge.
2. Choose **Header** → **Hero**. The Hero appears above the Page Header.
3. Select the **Page Header** again, and choose **Remove** (the trash can) in its side toolbar.

The page now has one main heading again.

![The Add Content menu open on the Header group, with the Hero tile ringed.](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/hero/guides-sections-hero-add-menu-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=6de8bcfe4fc4c35881225e670e93d466)

The Hero lives in the Header group.

## What you can change

Select the Hero on the page and choose **Edit**. The editor opens beside the page, so you see each change as you make it. It has four 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 Hero editor open on the Hero tab beside the live Hero, with the four tabs (Hero, Fonts, Buttons, CSS) ringed.](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/hero/guides-sections-hero-editor-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=39a244dd8c6217a5066362ef79c5223c)

The Hero editor, with the page updating beside it.

> [accordion] Hero
>
> Everything about the Hero's own look. Some options appear only once you turn on the one they belong to.
>
> **Layout**
>
> * **Content alignment**: **Left** or **Centered**.
> * **Hero height**: **Full screen** fills the window, **Tall** fills most of it, and **Compact** is a shorter banner for inner pages.
>
> **Ghost wordmark** (a giant outlined word behind the headline)
>
> * **Show ghost wordmark**: turn the giant word on or off.
> * **Ghost wordmark text**: the word to show. Leave it empty to use your business name from **Site settings**. Short words look best.
> * **Ghost wordmark size**: **Display (largest)**, **Large** or **Medium**.
> * **Ghost wordmark fill**: **Fill letters individually (hover)** fills each letter as a visitor points at it. **Fill the whole word (hover)** fills it all at once. **Always solid** keeps it filled.
>
> **Name lockup**
>
> * **Show small name lockup**: a small line with your business name above the headline. It shows only when your business name is set.
>
> **Eyebrow** (a short line that frames the headline)
>
> * **Show eyebrow / kicker** and **Eyebrow**: turn it on and write the text, for example "Daycare · Training · Puppy socials".
> * **Eyebrow placement**: above the headline, below it, or just above the buttons.
> * **Eyebrow weight** and **Eyebrow size**: make it bolder or bigger.
>
> **Headline**
>
> * **Headline**: your main message. It's required, and it becomes the page's main heading.
> * **Highlight last word (sticker)**: puts the last word on a solid color patch. Choose **Dual layer (offset shadow)** or **Single color**.
> * **Headline fill**: keep it solid, or fill it on hover like the wordmark.
>
> **Hashtag**
>
> * **Show hashtag** and **Hashtag**: add a hashtag such as "#parkerspups". Include the #.
> * Choose its placement, size, background patch and tilt.
>
> **Intro**
>
> * **Intro copy**: the introductory text under the headline, one or two sentences.
> * **Intro weight**: make the intro bolder.
>
> **Decorative icon**
>
> * **Decorative icon**: add a small icon **In the name lockup**, **Above the headline**, or **Above the ghost wordmark**. Then pick the icon and its color. For **In the name lockup**, also turn on **Show small name lockup**.
>
> **Background**
>
> * **Background type**: **Illustrated landscape (no media)** shows flat hills and a bouncing ball. You can also choose **Image** or **Video (with image fallback)**.
> * **Background image**: the photo for an Image background.
> * **Background video**: choose a video from your **Videos** library. While it loads, and for visitors who prefer less motion, the Hero shows the video's **Poster / fallback image**. If the video has none, it shows the **Background image**. To set the poster, open the command palette (⌘K, or Ctrl+K on Windows), choose **Videos**, open the video, and choose its **Poster / fallback image**.
> * **Show pause button on background motion**: adds a pause button over the video.
>
> 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, and leave both empty to use your site's colors from **Site design**. The sticker and hashtag patch colors are single colors used in both themes.

> [accordion] Fonts
>
> Use a different typeface for parts of this Hero 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
>
> Two buttons. The first uses your site's main button look and the second uses the outline look. 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 Hero 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 centered, Tall Hero over a photo of puppies at play, wordmark off, sticker on, two buttons.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/hero/guides-sections-hero-photo-centered-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=d34b679d895dda1d2cf007d6874e8d2b)

Centered and Tall, over a photo.

**A photo opener.** Set **Content alignment** to **Centered**, **Hero height** to **Tall**, turn off the ghost wordmark, and choose an **Image** background.

![A Compact Hero used as an interior page banner: centered headline, eyebrow, no wordmark, no sticker, one button.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/hero/guides-sections-hero-compact-banner-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=b9dba251e2f90f0d7be7453c83a03ff0)

A Compact Hero makes a bold banner for an inner page.

**A bold banner for an inner page.** Set **Hero height** to **Compact**, turn off the wordmark and the sticker, and clear the second button's label.

![A left-aligned Hero with a tilted hashtag patch "#parkerspups" below the headline and the decorative icon above it.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/hero/guides-sections-hero-hashtag-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=1c40127b044dc19663818c91a1bc472d)

A hashtag patch and an icon add personality.

**A playful social opener.** Turn on **Show hashtag**, give it a **Solid** background and a tilt, and add a **Decorative icon** above the headline.

## Good to know

* **One main heading per page.** If a page has no Hero or Page Header, or has more than one, the CMS won't publish it. It tells you what to fix.
* **Animations play for visitors only.** While you edit, the Hero shows its finished state. Visitors who prefer less motion also see it without animation.
* **Moving backgrounds.** If you use a video, turn on the pause button so visitors can stop it.
* **Write alt text for your photo.** Alt text is a short description that screen readers read aloud, such as "Two puppies playing tug-of-war on the lawn". To add it, open the command palette (⌘K, or Ctrl+K on Windows), choose **Images**, choose the photo, and fill in **Alt Text**. See [The media library](https://docs.fetchski-attract.com/guides/media/media-library.md).
* **Keep the headline short.** The Hero's photo sits behind the text, so make sure the headline stays readable over it.

## 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] [Page Header](https://docs.fetchski-attract.com/guides/sections/page-header.md)
>
> the lighter opener for inner pages.

> [card] [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md)
>
> put the Hero where you want it.

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

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