Ein Vorher-Nachher-Vergleich einfügen

Mit diesem Block zeigst du deinen Besuchern zwei Bilder oder Inhalte nebeneinander – zum Beispiel vorher und nachher eines Projekts. Der Schieberegler in der Mitte lässt sie selbst entscheiden, welche Seite sie sehen möchten.

Voraussetzungen

Es gibt keine besonderen Voraussetzungen.

So gehst du vor

1. Öffne den Block-Editor und wähle den Block „Vorher / Nachher".

2. Im Bereich Allgemein stellst du das Aussehen ein:

   • Farbvariante: Wähle eine Farbe für die Beschriftung. Verfügbare Optionen sind Standard oder andere vordefinierte Varianten.
   • Eyebrow: Gib einen kurzen Text ein, der über der Hauptüberschrift steht (optional).
   • Titel (Markdown): Gib die Überschrift des Blocks ein. Du kannst Markdown-Formatierung verwenden.
   • Untertitel: Ergänze einen erklärenden Text unter der Überschrift (optional).
   • Label links: Beschriftung für die linke Seite – zum Beispiel „Vorher".
   • Label rechts: Beschriftung für die rechte Seite – zum Beispiel „Nachher".

3. Im Bereich Inhalt (Zettel + App) fügst du die beiden Vergleichsinhalte ein:

   • Klicke auf das Feld für die linke Seite und wähle oder lade ein Bild hoch oder bearbeite den Inhalt.
   • Wiederhole das für die rechte Seite. Der Block zeigt beide Inhalte dann mit dem Schieberegler an.

4. Speichere deine Änderungen.

Aufbau des Blocks

Der Block besteht aus zwei Hauptbereichen:

Allgemein – Hier bestimmst du Überschrift, Untertitel und die Beschriftungen für links und rechts. Der Reiter zeigt, welche Farbe der Text haben soll.

Inhalt (Zettel + App) – Hier laden oder gestaltest du die beiden Bilder oder Inhalte, die der Besucher vergleichen kann.

Was danach passiert

Der Block wird auf deiner Seite sichtbar. Deine Besucher sehen die linke und rechte Seite mit einem Schieberegler in der Mitte und können diesen hin und her bewegen, um beide Versionen zu vergleichen.

Du kannst den Block jederzeit wieder öffnen und die Inhalte oder Beschriftungen ändern – deine Änderungen werden sofort angewendet.

Tipps und Hinweise

• Verwende aussagekräftige Beschriftungen wie „Vorher" und „Nachher" oder „Alt" und „Neu", damit deine Besucher sofort verstehen, was sie sehen.
• Beide Seiten sollten ähnliche Abmessungen haben, damit der Vergleich fair wirkt.
• Nutze hochwertige Bilder, besonders wenn der Unterschied subtil ist – unscharfe oder schlecht beleuchtete Fotos lassen den Effekt verpuffen.