# Showcase Heroes

If you do not see this in your menu, your website does not use it.

Showcase Heroes comes with our higher plans. Contact us to upgrade, or visit your
customer portal for a self-service upgrade to a supported plan.

A hero is the big band at the top of a page. A photo, a video or a run of
photos behind it, with your headline and your buttons on top.

This screen holds the wording and the pictures. It does not decide which page
the hero shows on. That is a block, and it comes later on this page.

Go to **Plugins**, then **Showcase Heroes**.

## The list

![The Showcase Heroes screen with one record named Homepage. Four numbered marks: 1 on the New hero button, 2 on the slug under the name, 3 on Edit, 4 on the red Delete button.](../../../assets/screenshots/showcase-heroes-list.png)

*One hero, ready to be pointed at from a page.*

**1. New hero.** Starts a blank one.

**2. The slug.** The short name in the gray box. A page uses this to ask for
this hero. The **Copy** button next to it puts it on your clipboard.

**3. Edit.** Opens the hero.

**4. Delete.** Read the warning at the bottom of this page first.

## Making or changing a hero

Click **New hero**, or **Edit** on one you already have.

![The top of the hero form. Sections headed Identity, Content and Media, with four numbered marks: 1 on Name, 2 on Slug, 3 on Headline, 4 on the Change button under Image.](../../../assets/screenshots/showcase-heroes-edit.png)

*The form is long. Everything on it can be left empty.*

**1. Name.** What you call this hero, such as "Homepage". Only you ever see it.

**2. Slug.** The short name a page asks for. Leave it empty and it fills itself
in from the name.

**3. Headline.** The big line. This is the one box worth taking your time over.

**4. Change.** Picks the photo. [Media](/content/media/) walks through the
picker. **Clear** takes the photo off again.

Three smaller boxes sit above the headline:

- **Chip** is a small pill at the very top, such as "Now booking spring 2027".
- **Eyebrow** is a short line in capitals above the headline.
- **Subheadline** is a sentence or two under it.

:::caution[Warning]
There is no draft here. The moment you click **Save hero**, your website
changes. Anyone on the page sees the new wording.

Every page that uses this hero changes at the same time. Check the list of
pages before you rewrite a headline.
:::

Click **Save hero** at the top right when you are done.

## Buttons, phone number and trust strip

Scroll down the form for these. All of them can be left empty.

**Calls to action** holds two buttons. Each one needs both a label and a URL,
or it does not show at all. **Primary** is the loud one, **Secondary** the
quiet one. For a page on your own site, start the URL with a slash, like
`/quotes`.

**Phone number** turns into a link that dials. On a phone, one tap and it is
ringing. **Phone label** is what a visitor reads, and it can be anything.
Leave it empty and they read the number.

**Trust strip** is the quiet row under the buttons: "Licensed and insured", "20
years in the valley". Click **Add item** for another line, the arrows to move
one, **Remove** to take one out.

## Choosing how it looks

**Layout & display** is the last part of the form.

**Layout** is the big choice. Four options:

| Layout | What you get |
| --- | --- |
| **Split (image beside text)** | The photo sits next to the words. Quiet, and the safe pick. |
| **Background image** | The photo fills the band, with the words on top of it. |
| **Background video** | A video plays behind the words. It has no play button and no sound. |
| **Carousel** | Up to four photos, one after another. |

Pick a layout with nothing to show and your website quietly uses a simpler one
instead. Pick **Background video** before you have uploaded the video and you
get the photo version until you do.

The three boxes under it only matter for the last three layouts:

- **Alignment** puts the words in the middle or on the left.
- **Overlay strength** is how much your website darkens the picture behind the
  words. Turn it up when the words are hard to read.
- **Section height** is how tall the band is: **Compact**, **Medium**, **Tall**
  or **Full viewport**.

**Animate content in on load** fades the words in as the page opens. It is off
to start with.

## Putting a hero on a page

The hero has to be asked for. That is one block on one page.

1. Open the page under **Content**, then **Pages**.
2. Add a **Showcase Hero** block. [Pages](/content/pages/) shows how.
3. Type the hero's slug into the block's **Hero** box.
4. Save the page, then publish it. [Saving and
   publishing](/start-here/saving-and-publishing/) covers that step.

That is the whole join. The block holds nothing but the slug, so the same hero
can sit on two pages and stay one thing.

Get the slug wrong and nothing shows. No error, no empty band, just no hero.
Copy it off the list screen rather than typing it.

## What it looks like

![A live website hero. A photo fills the band. Four numbered marks: 1 on a small pill reading Now booking spring 2027, 2 on the headline, 3 on the orange button, 4 on the first item of the trust strip.](../../../assets/screenshots/showcase-hero-live.png)

*Every mark here is one box on the form.*

**1. Chip.** **2. Headline.** **3. Primary button.** **4. Trust strip.**

The eyebrow sits between the chip and the headline. The subheadline sits under
the headline. The phone link sits beside the buttons.

## Deleting a hero

:::caution[Warning]
Deleting a hero does not touch the pages that use it. It leaves them showing
nothing at all where the hero was, and no warning appears on the page.

Take the block off those pages first, or point it at another hero. Only then
delete this one.

Your browser asks you to confirm, and it names the slug that is about to stop
working.
:::

Click **Delete** on the hero's row, then confirm.