Vorher-Nachher-Regler einrichten

Mit einem Vorher-Nachher-Regler zeigst du auf deiner Website zwei Bilder oder Zustände nebeneinander und lässt Besucher mit einem Schieber zwischen ihnen wechseln. Das wirkt überzeugend bei Vorher-Nachher-Vergleichen, Renovationen oder Produktveränderungen.

Voraussetzungen

Es gibt keine besonderen Voraussetzungen.

Aufbau des Editors

Der Editor ist in zwei Bereiche unterteilt:

Allgemein: Hier stellst du den visuellen Rahmen ein – wie die Sektion aussieht und welche Beschriftungen der Besucher sieht.

Inhalt (Zettel + App): Hier legst du fest, welche Inhalte und Bilder links und rechts des Reglers stehen.

So gehst du vor

1. Öffne den Bereich Allgemein und wähle eine Farbvariante aus dem Auswahlfeld – das bestimmt das Farbschema des gesamten Blocks.

2. Fülle die Textfelder aus. Alle sind optional:

   • Eyebrow: Eine kurze Zeile über der Hauptüberschrift, z. B. für eine Kategorie oder einen Hinweis.
   • Titel (Markdown): Die Hauptüberschrift des Blocks. Du kannst hier Markdown-Formatierungen nutzen.
   • Untertitel: Ein erklärrender Text unter der Überschrift.

3. Trage die Beschriftungen für beide Seiten ein:

   • Label links: Der Name für die linke Seite (z. B. "Vorher").
   • Label rechts: Der Name für die rechte Seite (z. B. "Nachher").

4. Klicke auf Inhalt (Zettel + App), um die eigentlichen Inhalte zu gestalten. Hier bestimmst du, welche Bilder, Texte oder anderen Elemente links und rechts erscheinen.

5. Klicke oben rechts auf Speichern, um deine Einstellungen zu sichern.

Was danach passiert

Der Block wird mit deinen Einstellungen auf der Seite angezeigt. Besucher sehen den Schieber und können damit zwischen den beiden Inhalten wechseln. Du kannst den Block jederzeit erneut öffnen und anpassen – alle Änderungen überschreiben die vorherigen Einstellungen.

Tipps und Hinweise

• Nutze aussagekräftige Labels links und rechts, damit Besucher sofort verstehen, was sie vergleichen.
• Die Farbvariante sollte zu deinem Seitendesign passen. Probiere verschiedene Optionen aus und schau, wie sie in der Vorschau wirken.
• Halte die Inhalte links und rechts ähnlich strukturiert – das macht den Vergleich intuitiver.