Skip to main content
Give an inner page, such as About Us or Contact Us, a clear title band with the Page Header. It shows the page’s title with a small eyebrow above it, an optional lead paragraph, and up to two buttons. Who can do this: anyone who can edit the page. The CSS tab is for Admins and Owners.
Parker's About Us Page Header as visitors see it: eyebrow "Parker's Puppy Playland", title "About Us", a one-line lead, a solid Book a visit button and an outlined See our packages button.Parker's About Us Page Header as visitors see it: eyebrow "Parker's Puppy Playland", title "About Us", a one-line lead, a solid Book a visit button and an outlined See our packages button.

A Page Header with an eyebrow, a lead and two buttons.

When to use it

  • To open any inner page with a clear title, such as About Us, Services or Contact Us.
  • To add a short sentence under the title that tells visitors what the page is about.
  • To put a quiet photo behind the title, without the weight of a full Hero.
A page has exactly one main heading. The Page Header provides it, so a page holds either one Page Header or one Hero, never both. For your home page or a landing page, the Hero is the bolder choice.

Add it to a page

1

Open the page

Sign in, open the page on your site, and choose Edit in the edit bar at the top.
2

Find the spot

Select the section next to where the new one should go. A round + button appears on its top and bottom edges. On an empty page, choose Add Content in the middle.
3

Choose the section

The Add Content menu opens with its groups. Choose the section, then select it and choose Edit in its side toolbar to make it yours.
For the full walkthrough, see Add, move and remove sections. A new page started from Blank page already has a Page Header, so you usually just edit it. To add one yourself, choose Add Content → Header → Page Header. Put it first on the page.
The Add Content menu open on the Header group, with the Page Header tile ringed.The Add Content menu open on the Header group, with the Page Header tile ringed.

The Page Header lives in the Header group, beside the Hero.

What you can change

Select the Page Header on the page and choose Edit. The editor opens beside the page, so you see each change as you make it. It has five tabs. Your changes go into the page’s draft. Visitors see them once the page is published with Update in the edit bar (Publish on a page never published).
The Page Header editor open on the Page Header tab beside the live band, with the five tabs (Page Header, Background, Fonts, Buttons, CSS) ringed and the Eyebrow select open.The Page Header editor open on the Page Header tab beside the live band, with the five tabs (Page Header, Background, Fonts, Buttons, CSS) ringed and the Eyebrow select open.

The Page Header editor, with the band updating beside it.

The words in the band and how they look.Title
  • Headline: leave it empty to show the page’s own title (the usual choice), or fill it in to make the band’s heading read differently. It only changes the band. Menu labels are set in Site design → Header: Navigation. Search results use the page’s SEO title (on its SEO tab) if it has one.
  • Title color (dark theme) and Title color (light theme): leave them empty to use your site’s text color.
  • Title weight and Title size: weight is how light or bold the letters are, and size is how big they are. The title starts Extra bold at Normal size. Size goes from Small to Extra large.
Eyebrow (the small label above the title)
  • Eyebrow: Business name (from Global) shows your business name from Site settings → Brand. Custom text lets you write your own in Eyebrow text, such as “Daycare · Training · Play”. Hidden removes it.
  • Eyebrow color (dark theme), Eyebrow weight and Eyebrow size: change how it looks while it shows.
Lead paragraph
  • Lead paragraph: one or two sentences under the title. Leave it empty for a title-only band.
  • Lead color (dark theme), Lead weight and Lead size: the lead starts at Normal weight and size, in your site’s muted text color.
Each color can be set separately for the dark and light themes. Leave the light one empty to use the dark one in both.
The band’s color, and an optional photo behind it.
  • Section background (dark theme) and Section background (light theme): the band’s color. It starts on Sunken, a shade darker than the page. Choose Transparent (page background) to remove the band’s own color. The title, text and buttons stay, on your page background.
  • Background image: a photo behind the title. Without a photo, the band shows a large, thin circle peeking in from its top-right corner. A photo replaces that circle.
  • Overlay color (dark theme) and Overlay opacity (%): a tint over the photo that keeps the text readable. It starts at 55%. Raise it if the title is hard to read.
See What every section shares for every background choice.
The Background tab with a background image chosen and the Overlay opacity (%) slider ringed, beside the band showing the photo under its tint.The Background tab with a background image chosen and the Overlay opacity (%) slider ringed, beside the band showing the photo under its tint.

A photo with a tint, so the title stays easy to read.

Use a different typeface for parts of this band only, such as the title. Leave it empty to use the page’s fonts, which normally come from Site design → Typography. See What every section shares.
Two buttons, under the lead paragraph. A new Page Header has none: each button shows once it has both a Button label and a Button link.The tab opens with a Live preview of both buttons, with a Dark and Light switch. Point at a button in the preview to see its hover effect. To go back to one of your site’s standard looks, choose Primary Default or Secondary Default under that button. Your label, link and icon stay as they are.To learn every button option, see Buttons and card styles.
Custom styles for this band only, such as its title, its lead or its button row. Admins and Owners can change this tab. See Custom CSS.

Looks you can make

A Page Header over a photo of the indoor play yard, with a dark tint, the eyebrow, title and lead in light text, and one button.A Page Header over a photo of the indoor play yard, with a dark tint, the eyebrow, title and lead in light text, and one button.

A photo band for a services page.

A photo band. On the Background tab, choose a Background image and keep Overlay opacity (%) around 55. Clear the second button’s label for a single call to action.
A minimal Page Header: no eyebrow, no lead, no buttons, a Large title on a Transparent background.A minimal Page Header: no eyebrow, no lead, no buttons, a Large title on a Transparent background.

A quiet, title-only band for a legal page.

A quiet title for a legal page. Set Eyebrow to Hidden, leave the lead and buttons empty, make the Title size Large, and choose Transparent (page background).
A Page Header on the Accent (soft tint) band with a custom eyebrow "Now enrolling" and one button "Book a puppy social".A Page Header on the Accent (soft tint) band with a custom eyebrow "Now enrolling" and one button "Book a puppy social".

A tinted band with a custom eyebrow for an offer.

A band for an offer. Choose Accent (soft tint), set Eyebrow to Custom text with a short hook such as “Now enrolling”, and add one button.

Good to know

  • One main heading per page. The Page Header’s title is the page’s main heading. If a page has no Page Header or Hero, the CMS won’t publish it. It tells you: “This page has no main heading. Add a Page Header section (or a Hero) at the top of the page, then publish again.”
  • Two main headings won’t publish either. If a page has both a Page Header and a Hero, or two of either, the CMS asks you to keep exactly one.
  • Drafts are never blocked. You can save a page in any state while you work. The check runs only when you publish.
  • Keep it at the top. The band leaves room at the top for your site’s menu. Lower down the page, it shows a large gap above it.
  • Page Headers stay out of columns and blog posts. A blog post shows its own title, so it never needs one.
  • Animations play for visitors only. While you edit, the band shows its finished state. Visitors who prefer less motion also see it without animation.

Appearance options

Most sections also share a few tabs that work the same everywhere:
  • Background: set the color behind the section, separately for the dark and light themes.
  • Fonts: use a different typeface for parts of this section only.
  • CSS: add custom styles to this section. Admins and Owners can change it.
See What every section shares for every option.

Hero

the bolder opener for your home page.

Pages and the page tree

create a page that starts with a Page Header.

Drafts, publishing and scheduling

make your page live.

Buttons and card styles

every button option.