Hero
The Hero cover turns a normal Ghost page into the opening block of the homepage. You write the headline and the intro text in the page body, and Wire renders them at the top of the homepage with the page's feature image behind them.
Setup Instructions#
- Go to Pages → New page
- Enter a page title, for example
Home hero— this title is only used inside Ghost admin - Write your headline in the page body as a heading, then add the intro text below it
- Open Page settings and change Page URL to home-hero
- Optionally, add a Feature image — it becomes the hero background
- Optionally, add one call to action tag in Page settings → Tags (see below)
- Click Publish
- Check that Homepage cover is set to
Heroin ⛭ Settings → Design → Customize → Theme
The page title and the Excerpt field are not rendered on the homepage. Only the page body, the feature image and the internal tags are used. If you type your headline into the title field and leave the body empty, the hero appears blank.
What Each Field Does#
| Field in Ghost | Where it appears |
|---|---|
| Page title | Nowhere on the homepage — it is an admin-only label |
| Excerpt | Nowhere on the homepage |
| Page body | The whole hero text: headline, paragraphs, links, buttons |
| Feature image | Full-bleed background of the hero panel |
| Publish state | The page has to be published; a draft is treated as missing |
| Page URL | Must be home-hero, otherwise the theme cannot find the page |
| Internal tags | Choose the call to action and the alignment |
Because the text lives in the page body, you can format it the way you would format a post: a heading for the headline, a paragraph for the intro, bold text and links inside the paragraph.
With and Without a Feature Image#
The feature image changes the shape of the hero, not just its background:
- With an image — the hero becomes a tall panel, close to the full height of the screen, with the image behind it and the text in white
- Without an image — the hero is a compact intro block in your normal text colors, and the tag carousel follows right below it
Use a dark or evenly lit image. The theme dims it slightly, but busy photos still make white text hard to read.
Call to Action#
The hero can end with one call to action. Add the matching internal tag to the home-hero page in Page settings → Tags, typing the tag with its leading # so that Ghost keeps it hidden from your site.
| Internal tag | Result |
|---|---|
#home-hero-show-subscription | An email subscription form under the text |
#home-hero-show-button | A member link that reads Sign in for visitors and Account for signed-in members |
#home-hero-show-social-links | Your social account icons, in the bottom right corner of the hero |
Only one call to action is shown. If the page carries more than one of these tags, the subscription form wins, then the member link, then the social links. Without any of these tags the hero ends after your text.
The subscription form and the member link need Ghost memberships to be turned on in ⛭ Settings → Membership. With memberships off, both render nothing.
Alignment#
Add #home-hero-align-center to the same page to center the headline, the text and the call to action. Without it, the hero is aligned to the left.
If the Page Is Missing#
When there is no published page with the slug home-hero, the hero falls back to:
- your publication title as the headline
- your publication description as the intro text
- no background image and no call to action
Both values come from ⛭ Settings → General. A draft page counts as missing, so publish the page before checking the homepage.
Related#
- Homepage cover — switching between the Hero and the featured post covers
- Social links — where the social accounts come from