---
title: Page settings — titles, heroes and the footer image
excerpt: Set the big banner (hero) at the top of a page, override the page title, and add the footer image.
tags: [pages, hero, banner, title, footer]
target: client:brentwood
---

<!-- wp:paragraph -->
<p>Every page, post, staff profile, course and livestream has a <strong>Page Settings</strong> panel on its edit screen. It controls three things: the large banner (the <strong>hero</strong>) at the top of the page, an optional override for the big page title, and the image that sits behind the footer. Find it below the main content area when you edit a page.</p>
<!-- /wp:paragraph -->

<!-- BWG-SHOT id="page-settings-panel" path="/wp-admin/post-new.php?post_type=page" region="the Page Settings panel (scroll below the content area)" caption="The Page Settings panel, where the hero, title and footer image live." -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I change the big title at the top of a page?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>By default the page shows its normal title. To display something different in the large heading without renaming the page, type it into <strong>Override H1 page title</strong>. Leave it blank to use the normal title. You can italicise or bold part of it with the <code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code> tags.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I add a hero banner to the top of a page?</h2>
<!-- /wp:heading -->

<!-- BWG-SHOT id="page-settings-hero-type" path="/wp-admin/post-new.php?post_type=page" region="the Hero type dropdown in the Page Settings panel" caption="One Hero type choice decides what the banner shows." -->

<!-- wp:paragraph -->
<p>In the Page Settings panel, choose a <strong>Hero type</strong>. That one choice decides what shows in the banner; the matching settings appear just below it. Pick "Off" for no banner.</p>
<!-- /wp:paragraph -->

<!-- wp:table -->
<figure class="wp-block-table"><table><thead><tr><th>Hero type</th><th>What it shows</th></tr></thead><tbody><tr><td>Off — no hero</td><td>No banner. The page starts straight at your content.</td></tr><tr><td>Featured Image</td><td>A single photo (the page's Featured image) as the banner.</td></tr><tr><td>Featured Gallery</td><td>Several photos arranged in a grid.</td></tr><tr><td>Featured Carousel</td><td>Several photos as a rotating slideshow.</td></tr><tr><td>Featured Video</td><td>A background video you upload (mp4 or webm).</td></tr><tr><td>Featured YouTube</td><td>A YouTube video as the banner.</td></tr><tr><td>Home Video Hero (full-width)</td><td>The full-width video banner used on the home page.</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I use a single photo as the hero?</h2>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true,"className":"bw-steps"} -->
<ol class="wp-block-list bw-steps"><!-- wp:list-item -->
<li>Set the page's <strong>Featured image</strong> (in the Featured image panel) — this is the photo the hero uses.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>In Page Settings, set <strong>Hero type</strong> to <strong>Featured Image</strong>.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Adjust the focus and height if needed (next two sections), then click <strong>Update</strong>.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Part of my hero photo is cut off — how do I fix what shows?</h2>
<!-- /wp:heading -->

<!-- BWG-SHOT id="page-settings-focus" path="/wp-admin/post-new.php?post_type=page" region="the Featured image focus / zoom / height controls in Page Settings" caption="Focus and zoom choose which part of a photo stays in the banner." -->

<!-- wp:paragraph -->
<p>These controls live in the <strong>Page Settings</strong> panel and apply when <strong>Hero type</strong> is set to <strong>Featured Image</strong> (see <a href="#bw-how-do-i-add-a-hero-banner-to-the-top-of-a-page">How do I add a hero banner to the top of a page?</a>).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A wide banner can't show a tall photo in full, so you choose which part stays in view with three sliders:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li><strong>Featured image — horizontal focus</strong>: 0 = left, 50 = centre, 100 = right.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Featured image — vertical focus</strong>: 0 = top, 50 = centre, 100 = bottom.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Featured image — zoom</strong>: 100 = no zoom; higher zooms into the focus point.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:group {"className":"bw-callout"} -->
<div class="wp-block-group bw-callout"><!-- wp:paragraph {"className":"bw-callout-label"} -->
<p class="bw-callout-label">Note</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If someone's face or the key subject is near the top of the photo, drop the vertical focus toward 0 so it doesn't get cropped out. Save and preview to check.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I make the hero taller or shorter?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In the <strong>Page Settings</strong> panel, use <strong>Featured image — height</strong>. "Default — fit (16:9)" keeps the image's natural banner shape; the other options set a fixed height from <strong>Short — 320px</strong> up to <strong>Tallest — 768px</strong>. Choose <strong>Custom…</strong> and fill in <strong>Custom height (px)</strong> for an exact height.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I show a gallery or slideshow hero?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A <strong>Featured Gallery</strong> shows several photos in a grid; a <strong>Featured Carousel</strong> shows them as a rotating slideshow.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true,"className":"bw-steps"} -->
<ol class="wp-block-list bw-steps"><!-- wp:list-item -->
<li>In the <strong>Page Settings</strong> panel, set <strong>Hero type</strong> to Featured Gallery or Featured Carousel.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Under <strong>Hero images</strong> (gallery) or <strong>Carousel slides</strong> (carousel), click to add each photo. Each one has its own focus and zoom, like the single-photo hero.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Drag the rows to reorder. For a gallery, set <strong>Gallery columns</strong>; for a carousel, set <strong>Carousel height</strong>.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click <strong>Update</strong>.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I use a video or YouTube hero?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In the <strong>Page Settings</strong> panel, first set <strong>Hero type</strong> to the video option you want (see <a href="#bw-how-do-i-add-a-hero-banner-to-the-top-of-a-page">How do I add a hero banner to the top of a page?</a>). Then fill in the matching field:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li><strong>Featured YouTube</strong> — set Hero type to Featured YouTube and paste the full link into <strong>YouTube URL</strong> (e.g. a <code>youtube.com/watch?v=…</code> address).</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Featured Video</strong> — set Hero type to Featured Video, upload an mp4 or webm to <strong>Hero video</strong>, and optionally set a <strong>Poster / cover image</strong> shown while the video loads.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I turn the hero off?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In the <strong>Page Settings</strong> panel, set <strong>Hero type</strong> to <strong>Off — no hero</strong> and click <strong>Update</strong>. The page then begins at your content, with no banner.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How do I add the image at the bottom of the page?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In the <strong>Page Settings</strong> panel, set <strong>Footer image background</strong> to add a photo behind the footer at the very bottom of the page. Leave it empty and the footer closes up neatly with no gap. When you add an image, the site automatically lays a soft gradient over the top so the footer text stays readable.</p>
<!-- /wp:paragraph -->