Vorher-Nachher-Vergleich einrichten

Mit diesem Baustein zeigst du Unterschiede oder Veränderungen: ein Bild oder Video von vorher und nachher, mit einem Schieberegler zum Vergleichen. Oben kannst du eine Überschrift, einen Untertitel und Beschriftungen für beide Seiten hinzufügen.

Voraussetzungen

Es gibt keine besonderen Voraussetzungen.

So gehst du vor

1. Öffne die Einstellungen des Blocks. Auf der rechten Seite erscheint ein Seitenleisten-Fenster mit zwei Abschnitten.

2. Allgemein – Trage hier die Texte ein, die über dem Vergleich stehen:

   • Farbvariante: Wähle eine Farbvariante aus dem Auswahlfeld, die zum Design deiner Website passt (z. B. „Cream").
   • Eyebrow: Ein kurzer Text oberhalb der Hauptüberschrift – optional. Mit Markdown formatierbar.
   • Titel (Markdown): Die Hauptüberschrift des Blocks. Auch hier kannst du Markdown verwenden, um Teile fett oder kursiv zu machen.
   • Untertitel: Ein erläuternder Text unter der Überschrift – optional. Ebenfalls mit Markdown.
   • Label links: Beschriftung für die linke Seite des Vergleichs (z. B. „Vorher").
   • Label rechts: Beschriftung für die rechte Seite des Vergleichs (z. B. „Nachher").

3. Inhalt (Zettel + App) – Unter dieser Überschrift fügst du die Bilder oder Videos ein:

   • Klicke auf Zettel (links) – Notizen, um die linke Seite (Vorher) mit einem Bild oder Video zu füllen.
   • Klicke auf Post-its (rechts oben), um weitere Elemente auf der rechten Seite hinzuzufügen.
   • Klicke auf App (rechts) – Kopfzeile & Kennzahlen, um die rechte Seite (Nachher) zu gestalten.
   • Klicke auf App - Termine oder App - Benachrichtigungen, falls du diese Inhalte auf der rechten Seite brauchst.

4. Speichere deine Änderungen, indem du oben rechts auf Speichern klickst.

Aufbau des Einstellungsfensters

Das Fenster ist in zwei Hauptabschnitte aufgeteilt:

• Allgemein: Hier stellst du Farbe, Überschriften und Beschriftungen ein. Mit den Markdown-Editoren kannst du die Texte formatieren.
• Inhalt (Zettel + App): Hier legst du fest, was auf der linken (Zettel) und rechten Seite (App) zu sehen ist. Jeder Bereich lässt sich auf- und zuklappen, um die gewünschten Inhalte hinzuzufügen.

Was danach passiert

Sobald du speicherst, wird der Block auf der Website live geschaltet. Der Besucher kann den Schieberegler verschieben, um Vorher und Nachher zu vergleichen. Die Beschriftungen und Texte werden genau wie eingegeben angezeigt.

Änderungen sind jederzeit möglich – öffne den Block erneut und passe die Felder an.

Tipps und Hinweise

• Bilder gleich groß machen: Damit der Vergleich flüssig aussieht, sollten Vorher- und Nachher-Bild die gleiche Größe und das gleiche Seitenverhältnis haben.
• Kurze Beschriftungen: Die Labels auf der linken und rechten Seite sollten kurz und prägnant sein – der Platz ist begrenzt.
• Markdown nutzen: In den Feldern Eyebrow, Titel und Untertitel kannst du mit fett oder kursiv arbeiten. Sieh dir die Anleitung Markdown an, wenn du mehr Formatierungen brauchst.
• Verschiedene Inhalte: Die rechte Seite muss nicht unbedingt ein Bild sein – du kannst dort auch Kennzahlen, Termine oder andere Bausteine einfügen.