Hero
A full-featured hero pattern with semantic heading tags and extensive appearance controls.
Usage
Utilizing a Hero at the top of your page is a common UX pattern, and we've made it easy with the Hero block. We've also included a site-wide switch in the customizer where you can set whether you want your navigation to blend seamlessly with the Hero on pages where it is the first block, or if you'd like it to remain separate.
The Hero is a highly used and recognizable UX pattern — so much so that we automatically include it at the top of new pages. Because this is such a universal pattern, we include a lot of appearance options for you to sculpt the hero to fit your page.
Content fields
The Hero block supports four content fields: Headline, Subheadline, Button, and Logo. You can edit these inline or in the sidebar. If you delete a field inline, it is removed from the editor until you add content again from the sidebar.
The Headline renders as an <h1> and the Subheadline as an <h2> for semantic HTML structure. This only changes the underlying HTML — visual display is controlled separately by Headline Style and Subheadline Style (Customizer typography presets).
- Headline and Subheadline — edit inline 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 via Choose Logo; SVG is recommended. Size sets logo width in pixels (height scales to maintain aspect ratio). Remove with Remove Logo
Layout
- Text Position — places headline, subheadline, button, and logo within the hero and sets text alignment on child elements. For example, lower-right positions content in that corner and right-aligns text. Right alignment reverts to left on mobile for readability.
- Content Width — Wide (default) or Full for the inner content area
Typography and button
- Headline Style and Subheadline Style — visual presets from your Customizer (h1–h6 or paragraph). These change appearance only; semantic tags remain h1 and h2.
- Link Style — Button, Alt, Hollow, Secondary, Ghost, or Subtle for the call-to-action
Toggle White Text (reverse print) from the block toolbar or set Text Color in the sidebar. Use reverse print on dark backgrounds so nested content stays legible without setting text color on each element individually.
Size and height
Size presets control hero height:
- Auto — same as a small hero on desktop, but expands to fit content on mobile
- SM, MD, LG, XL — fixed height presets for desktop and mobile
- Full — fills the viewport (ignores other size presets)
Fine-tune with Desktop Height (VH) and Mobile Height (VH) sliders. Values are in viewport height units.
Text legibility
Improve contrast of text on busy image or video backgrounds:
- Overlay — gradient or solid color wash over the background (Overlay Style, Overlay Color, Overlay Opacity)
- Text Box — wraps content in a container with a background; respects reverse print
- Text BG — applies a colored background behind the text area only; often negates the need for an overlay
Select the clear overlay swatch or set opacity to 0% to disable the overlay.
Background
Use Type to choose a background — same options as the Section block:
- Color — solid palette fill from your site colors
- Image — photo with focal point, lazy-load, fetch priority, and optional blur
- Pattern — repeating texture with Background Size scale control; SVG or seamless PNG recommended
- Video — background video; the first-frame cover from the media library is used as the poster and mobile fallback
Image and video backgrounds expose BG Focal Point, Disable Lazy Load, and High Fetch Priority. Image backgrounds also support Blur and Blur Amount.
Block width
The Hero supports Wide and Full alignment from the block toolbar (default is full width). Full-width heroes span the viewport; wide alignment follows your content width.
Screenshots
Front-end
-
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.
Editor
-
Image background settings — overlay opacity, focal point, and lazy-load options. -
Hero content settings — headline, subheadline tags and styles, and text position.
Settings
Content
Sets the main heading for the hero block. This text renders as an H1 for semantic HTML structure, making it important for page SEO.
Controls the visual style of the headline using your Customizer typography presets (h1–h6 or paragraph). This changes appearance only; the underlying HTML remains an h1 for semantics.
Provides a secondary heading or descriptive text below the main headline. This text renders as an H2 for semantic HTML structure.
Controls the visual style of the subheadline using your Customizer typography presets (h1–h6 or paragraph). This changes appearance only; the underlying HTML remains an h2 for semantics.
Selects the visual style of the button, such as 'Button' for a primary call to action or 'Ghost' for a more subtle link. This helps differentiate the button's importance.
Sets the text displayed on the button within the hero. Use clear, action-oriented text to encourage user interaction.
Places headline, subheadline, button, and logo within the hero and sets text alignment on child elements. For example, lower-right positions content in that corner and right-aligns text. Right alignment reverts to left on mobile.
Select an SVG logo to display in the hero. This is ideal for branding and can be resized without losing quality.
Sets logo width in pixels when a logo image is present. Height scales automatically to preserve aspect ratio. SVG logos are recommended.
Appearance
Sets whether hero content spans the full width of the block or uses the wide content width.
Sets the hero height preset (Auto, SM, MD, LG, XL, or Full). Auto matches a small hero on desktop but expands to fit content on mobile. When Full Page Hero is enabled, this preset is ignored and the block fills the viewport.
Controls the height of the hero block on desktop screens, measured in viewport height (VH). Adjust this to ensure the hero fits well on larger displays.
Controls the height of the hero block on mobile screens, measured in viewport height (VH). Set this to optimize the hero's appearance and content visibility on smaller devices.
Flips text to the light palette for contrast on dark backgrounds. Affects the hero and all nested content. Use this instead of setting text color on individual inner blocks so you can change the background later without re-styling each element.
Improves text contrast on image or video backgrounds. Overlay adds a gradient or solid color wash. Text Box wraps content in a container with a background. Text BG applies a background behind the text area. All options respect reverse print.
Chooses between a gradient or solid color for the text legibility overlay. This helps improve contrast between text and busy backgrounds.
Selects the overlay color from your palette (plus pure black or white) to darken or tint a background image or pattern for text legibility or style.
Controls overlay strength from transparent to solid. At 100% the overlay is a flat color. Set opacity to 0% or choose the clear swatch to disable the overlay.
Background
Chooses the background type: solid color, image, repeating pattern, or video. Image and video backgrounds expose focal point, overlay, lazy-load, and blur controls similar to the Section block.
Selects a background color for the hero from the site's color palette. Use this when you want a solid color background for your hero.
Choose a background image for the hero. This image will be displayed behind the hero content.
Sets the most important part of the background image, ensuring it remains visible and correctly cropped across different screen sizes. Drag the crosshairs to the desired focal point.
Prevents the hero's background image from lazy loading. Enable this for images that are critical to the initial page load experience and should be visible immediately.
Assigns a high fetch priority to the hero's background image. This tells the browser to load the image sooner, improving perceived performance for critical hero images.
Applies a blur effect to the background image. Use this to create a softer visual effect or to make text more readable over a detailed image.
Adjusts the intensity of the blur effect on the background image. Increase the value for a stronger blur, or decrease it for a more subtle effect.
Select a repeating pattern to use as the hero's background. This can add a subtle design element to your hero.
Controls the scale of the background pattern. Adjust this to make the pattern larger or smaller, depending on the desired visual impact.
Upload or select a video to play as the hero's background. The first-frame cover from the media library is used as the poster and mobile fallback.