Skip to main content

Hero Sections

Hero sections are full-width, high-impact openers designed for the top of your pages. Ronin includes 7 hero sections: five home page openers, each with its own kind of motion, plus lightweight headers for the About page and the blog.

Hero exhibit​

A product showcase carousel where each slide places a model image in front of a large background word, with a heading, description, price, and button. It opens the default home page and stays pinned while the next sections scroll up over it.

section-hero-exhibit.webp

Features:

  • Multiple slides with pagination and previous/next arrows
  • Auto-rotate slides with an adjustable interval
  • Image per slide with a selectable ratio (Auto, 9:16, 3:4, 1:1, 4:3, 16:9, or Custom) and alt text
  • Background word: a large word shown behind the image
  • Heading, description, and price per slide
  • Button with label, style, size, URL, and new-tab options
  • Sticky layout that gently shrinks and fades the carousel as the following sections cover it
  • Blocks: Model

Hero move​

A multi-phase scroll hero. As the visitor scrolls, the headline letters push up one by one, the full-screen background image curtain-wipes away, and a foreground cutout rises alongside a pitch, a featured product card, and a rating. It opens the second home page layout.

section-hero-move.webp

Features:

  • Heading split per letter for the scroll reveal (one or two words work best)
  • Background image that curtain-wipes away as you scroll
  • Foreground cutout (a transparent PNG) that rises in the final phase
  • Pitch text and a button with style, size, URL, and new-tab options
  • Featured product shown as a floating card using the theme's product card
  • Optional rating with a number and caption
  • Scroll cue label (leave blank to hide it)
  • The scroll choreography runs on desktop; mobile shows a clean stacked version
note

Hero move needs a tall scroll track to play its phases. Place it first on the page for the best result.

Hero panels​

Up to three side-by-side image panels, each linking to a collection or page. On desktop, the hovered panel grows while the others shrink. It opens the fourth home page layout.

section-hero-panels.webp

Features:

  • Up to 3 panels, each with an image and alt text
  • Overline and heading per panel
  • The whole panel is a link, marked with an arrow button
  • Hover-to-expand accordion effect on desktop
  • Staggered reveal as the panels scroll into view
  • Panels stack in a column on mobile
  • Blocks: Panel

Hero slideshow​

A full-bleed editorial slideshow. Each slide crossfades a cover image under a bottom scrim, with an overline, headline, short text, and button placed left, center, or right. It opens the third home page layout.

section-hero-slideshow.webp

Features:

  • Auto-rotate slides with an adjustable interval; progress bars fill as each slide counts down
  • Previous/next arrows
  • Image and optional mobile image per slide (the mobile image falls back to the main one)
  • Overline, heading, and small text under the heading
  • Highlight style (Box, Highlighter, or Underline) for a word wrapped in [square brackets] in the heading
  • Content position: Left, Center, or Right
  • Button with label, style, size, URL, and new-tab options
  • Blocks: Slide

Hero split​

A split-screen carousel where each slide pairs a type panel on one half with an image on the other. It opens the fifth home page layout.

section-hero-split.webp

Features:

  • Up to 6 slides
  • Auto-rotate slides with an adjustable interval
  • Numbered pager with a progress bar and arrows on the text panel
  • Image with alt text per slide
  • Overline, heading, and text, with a highlight style for a bracketed word in the heading
  • Button with label, style, size, URL, and new-tab options
  • Text re-animates on every slide change
  • Blocks: Slide

About hero​

An editorial intro for the About page: an oversized heading, a short text, and a button, then a wide brand image and a strip of stats. It is used by the page.about template.

section-about-hero.webp

Features:

  • Heading with a highlight style (Box, Highlighter, or Underline) for a word wrapped in [square brackets]
  • Text under the heading
  • Button with label, style, size, URL, and new-tab options
  • Image with alt text
  • Stat strip with up to 8 cells, each with a number and a label
  • Blocks: Stat

Blog intro​

The masthead of the blog page: an overline, a large heading, and a short intro. It is available on the blog template only.

section-blog-intro.webp

Features:

  • Overline, heading, and intro
  • Accent the italic word to tint it with your primary color
  • Highlight style for a word wrapped in [square brackets] in the heading
  • Heading size and alignment
  • Width, color scheme, background, and padding controls (see Section Settings)
Choosing the right hero section
  • Use Hero exhibit or Hero slideshow when you want to rotate several products or campaigns in one slot; Hero exhibit is product-led with a price, Hero slideshow is image-led.
  • Use Hero move for a single, dramatic brand statement driven by scroll.
  • Use Hero panels to send visitors straight into two or three collections.
  • Use Hero split when your slides need equal room for copy and imagery.
  • Use About hero and Blog intro as openers for the About page and the blog rather than the home page.