Skip to main content

Overlay Hero

This guide explains how to use the Overlay Hero component in the Hurco Backoffice. It renders a full-screen hero section where the page title, description, and optional CTA buttons are overlaid on top of a background image or video.

The component is available in the Hero zone of the Content Page Collection Type.

Overview​

The Overlay Hero uses the page's Featured Image or an optional Featured Video as its background media. The title, frontend title, and description are pulled automatically from the Content Page's base fields — they do not need to be entered again in this component.

Website view:

Website view - Overlay Hero

Fields​

  1. Media Type (required, default: image) — Controls which media is used as the background. Options:

    • image — Uses the page's Featured Image as the background. If no Featured Image is set on the page, the component will not render.
    • video — Uses the Featured Video field (see below) as the background.
    warning

    If the selected media type has no corresponding media set, the component will not render on the website at all.

  2. Featured Video (visible when Media Type is video) — A video file used as the hero background. Only video files are accepted.

  3. Hero Button (required) — A single call-to-action button displayed over the media. It has:

    • Label (required) — The button text.
    • URL (required) — The destination link.
    • Image (required) — An image displayed alongside the button.

  4. Animated (optional, default: off) — Enables a scroll-driven animation on this hero. When active:

    • The background media scales subtly as the user scrolls.
    • The overlay opacity adjusts on scroll.
    • The page content fades and slides into view as the user scrolls down.
    • If the media is a video, it is scrubbed frame-by-frame based on scroll position instead of playing automatically.
    info

    When Animated is off, the hero occupies a normal full-screen height with no scroll interaction. Videos play automatically in a loop.

note

The page Title, Frontend Title, and Description displayed in this hero are taken directly from the Content Page's base fields. To change that text, edit those fields at the top of the Content Page entry — not inside this component.

tip

For more guidance on publishing content and best practices, check out our Publishing Content Guide.