Every page and post on this site can have a hero header — the large banner at the top with a headline over a background image. You control it from the Hero Header panel in the editor sidebar, with four settings: Title, Caption, Background image, and Overlay opacity.

Where to find it

Open any Page or Post in the editor. In the right-hand sidebar, look for the Hero Header panel (you may need to scroll past the standard WordPress panels, or click the panel heading to expand it). Everything below lives in that one panel.

Title

The headline shown in the hero banner. This is optional — leave it blank and the hero simply uses the page’s own title, which is how most pages work.

Fill it in when the hero should read differently from the page title. That’s genuinely useful, because the page title does other jobs: it’s what appears in the browser tab, in search results, and in link previews when someone shares the page. A page can now be titled Home for those purposes while its hero reads something more inviting.

HTML is allowed here. The most common use is <br> to split a long headline over two lines:

Your WordPress content.<br> A faster front end.

Inline formatting works too — <strong>, <em>, and links. For safety, scripts and styles are stripped out when you save.

Caption

A short line of supporting text below the hero headline. Also optional — but unlike the Title, it has no fallback: leave it blank and the hero shows no caption at all. That’s deliberate, so a page can have a clean headline-only hero.

Clearing the field and updating removes the caption again. HTML is allowed here as well, so you can bold a phrase or include a link.

Note for existing pages: the hero caption used to be taken from the page’s Excerpt. It no longer is. The excerpt now does its proper job — feeding search-result summaries, the page description used in link previews, and the card summaries in listings — so if a page’s hero looks like it lost its subheading, copy the text into the Caption field.

Background image

Click Select image to choose the hero backdrop from the Media Library (Change image to swap it, Remove to clear it). Use a wide, high-resolution landscape image — it’s displayed full width and cropped to the banner’s height.

If you don’t set one, the page’s Featured Image is used instead, and if there’s no featured image either, a placeholder appears. Setting the hero background explicitly is preferable: it leaves the featured image free for listing thumbnails and social sharing.

Overlay opacity

A dark wash laid over the background image so the headline stays readable. Pick a value from 0.2 (barely tinted) to 0.7 (heavily darkened); the default is 0.6. Busy or bright photos usually need a higher value; dark, simple images can go lower.

Pages that share a hero

A few areas of the site don’t have a page of their own to edit, so they borrow their hero from a page you nominate. Editing that page’s Hero Header changes the whole area:

• The blog — the blog listing and every individual post show the hero of the page assigned under Settings → Reading → Posts page.
• The Knowledge Base — the Knowledge Base landing page and every article show the hero of the page chosen in Soames Settings → Knowledge Base page.

So to change the banner above your blog posts, edit the Hero Header on your Blog page — not on each post. Individual posts and articles keep their own titles in the article body; the hero above them is shared.

Seeing your changes

Hero settings are saved with the page, so click Update (or Publish) as normal. As with any content change, the public site rebuilds automatically and your new hero appears about a minute later.

Quick reference

• Title — blank falls back to the page title. HTML allowed; <br> for a two-line headline.
• Caption — blank means no caption is shown. HTML allowed. No longer taken from the excerpt.
• Background image — falls back to the featured image, then a placeholder.
• Overlay opacity — 0.2 to 0.7; default 0.6. Raise it if the headline is hard to read.