Split Media Hero
Two side-by-side media panels — each image or video — that fill the viewport width in a fixed cinematic aspect ratio (roughly 2:1 on desktop). The panels can be split 50/50, one-third/two-thirds, or collapsed to a single full-width panel. On mobile, the panels stack vertically at a squarer ratio. A title and description sit above or below the media, split into two columns.
There are two section variants that share the same slide block: Split Media Hero for a single slide with content positioned above or below the media, and Split Media Hero Carousel for multiple slides in a fade carousel with per-slide content.
Settings
Section titled “Settings”| Setting | What it does |
|---|---|
| Section ID | Optional anchor for jump links. Must be unique on the page, in handle format. |
| Content position | Above or below the media panels. Controls where the title and description appear. Carousel variant does not have this setting — content always sits below each slide. |
| H1 text | Carousel variant only. Screen-reader-only H1 for SEO when the visible titles are decorative or per-slide. |
| Padding top / bottom (mobile) | Default 0px each (single), 0/52px (carousel). |
| Padding top / bottom (tablet) | Default 0px each (single), 0/72px (carousel). |
| Padding top / bottom (desktop) | Default 0px each (single), 0/96px (carousel). |
Blocks
Section titled “Blocks”Static blocks (on both variants):
- Title — the main heading. On the single variant it appears in the above/below content row. On the carousel it renders inside each slide.
- Richtext — descriptive copy beside the title.
Static blocks (carousel only):
- Buttons — a CTA row that renders inside each carousel slide, right-aligned on desktop.
Repeatable:
- Split Media Hero Slide — the media panel pair. Each slide has its own layout settings (split ratio, flip), left and right media pickers (image or video), and separate mobile overrides for each panel. Set layout to “full” to use only the left panel at full width.
Carousel variant
Section titled “Carousel variant”The carousel uses Splide with a fade transition. Arrow and dot controls are positioned over the bottom-right of the active media area and reposition dynamically on slide change to account for varying slide heights. Controls hide automatically when there is only one slide.
Adaptive height is handled manually — Splide’s built-in auto-height doesn’t support fade mode, so the section calculates track height from the active slide’s visible media on every transition.
Where it’s used
Section titled “Where it’s used”Homepage hero. The single variant works for campaign or landing pages with one hero image. The carousel variant is the primary homepage hero.
- Use the mobile image overrides. Desktop hero images are ultra-wide and look terrible cropped to a portrait phone ratio. Upload a separate crop for mobile on every slide.
- Flip reverses more than you think. On desktop it swaps the 1/3-2/3 ratio direction. On mobile it reverses the stack order so the bottom panel shows first.
- Full layout hides the right panel entirely. Only the left media fields are used — right panel fields are ignored even if filled in.
- Keep carousel slides to three or four. Fade carousels don’t hint at more content the way swipe carousels do, so users rarely go past the third slide.
- The single variant needs a content position set. If you see the title and description missing, check that “Content position” is set to above or below — it defaults to above.