> 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/deutsch/dokumentation-unserer-shopware-6-plugins/cms-widgets-fur-die-erlebniswelten/bild-and-video-elemente-hero-banner-flipbox-hotspots.md).

# Bild- & Video-Elemente: Hero-Banner, Flipbox, Hotspots

Kategorie **„CMS Widgets - Bild & Video"** im Block-Katalog. Gemeinsame Felder (Rahmen, Textausrichtung, Bild-Ladeverhalten …) sind unter [Gemeinsame Einstellungen](/anleitungen-instructions/deutsch/dokumentation-unserer-shopware-6-plugins/cms-widgets-fur-die-erlebniswelten/gemeinsame-einstellungen-rahmen-textausrichtung.md) erklärt.

## Download-Karte

Kompakte Karte für einen Datei-Download (z. B. Katalog-PDF, Datenblatt).

* **Datei** (PDF etc.) zum Verlinken.
* **Titel**, **Titelfarbe**, **Beschreibung**, **Textfarbe**, Textausrichtung.
* Rahmen (an/aus + Farbe).

## Flipbox (3D)

Karte, die sich bei Mausberührung (bzw. Tippen auf Mobilgeräten) um die eigene Achse dreht und eine Rückseite mit weiterem Inhalt zeigt.

* **Vorderseite**: Bild, Titel.
* **Rückseite**: Titel, Text, Button (Text, Stil, Größe, Link-Ziel, neuer Tab).
* Bild-Ladeverhalten, Bilder-Animation.

## Hero-Banner

Großflächiges Bild- oder Video-Banner mit Titel, Text und Button – typisch als oberstes Element einer Landingpage.

* **Bild** oder **Video-URL** (mp4) – bei gesetzter Video-URL dient das Bild als Vorschaubild (Poster), bis das Video geladen ist.
* **Fixierter Hintergrund (Parallax)** – das Hintergrundbild bleibt beim Scrollen stehen.
* **Verdunkelung des Bildes (%)** – dunkler Overlay-Schleier für bessere Textlesbarkeit.
* **Mindesthöhe** (z. B. `480px`).
* **Textausrichtung** (horizontal), **Titel**, **Titelfarbe**, **Titel-Typ**, **Text** (Rich-Text), **Textfarbe**.
* **Button**: Text, Stil, Größe, Link-Ziel (siehe  [Gemeinsame Einstellungen](/anleitungen-instructions/deutsch/dokumentation-unserer-shopware-6-plugins/cms-widgets-fur-die-erlebniswelten/gemeinsame-einstellungen-rahmen-textausrichtung.md)), neuer Tab.

## Vorher/Nachher-Bildvergleich

Zwei übereinandergelegte Bilder mit einem verschiebbaren Regler zum direkten Vergleich (z. B. Renovierung, Montage-Ergebnis).

* **Bild „Vorher"**, **Bild „Nachher"**.
* **Beschriftung „Vorher"** / **Beschriftung „Nachher"** (Textlabel auf dem Bild).
* **Start-Position des Reglers (%)** – Standard 50 %.
* Bild-Ladeverhalten, Bilder-Animation.

## Bild mit Hotspots

Ein Bild mit klickbaren Markierungspunkten, die bei Hover/Klick Titel, Text und optional einen Link anzeigen – z. B. um Produktdetails direkt im Bild zu erklären.

* **Bild**, **Art des Bildes** (Original/Zugeschnitten), **Maximale Höhe**.
* **Punkt-Marker** – Farbe & Größe der Markierungspunkte.
* **Hotspots** (Repeater) – Position X/Y (in % der Bildbreite/-höhe, 0–100), Titel, Text, Icon und Verlinkung je Hotspot.

## Bild-Text-CTA

Zweispaltiges Element: Bild auf der einen, Titel/Text/Button auf der anderen Seite.

* **Bild**, **Bildposition** – links oder rechts vom Text.
* **Art des Bildes**, **Maximale Höhe**.
* **Titel**, **Titelfarbe**, **Titel-Typ**, **Inhalt** (Rich-Text), **Textfarbe**, Textausrichtung.
* **Button**: Text, Stil, Größe, Link-Ziel, neuer Tab.
* Bild-Ladeverhalten, Bilder-Animation.