> For the complete documentation index, see [llms.txt](https://docs.pixeleyes.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pixeleyes.de/anleitungen-instructions/english/documentation-of-our-shopware-6-plugins/cms-widgets-for-the-shopping-experiences/image-and-video-elements-hero-banner-flipbox-hotspots.md).

# Image & Video Elements: Hero Banner, Flipbox, Hotspots

Category **"CMS Widgets - Image & Video"** in the block catalogue. Shared fields (border, text alignment, image loading …) are explained under [Shared Settings](/anleitungen-instructions/english/documentation-of-our-shopware-6-plugins/cms-widgets-for-the-shopping-experiences/shared-settings-border-text-alignment.md).

## Download Card

A compact card for a file download (e.g. a catalogue PDF, a data sheet).

* **File** (PDF etc.) to link.
* **Title**, **title colour**, **description**, **text colour**, text alignment.
* Border (on/off + colour).

## Flipbox (3D)

A card that flips around its own axis on hover (or tap on mobile) and reveals a back side with further content.

* **Front side**: image, title.
* **Back side**: title, text, button (text, style, size, link target, new tab).
* Image loading behaviour, image animation.

## Hero Banner

A large-format image or video banner with title, text and button – typically the top-most element of a landing page.

* **Image** or **video URL** (mp4) – when a video URL is set, the image serves as the poster until the video has loaded.
* **Fixed background (parallax)** – the background image stays fixed while scrolling.
* **Image darkening (%)** – a dark overlay for better text legibility.
* **Minimum height** (e.g. `480px`).
* **Text alignment** (horizontal), **title**, **title colour**, **title type**, **text** (rich text), **text colour**.
* **Button**: text, style, size, link target (see [Shared Settings](/anleitungen-instructions/english/documentation-of-our-shopware-6-plugins/cms-widgets-for-the-shopping-experiences/shared-settings-border-text-alignment.md)), new tab.

## Before/After Image Comparison

Two overlaid images with a draggable slider handle for a direct comparison (e.g. a renovation, an installation result).

* **"Before" image**, **"After" image**.
* **Label "Before"** / **label "After"** (text label on the image).
* **Start position of the slider handle (%)** – default 50%.
* Image loading behaviour, image animation.

## Image with Hotspots

An image with clickable markers that show a title, text and optional link on hover/click – e.g. to explain product details directly within the image.

* **Image**, **image type** (Original/Cropped), **maximum height**.
* **Dot marker** – colour & size of the markers.
* **Hotspots** (repeater) – position X/Y (as % of image width/height, 0–100), title, text, icon and link per hotspot.

## Image & Text CTA

A two-column element: image on one side, title/text/button on the other.

* **Image**, **image position** – left or right of the text.
* **Image type**, **maximum height**.
* **Title**, **title colour**, **title type**, **content** (rich text), **text colour**, text alignment.
* **Button**: text, style, size, link target, new tab.
* Image loading behaviour, image animation.