Hero Slider

Pair one headline with multiple rotating background photos.

Usage

Hero Slider keeps headline, subhead, and button text in place while background images slide behind the content. Add slides in the sidebar and tune alignment, overlay, and motion timing.

When to use it

Use when one message applies to several visualsβ€”seasonal campaigns, multi-location brands, or product families. Prefer the standard Hero block when a single static background is enough.

Tips

  • Match overlay strength so text stays readable on every slide.
  • Content Align controls where the text block sits over the imagery.
  • Keep slide count modest; long carousels slow the first impression.

Screenshots

Front-end

  • About-page hero with bottom-left headline over a bright interior slide, followed by a text-and-photo band.
  • Same headline over a darker lounge slide β€” background changes while copy stays put.

Editor

  • Content settings β€” enable text, headline, link, and text position over the slider.
  • Background Images gallery β€” add, reorder, and caption the slides behind the hero copy.

Settings

Content

Enable Text setting in the block editor sidebar
Enable Text
Headline setting in the block editor sidebar
Headline
Subheadline setting in the block editor sidebar
Subheadline
Link URL setting in the block editor sidebar
Link URL
Link Text setting in the block editor sidebar
Link TextAvailable when Link URL is enabled
Text Position setting in the block editor sidebar
Text Position
  • upper-left
  • upper
  • upper-right
  • left
  • centerdefault
  • right
  • lower-left
  • lower
  • lower-right
Logo setting in the block editor sidebar
Logo
Size setting in the block editor sidebar
Size

Options

Content Width setting in the block editor sidebar
Content Width
  • Full
  • Widedefault
Headline Style setting in the block editor sidebar
Headline Style
  • h1
  • h2default
  • h3
  • h4
  • h5
  • h6
  • p
Subheadline Style setting in the block editor sidebar
Subheadline Style
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • pdefault
Link Style setting in the block editor sidebar
Link Style
  • Buttondefault
  • Alt
  • Hollow
  • Secondary
  • Ghost
  • Subtle
Size setting in the block editor sidebar
Size
  • Auto
  • SM
  • MDdefault
  • LG
  • XL
  • Full
Desktop Height (VH) setting in the block editor sidebar
Desktop Height (VH)
Mobile Height (VH) setting in the block editor sidebar
Mobile Height (VH)

Overlay / Text

Text Color setting in the block editor sidebar
Text Color
  • Dark
  • Light
Overlay (Text Legibility) setting in the block editor sidebar
Overlay (Text Legibility)
  • Overlaydefault
  • Text Box
  • Text BG
Overlay Style setting in the block editor sidebar
Overlay StyleAvailable when Overlay (Text Legibility) is β€œOverlay”
  • Gradientdefault
  • Overlay
Overlay Color setting in the block editor sidebar
Overlay Color
Overlay Opacity setting in the block editor sidebar
Overlay Opacity

Background Images

Autoplay setting in the block editor sidebar
Autoplay
Autoplay interval (seconds) setting in the block editor sidebar
Autoplay interval (seconds)Available when Autoplay is enabled
Pause on hover setting in the block editor sidebar
Pause on hoverAvailable when Autoplay is enabled
Show slide navigation setting in the block editor sidebar
Show slide navigation
Fade transition setting in the block editor sidebar
Fade transition
Disable Lazy Load setting in the block editor sidebar
Disable Lazy Load
High Fetch Priority setting in the block editor sidebar
High Fetch Priority
Blur setting in the block editor sidebar
Blur
Blur Amount setting in the block editor sidebar
Blur AmountAvailable when Blur is enabled