Vorher-Nachher-Vergleich gestalten
Mit dem Vorher-Nachher-Block stellst du zwei Zustände nebeneinander dar – etwa eine Situation vorher und nachher, oder zwei Varianten zum Vergleichen. Besucher können den Schieber verschieben, um beide Seiten interaktiv zu vergleichen.
Voraussetzungen
Du bearbeitest bereits einen Block auf einer Seite. Falls nicht, lies unter Block auf einer Seite einrichten (Blockkatalog) nach, wie du einen neuen Block hinzufügst.
So gehst du vor
Öffne den Bereich „Allgemein" – dort stellst du die Überschrift und Beschriftungen ein.
Wähle eine Farbvariante aus dem Auswahlfeld, wenn du das Design an dein Erscheinungsbild anpassen möchtest. Leer lassen ist auch möglich.
Trage optional einen Eyebrow ein – das ist eine kurze Zeile über der Hauptüberschrift, etwa eine Kategorie oder ein Teaser. Das Feld unterstützt Markdown-Formatierung.
Trage einen Titel (Markdown) ein – das ist die Hauptüberschrift des Blocks. Auch hier kannst du Markdown verwenden.
Trage optional einen Untertitel ein – eine erläuternde Zeile unter der Überschrift.
Beschrifte die linke Seite mit Label links (z. B. „Vorher") und die rechte Seite mit Label rechts (z. B. „Nachher").
Öffne den Bereich „Inhalt (Zettel + App)" – dort verbindest du die beiden Bilder oder Inhalte miteinander.
Lade oder wähle das linke Bild/den linken Inhalt – das ist der „Vorher"-Zustand.
Lade oder wähle das rechte Bild/den rechten Inhalt – das ist der „Nachher"-Zustand.
Speichere die Änderungen. Die Seite wird aktualisiert und zeigt sofort, wie der Block aussieht.
Aufbau des Blocks
Der Block unterteilt sich in zwei Bereiche:
Allgemein: Hier legst du fest, wie der Block überschrieben wird und wie die beiden Seiten beschriftet sind.
Inhalt (Zettel + App): Hier bestimmst du, welche Bilder oder Inhalte auf der linken und rechten Seite angezeigt werden. Der Schieber wird automatisch dazwischen platziert.
Was danach passiert
Der Block wird auf der Seite sofort angezeigt. Besucher sehen den Schieber und können ihn horizontal verschieben, um die linke und rechte Seite zu vergleichen. Alle Änderungen werden automatisch gespeichert.
Tipps und Hinweise
- Bilder sollten gleich groß sein: Verwende Bilder mit denselben Abmessungen, damit der Vergleich aussagekräftig wirkt.
- Label sind wichtig: Beschriften immer beide Seiten, damit Besucher sofort verstehen, was sie vergleichen.
- Markdown nutzen: Du kannst in Titel, Untertitel und Eyebrow fett, kursiv oder Links verwenden – gib die Formatierung einfach ein.