Inhalte / Hero und Karussell

13 — Hero und Karussell

Drei Elemente teilen sich eine Slide-Tabelle:

Element	Verwendung
Carousel Fullscreen	Der Hero: volle Viewport-Höhe, Hintergrundbild oder -video
Carousel	Normale Höhe, im Inhaltsfluss
Carousel Small	Kompakt, z. B. für Testimonials

Das Karussell im Video

Zwei Minuten zum Hero: Verlaufsüberlagerung mit Winkel und Farbstopps, der Fokuspunkt, der das Motiv auf jedem Bildschirm im Bild hält, und die wechselnde Überschrift. Jedes Feld, das darin vorkommt, ist in diesem Kapitel dokumentiert.

Slide-Typen

Jeder Slide wählt einen Typ, und der Typ entscheidet, welche Felder er zeigt:

Typ	Inhalt
Text	Überschrift, Text, Buttons
Call to Action	Wie oben, dazu ein prominenter Buttonblock
Bild	Bild neben dem Text
Text und Bild	Zwei Spalten
Hintergrundbild	Bild hinter dem Text
Hintergrundvideo	Video hinter dem Text (MP4/WebM plus responsive Varianten)
HTML	Freies Markup
Karten	Karten im Slide, inline gepflegt
Video	Video als Slide-Inhalt

Der Textblock eines Slides

![Einen Slide bearbeiten: Eyebrow, Überschrift mit [Klammern], rotierende Begriffe mit Position und Animation](images/backend-carousel-slide.webp)

Einen Slide bearbeiten: Eyebrow, Überschrift mit [Klammern], rotierende Begriffe mit Position und Animation

Feld	Anmerkung
Eyebrow – Pre-Headline	Kleine Zeile über der Überschrift mit einer eigenen Linie
Headline	`[Eckige Klammern]` färben einzelne Wörter
Wechselnde Überschrift	Rotierende Begriffe; mit Semikolon (`;`) trennen
Position der wechselnden Überschrift	Über oder unter der Überschrift
Animation der wechselnden Überschrift	Horizontal, vertikal oder überblendend
Subheadline, Text
Textposition vertikal	Oben, Mitte, unten
Textposition horizontal	Links, mittig, rechts — bewegt auch die Linie des Eyebrow und die Buttonzeile mit
Textbreite	Anteil am Container in Prozent
Button	Link, Beschriftung, Farbe

Hintergrund und Überlagerung

Feld	Anmerkung
Hintergrundbild	Mit Unterstützung für den Fokuspunkt: den Punkt anklicken, der beim Beschneiden sichtbar bleiben muss
Hintergrundfarbe
Verlaufsüberlagerung	Ein Verlauf über dem Bild, im visuellen Verlaufseditor bearbeitet
Textfarbe

Der Fokuspunkt wird je Dateireferenz gespeichert, nicht an der Datei — dasselbe Bild kann in einem anderen Slide einen anderen Fokus tragen.

Übergänge

Übergang	Wirkung
Ken Burns (Hineinzoomen)	Langsames Hineinzoomen
Zoom-Überblendung	Sanftes Herauszoomen
Unschärfe-Überblendung	Scharfstell-Effekt
Überlagerung	Dunkel zu hell

Ein Übergang und ein per fixed verankerter Parallax-Hintergrund können nicht beide aktiv sein: Eine Transformation auf dem Slide bricht background-attachment: fixed. Ist ein Übergang gesetzt, bildet das Theme die Parallaxe stattdessen mit einer am Viewport verankerten Ebene in JavaScript nach.

Bedienelemente

Feld	Was es tut
Steuerpfeile anzeigen	Die Pfeile links und rechts
Positionspunkte anzeigen	Die Punkte für die Position
Themensteuerung anzeigen	Die Themennavigation: ein Eintrag je Slide mit Symbol und Titel
Höhe des Elements	Feste Slide-Höhe
Automatische Wiedergabe, Intervall, Umbruch	Standardverhalten des Bootstrap-Karussells

Scroll-Indikator

Ein Slide kann einen Link zum Weiterscrollen anbieten. Zum Inhalt scrollen auf die UID des Zielelements setzen; die Schaltfläche erscheint am unteren Rand des Slides.

Das Symbol ist in der Vorgabe das Maus-Glyph. Wird auf dem Slide ein Symbol hochgeladen, wird stattdessen dieses verwendet — SVGs werden eingebettet und nehmen so die Farbe der Schaltfläche an, andere Formate werden als Bild platziert. Dasselbe Symbolfeld speist auch die Themensteuerung; ein Upload bedient also beides.

Slides je Viewport ausblenden

Jeder Slide lässt sich auf Mobilgerät, Tablet oder Desktop entfernen. Der Slide wird tatsächlich aus dem Markup entfernt und die Bedienelemente werden neu durchnummeriert — ihn per CSS zu verbergen ließe einen leeren Slide im Umlauf.

Höhe des Fullscreen-Hero

Das Fullscreen-Karussell ist in der Vorgabe 100vh hoch. Bis 1024px verwendet das Theme stattdessen 100dvh abzüglich der Header-Höhe, weil die Bedienleisten des mobilen Browsers den Slide sonst beschneiden würden.

Aus der Praxis

Eine Botschaft je Slide. Die wechselnden Wörter gibt es, damit ein einzelner Slide drei Dinge sagen kann, ohne drei Slides zu brauchen.
Die Verzögerungen der Animation komponieren. Eyebrow 800 ms, Überschrift
950 ms, Buttons 1150 ms lesen sich als eine Bewegung.
**fade- dem slide- vorziehen**, sofern die schiebende Bewegung nicht ausdrücklich gewünscht ist: Fade startet transparent und bewegt feste 100 px, Slide bewegt das Element um seine eigene Breite.
Hintergrundvideos brauchen ein Vorschaubild, sonst ist das erste Bild ein grauer Kasten, bis das Video bereit ist.