Hero

A page-top hero banner with flexible backgrounds, heights, and text placement.

View demo

Full-bleed hero with photo background, overlay copy, and a zigzag transition into columns.
Full-bleed hero with photo background, overlay copy, and a zigzag transition into columns.

Usage

The Hero is the banner at the top of a page: a big headline, a supporting line, and usually a button, over a photo, video, or color. New pages include one at the top automatically, and the block has plenty of appearance options so you can shape it to fit each page.

A site-wide Customizer setting controls whether your navigation blends into the Hero when it's the first block on a page, or stays separate above it.

Content fields

The Hero has four content fields: Headline, Subheadline, Button, and Logo. Edit them right on the block or in the sidebar. If you delete a field on the block, it disappears from the editor until you add text again in the sidebar.

By default the Headline is the page's H1 and the Subheadline is an H2. Change the heading level with Tag under each field in the Content panel; it appears once the field has text. How the text looks is set separately with Style, so a headline can stay an H1 in the page outline while looking smaller.

  • Headline and Subheadline — edit on the block or in the Content sidebar panel
  • Link URL — set in the toolbar or sidebar; Link Text appears once a URL is added (defaults to "Learn More")
  • Logo — upload with Choose Logo; SVG is recommended. Size sets the logo width in pixels, and the height follows. Remove it with Remove Logo

Layout

  • Text Position — places the headline, subheadline, button, and logo within the hero and aligns the text to match. For example, lower-right puts content in that corner and right-aligns it. Right alignment switches to left on mobile.
  • Content Width — Wide (default) or Full for the area that holds the text

Typography and button

  • Style (under Headline and Subheadline) — text style presets from your Customizer (H1–H6 or paragraph). These change the look only, not the heading level.
  • Link Style — Button, Alt, Hollow, Secondary, Ghost, or Subtle for the call to action

Turn on White Text in the block toolbar, or set Text Color to Light in the sidebar, on dark backgrounds. It applies to everything in the hero, so you don't need to set text color on each piece.

Size and height

Size presets set the hero height:

  • Auto — same as a small hero on desktop, but grows to fit the content on mobile
  • SM, MD, LG, XL — preset heights for desktop and mobile
  • Full — fills the screen

Fine-tune with the Desktop Height (VH) and Mobile Height (VH) sliders, measured as a percentage of the screen height.

Text legibility

Help text stand out on busy image or video backgrounds with Overlay (Text Legibility):

  • Overlay — a gradient or solid color over the background (Overlay Style, Overlay Color, Overlay Opacity)
  • Text Box — puts the content in a box with its own background; follows the Text Color setting
  • Text BG — a colored background behind the text area only; often removes the need for an overlay

Choose the clear overlay swatch or set opacity to 0% to turn the overlay off.

Background

Use Type to choose a background, much like the Section block:

  • Color — a solid color from your palette
  • Image — a photo with focal point, loading options, and optional blur
  • Pattern — a repeating texture with a Background Size control; SVG or seamless PNG recommended
  • Video — a background video; its first frame is used as the poster and mobile fallback

Image and video backgrounds have BG Focal Point, Disable Lazy Load, and High Fetch Priority. Image backgrounds also have Blur and Blur Amount.

Block width

The Hero supports Wide and Full alignment from the block toolbar (Full is the default). Full-width heroes span the whole screen; Wide follows your content width.

Screenshots

Front-end

  • Contact-page hero with bottom-left copy over a photo, followed by an image-and-text band.
    Contact-page hero with bottom-left copy over a photo, followed by an image-and-text band.
  • Hero with a boxed headline over a photo background and a zigzag edge into columns.
    Hero with a boxed headline over a photo background and a zigzag edge into columns.

Editor

  • Image background settings — overlay opacity, focal point, and lazy-load options.
    Image background settings — overlay opacity, focal point, and lazy-load options.
  • Hero content settings — headline, subheadline tags and styles, and text position.
    Hero content settings — headline, subheadline tags and styles, and text position.

Settings

Content

Headline setting in the block editor sidebar
Headline

The main heading of the hero. You can also edit it right on the block.

Tag setting in the block editor sidebar
TagAvailable when Headline is enabled
  • h1default
  • h2
  • h3
  • h4
  • h5
  • h6
  • p
Style setting in the block editor sidebar
StyleAvailable when Headline is enabled

How the headline looks. It doesn't change the heading level; use Tag for that.

  • h1
  • h2default
  • h3
  • h4
  • h5
  • h6
  • p
Subheadline setting in the block editor sidebar
Subheadline

A supporting line below the headline. You can also edit it right on the block.

Tag setting in the block editor sidebar
TagAvailable when Subheadline is enabled
  • h1
  • h2default
  • h3
  • h4
  • h5
  • h6
  • p
Style setting in the block editor sidebar
StyleAvailable when Subheadline is enabled

How the subheadline looks. It doesn't change the heading level; use Tag for that.

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • pdefault
Link URL setting in the block editor sidebar
Link URL
Link Style setting in the block editor sidebar
Link StyleOnly appears after you add a button URL.
  • Buttondefault
  • Alt
  • Hollow
  • Secondary
  • Ghost
  • Subtle
Link Text setting in the block editor sidebar
Link TextOnly appears after you add a button URL.

Appears once Link URL is set.

Text Position setting in the block editor sidebar
Text Position

Where the content sits in the hero, with text aligned to match. Right alignment switches to left on mobile.

  • upper-left
  • upper
  • upper-right
  • left
  • centerdefault
  • right
  • lower-left
  • lower
  • lower-right
Logo setting in the block editor sidebar
Logo

An optional logo above the headline. SVG files stay sharp at any size.

Size setting in the block editor sidebar
Size

Logo width in pixels. The height follows automatically.

Appearance

Content Width setting in the block editor sidebar
Content Width

Whether the text area spans the full width of the hero or stays within the wide content width.

  • Full
  • Widedefault
Size setting in the block editor sidebar
Size

Auto matches SM on desktop but grows to fit the content on mobile. Full fills the screen.

  • Auto
  • SM
  • MDdefault
  • LG
  • XL
  • Full
Desktop Height (VH) setting in the block editor sidebar
Desktop Height (VH)

Hero height on desktop, as a percentage of the screen height. Choosing a Size preset resets this.

Mobile Height (VH) setting in the block editor sidebar
Mobile Height (VH)

Hero height on phones, as a percentage of the screen height. Choosing a Size preset resets this.

Text Color setting in the block editor sidebar
Text Color

Light switches all the hero's text to light colors for dark backgrounds. Set it here rather than on individual pieces, so you can change the background later without restyling.

  • Dark
  • Light
Overlay (Text Legibility) setting in the block editor sidebar
Overlay (Text Legibility)

Helps text stand out on image or video backgrounds. Overlay tints the whole background, Text Box puts the content in a box, and Text BG adds a background behind just the text.

  • Overlaydefault
  • Text Box
  • Text BG
Overlay Style setting in the block editor sidebar
Overlay StyleOnly visible when Overlay (Text Legibility) is set to "Overlay."

Gradient fades the overlay color across the background; Overlay covers it evenly.

  • Gradientdefault
  • Overlay
Overlay Color setting in the block editor sidebar
Overlay Color

Tints the background with a palette color, black, or white, so text reads more easily.

Overlay Opacity setting in the block editor sidebar
Overlay Opacity

How strong the overlay is. 100% is a solid color; 0% turns the overlay off.

Background

Type setting in the block editor sidebar
Type

What fills the hero background: a solid color, image, repeating pattern, or video. Each type shows its own settings below.

  • Color
  • Imagedefault
  • Pattern
  • Video
Color setting in the block editor sidebar
ColorShown when the background type is "Color."
Background Image setting in the block editor sidebar
Background ImageShown when the background type is "Image."
BG Focal Point setting in the block editor sidebar
BG Focal PointShown when the background type is "Image."

Drag the dot to the most important part of the image. That spot stays in view as the hero crops on different screen sizes.

Disable Lazy Load setting in the block editor sidebar
Disable Lazy LoadShown when the background type is "Image."

Loads the background right away instead of waiting until it's needed.

High Fetch Priority setting in the block editor sidebar
High Fetch PriorityShown when the background type is "Image."

Tells the browser to load the background image before other images, so the hero appears sooner.

Blur setting in the block editor sidebar
BlurShown when the background type is "Image."

Blurs the background image. Helpful when a busy photo makes text hard to read.

Blur Amount setting in the block editor sidebar
Blur AmountAvailable after you turn on Blur.

Higher values blur the background image more.

Pattern setting in the block editor sidebar
PatternVisible when the background type is "Pattern."

An image that repeats across the hero background. Good for subtle textures.

Background Size setting in the block editor sidebar
Background SizeVisible when the background type is "Pattern."

Scale of the repeating pattern.

Background Video setting in the block editor sidebar
Background VideoOnly appears when the background type is "Video."

The video plays behind the hero. Its first frame is used as the poster and mobile fallback.