Vorher/Nachher-Vergleich einrichten

Mit diesem Baustein zeigst du deinen Besuchern den Unterschied zwischen zwei Zuständen – etwa eine Vorher- und Nachher-Situation, zwei Varianten oder einen Vergleich. Der Schieberegler in der Mitte erlaubt es dem Besucher, zwischen beiden Bildern hin und her zu wechseln.

Voraussetzungen

Es gibt keine besonderen Voraussetzungen.

Aufbau des Bausteins

Der Baustein hat zwei Hauptbereiche:

Allgemein – Hier stellst du die Beschriftungen und das optische Erscheinungsbild ein. Die Farbvariante bestimmt, wie der Baustein auf deiner Seite aussieht. Mit Eyebrow, Titel und Untertitel kannst du den Vergleich einleiten. Die Labels links und rechts beschreiben, was die beiden Seiten des Schiebereglers zeigen.

Inhalt (Zettel + App) – Hier fügst du die beiden Bilder und Inhalte hinzu, die verglichen werden sollen.

So gehst du vor

Öffne die Einstellungen des Bausteins.
Wähle unter Farbvariante das Farbschema, das zu deiner Website passt. Das Auswahlfeld enthält verschiedene vordefinierte Varianten.
Trage optional einen Eyebrow ein – das ist eine kleine Zeile oberhalb der Hauptüberschrift, um das Thema einzuleiten.
Trage einen Titel (Markdown) ein. Dieser wird prominent angezeigt und erklärt, was verglichen wird. Du kannst hier Markdown-Formatierung verwenden.
Trage optional einen Untertitel ein – ein erläuternder Text unter der Überschrift.
Gib unter Label links ein, wie die linke Seite des Schiebereglers heißen soll (z. B. „Vorher").
Gib unter Label rechts ein, wie die rechte Seite des Schiebereglers heißen soll (z. B. „Nachher").
Wechsle zum Bereich Inhalt (Zettel + App) und füge die beiden Bilder oder Inhalte ein, die verglichen werden sollen. Der Bereich zeigt dir, wo du Bild und Text für die linke und rechte Seite eintragen kannst.
Speichere deine Änderungen mit der Schaltfläche Speichern oben rechts.

Was danach passiert

Der Baustein wird auf deiner Seite angezeigt und deine Besucher können den Schieberegler bewegen, um zwischen den beiden Zuständen zu wechseln. Die Beschriftungen und Farben sind sofort sichtbar.

Wenn du den Baustein später ändern möchtest, öffnest du ihn erneut und bearbeitest die Felder wie beschrieben. Alle Änderungen werden erst sichtbar, nachdem du die Seite veröffentlicht hast.

Tipps und Hinweise

Stelle sicher, dass beide Bilder dieselbe Größe und Qualität haben, damit der Vergleich gut funktioniert.
Verwende aussagekräftige Labels, damit deine Besucher sofort verstehen, was sie vergleichen.
Der Eyebrow und der Untertitel sind optional – nutze sie nur, wenn sie zum Vergleich passen.
Teste den Baustein auf Mobilgeräten, um sicherzustellen, dass der Schieberegler gut zu bedienen ist.