All docs

Hero & Banners

Hero

Section handle: hero

Settings

Layout

SettingTypeDefaultDescription
HeightDropdownmediumSets the hero height. · Options: small – Small, medium – Medium, large – Large, full – Full viewport

Content

ℹ️ Video mode uses the first slide’s text and buttons as the overlay. Slide navigation is disabled in Video mode.

SettingTypeDefaultDescription
Hero media typeDropdownimageChoose between an image slideshow or a single video. · Options: image – Image / Slides, video – Video
VideoVideo—Choose the video used when Hero media type is set to Video.
Autoplay videoToggle (on/off)OnPlays the video automatically when possible.
Video poster imageImage—Image shown before playback and when autoplay is off.
Loop videoToggle (on/off)OnRepeats the video when it reaches the end.
Show video controlsToggle (on/off)OffShows native video controls (play/pause, scrubber, etc.).
Video aria-labelText—Optional accessibility label for screen readers. Leave blank to use the first slide text.

Behavior

SettingTypeDefaultDescription
Show arrowsToggle (on/off)OnShows previous/next arrows (Image / Slides mode only).
Show pagination dotsToggle (on/off)OnShows pagination dots (Image / Slides mode only).
Show slide counterToggle (on/off)OffShows a slide counter (Image / Slides mode only).
Auto-rotate slidesToggle (on/off)OffAutomatically advances slides (Image / Slides mode only).
Auto-rotate interval (seconds)Slider7Time between slides (in seconds). · Min: 6 · Max: 12
Transition typeDropdownfadeControls how slides animate when changing (Image / Slides mode only). · Options: fade – Fade, slide – Slide, rotate_3d – 3D rotate

Style

SettingTypeDefaultDescription
Overlay styleDropdownnoneAdds a tint or gradient over the media to improve text contrast. · Options: none – No overlay, light – Light, medium – Medium, dark – Dark, gradient_tb – Gradient (top → bottom), gradient_bt – Gradient (bottom → top)

Blocks

Maximum blocks: 5

Slide

Block type: slide

Layout

SettingTypeDefaultDescription
Content alignment (horizontal)DropdowncenterPositions the text left/center/right on the slide. · Options: left – Left, center – Center, right – Right
Content alignment (vertical)DropdownmiddlePositions the text at the top/middle/bottom of the slide. · Options: top – Top, middle – Middle, bottom – Bottom

Content

SettingTypeDefaultDescription
Desktop imageImage—Desktop image for this slide (Image / Slides mode only).
Mobile imageImage—Optional. Mobile image for this slide (Image / Slides mode only). Leave blank to use the desktop image on mobile.
Image focal pointDropdowncenterControls which part of the image stays in view when it crops. · Options: center – Center, top – Top, bottom – Bottom, left – Left, right – Right, top_left – Top left, top_right – Top right, bottom_left – Bottom left, bottom_right – Bottom right
EyebrowText—Optional. Small text above the heading. Leave blank to hide.
HeadingText—Optional. Main headline text. Leave blank to hide.
SubheadingMulti-line text—Optional. Supporting text below the heading. Leave blank to hide.
Primary button labelText—Primary button text. To show this button, set both the label and the link.
Primary button linkURL / Link—Primary button link. To show this button, set both the label and the link.
Secondary button labelText—Secondary button text. To show this button, set both the label and the link.
Secondary button linkURL / Link—Secondary button link. To show this button, set both the label and the link.

Style

SettingTypeDefaultDescription
Content container styleDropdownnoneAdds an optional background panel behind the text for better readability. · Options: none – None, card – Card, frosted – Frosted card

Default Configuration

When you add this section from the Theme Editor, it comes pre-configured with:

  • Hero — 1× Slide