JOIN NOW

Docs: Page heroes

This guide explains how to manage the hero banner that appears at the top of your pages.

Understanding the Hero System

Every page on your website uses a two-part system:

  1. Main Page: Contains your page content and SEO settings (what appears in Google search and browser tabs)
  2. Hero Page: Contains the large banner area with the page title and optional background image

This separation lets you manage how your page looks visually versus how it appears in search results.

Creating or Editing a Page with Hero

Step 1: Create/Edit the Main Page

  1. Go to Ghost Admin → Pages
  2. Create a new page or edit an existing one
  3. Set the page URL slug (like "contact")
  4. Set the Title - this is what appears in browser tabs and Google search
  5. Add your page content
  6. Publish the page

Step 2: Create/Edit the Hero Page

  1. Go to Ghost Admin → Pages
  2. Create a new page
  3. IMPORTANT: Name the slug exactly as your main page + "-hero" (like "contact-hero")
  4. In the content area, add your hero text like:
    • Main heading: Contact
    • Subtitle: Get in touch with us
  5. Optional: Add a feature image for a background
  6. Publish the page

How Heroes Work for Different Page Types

Regular Pages (Contact, About, Membership):

  • Need both a main page and a hero page
  • The main page contains all your content
  • The hero page contains the hero section

Special Pages (Workouts, Podcasts, Superstore):

  • Main page can be empty (the system pulls content automatically)
  • Still need a hero page for the banner (already added)

Setting Up Hero Content

Simple hero with title and description:

  • Add a main heading
  • Add a subtitle or description

Hero with a button:

  • Add a main heading
  • Add a description
  • Add a call-to-action button with a link

Minimal hero:

  • Just add a main heading

Adding a Background Image

  1. Edit the hero page (the one ending in "-hero")
  2. Add a feature image
  3. The image will appear as a background with:
    • Automatic grayscale effect
    • Dark overlay for text readability
    • White text color

Without a background image, the hero displays:

  • Clean, centered layout
  • Normal text colors
  • Flexible height

Important Notes

Hero Page Naming:

  • MUST end with "-hero" after your main page slug
  • Examples: "contact-hero", "workouts-hero", "podcast-hero"
  • This naming is required for the system to work

SEO vs Visual Titles:

  • The main page Title field = what appears in Google and browser tabs
  • The hero page content = what visitors see as the big heading
  • These can be different (SEO: "Contact Us", Visual: "GET IN TOUCH")

Troubleshooting

Hero not appearing?

  • Check the hero page slug matches exactly: main-page-slug + "-hero"
  • Verify the hero page is published
  • Make sure you haven't used # in any tags

Wrong title in browser tab?

  • The browser tab title comes from the main page, not the hero
  • Edit the main page's Title field
  • Clear your browser cache if changes don't show

Background image issues?

  • Make sure you've added it as a Feature Image on the hero page
  • Try re-uploading if it doesn't display

Best Practices

DO:

  • Use clear, descriptive titles for SEO (main page)
  • Test how your hero looks with and without background images
  • Use high-quality images for backgrounds

DON'T:

  • Forget the "-hero" suffix on hero page slugs
  • Use low-quality or stretched background images

Remember: Every page needs both parts - the main page for content and SEO, and the hero page (ending in "-hero") for the visual banner.