Hero Banner

📍 Find this in the app: Admin Panel → Content → Page Editor (/admin/page-editor) — add a block and pick Hero Banner.

The big eye-catcher at the top of a page: a large photo (or short video) with your headline on top of it, and up to two buttons. Most stables use one Hero Banner as the first block of the Home page.

This is how the block looks on a stable website (example content):

The Page Editor lists every block on a page — reorder, duplicate, preview, edit or delete each one. The example below shows the Hero Banner at the top of the Home page in the native mobile app:

Opening the Hero Banner block reveals its content and layout settings:

Content

• Title: The large headline.
• Subtitle: A short sentence below the headline.

Layout style

Pick the look first — the other settings change with it, so you only see the ones that do something for that layout.

• Image with text overlay: One photo across the whole width, with your text on top.
• Image & text side by side: Photo on one half, text on the other.
• Full-width with text card: A wide photo with the text in a separate card that floats on top.
• Cinematic (full bleed, text at bottom): A dramatic full-screen photo with the text low in the frame.
• Parallax (scroll-depth effect): The photo moves more slowly than the page as visitors scroll, which gives a sense of depth.
• Slideshow (cross-fading photos, slow zoom): Up to three photos that slowly zoom and fade into each other.
• Mosaic (photo collage + large type): Up to three photos arranged as a collage next to large text.
• Showcase (gradient backdrop, floating image): A colour backdrop with one photo floating beside the text, plus a small badge above the title.
• Diagonal menu (angled image panels that expand into navigation): A row of slanted photo panels, each one a link to another page. See Diagonal menu below.

Settings for every photo layout

• Section height: Small, Medium, Large or Full screen.
• Text alignment: Left, Centre or Right.
• Text colour: White, Main colour, Accent colour or Dark. Pick whatever stays readable on your photo.
• Background image: Upload the main photo. Use a landscape photo of at least 1920 pixels wide; photos smaller than 1141 × 720 pixels are refused because they would look blurry.
• Image framing: Show top, Centre or Show bottom — which part of the photo stays in view when it's cropped to fit the screen. Use Show top when a horse's head is being cut off.
• Photo treatment: None (original colour), Brand duotone (the photo is tinted in your theme colours) or Black & white.
• Show call to action button, Call to action text, Call to action link: The main button, for example "View our horses" linking to /horses.
• Show second button, Second button text, Second button link: An optional second, quieter button.

Settings that only appear for some layouts

• Second image (optional) / Third image (optional) — Slideshow and Mosaic: the extra photos.
• Background video — Image with text overlay and Cinematic, PRO only: A short clip that plays behind your text instead of the still photo. See Background video below.
• Slow zoom on the photo — Image with text overlay, Full-width with text card and Cinematic: The photo very slowly zooms in.
• Brand glow & grain overlay — Image with text overlay, Cinematic and Parallax: Adds a soft glow in your theme colour and a fine film grain over the photo.
• Darken background image and Background darkness (0–100) — Image with text overlay (both) and Cinematic (on/off only): Darkens the photo so white text stays readable. A higher number means darker.
• Card position and Card transparency (0–100) — Image with text overlay and Full-width with text card: Where the text card sits (Left, Centre, Right) and how see-through it is.
• Image position — Image & text side by side and Showcase: Whether the photo sits on the Left or Right.
• Badge text (above title) — Showcase: A short label above the headline, such as "New this season".
• Background colour — Mosaic: The colour behind the collage.

Background video

PRO feature

The video upload needs the Hero background video feature and a PRO subscription. Without them, the field doesn't appear in the editor, and a video you added earlier isn't shown on your website — visitors see the background image instead.

On the Image with text overlay and Cinematic layouts you can replace the still photo with a short moving clip, for example horses in the field or a ride in the arena.

1. Open the Hero Banner block and pick one of those two layouts.
2. Under Background video, click Upload video and choose a clip from your phone or computer.
   • File types: MP4, MOV or WebM.
   • Maximum length: 10 seconds.
   • Maximum size: 100 MB.
3. Wait while the button says Compressing video…. This can take up to a minute. We automatically make a sharp version for computers and a lighter one for phones, so the video loads quickly for every visitor. The sound is removed.
4. Save the page.

How the video plays on your website:

• It's muted and plays on a loop.
• It only plays while the banner is on screen, so it doesn't slow down the rest of the page.
• Visitors who have asked their device to reduce motion or to save data don't get the video — they see your background image instead.

To take the video off, click Remove video. It's deleted straight away.

You can upload up to 20 videos per day. If you reach the limit, try again the next day.

Always set a background image

Upload a Background image too, even when you use a video. It shows while the video loads and is all that visitors with reduced motion or data saving see. It also helps your page show up well in search engines.

Diagonal menu

The Diagonal menu layout doesn't use a single background photo. Instead you build a list of Sections, and each section becomes a slanted photo panel that widens when a visitor points at it and takes them to another page. Click Add section and fill in:

• Label: The panel's name, which is also its link text. Required.
• Image: The panel's photo.
• Linked page: The page that opens when the panel is clicked. Required — a panel without one can't be clicked.
• Text colour: White, Main colour, Accent colour or Dark.

The only other settings for this layout are Section height and Section spacing (the gap between the panels).

tip

• Keep the title short — five or six words reads best on a phone.
• If you turn on Transparent header in the page settings, the Hero Banner slides up behind your menu for a full-screen look.