Vorher-Nachher-Vergleich einrichten
Mit diesem Block zeigst du deinen Besuchern zwei Bilder nebeneinander – mit einem Regler, den sie verschieben können, um die Unterschiede zu sehen. Das funktioniert wie ein Schieber, den man mit der Maus oder dem Finger bedient. Du kannst mehrere solcher Bildpaare anlegen oder den Block für getrennte Inhalte links und rechts nutzen.
Voraussetzungen
Es gibt keine besonderen Voraussetzungen.
So gehst du vor
Öffne den Block und entscheide zuerst, welche Bauform du möchtest:
- Bildpaare: Mehrere Bilder nebeneinander mit je einem eigenen Regler
- Getrennte Inhalte: Links und rechts unterschiedliche Texte oder Bilder, ebenfalls mit Regler
Wähle die Bauform im Feld Bauform am Ende der Einstellungen aus. Je nachdem, was du auswählst, zeigt weboffice dir die passenden Eingabefelder.
Fülle die Kopfinformationen aus (oben unter Text):
- Kleine Überschrift: Ein kurzer Teaser (optional, maximal zwei Zeilen)
- Überschrift: Die Hauptüberschrift des Blocks (optional, maximal zwei Zeilen)
- Untertitel: Ein erläuternder Text (optional, maximal zwei Zeilen)
- Beschriftung links: Wie heißt das linke Bild oder der linke Inhalt? – zum Beispiel „Vorher"
- Beschriftung rechts: Wie heißt das rechte Bild oder der rechte Inhalt? – zum Beispiel „Nachher"
Je nach Bauform folgt jetzt der richtige Ablauf:
Falls du Bildpaare gewählt hast:
- Klicke auf Bildpaar hinzufügen, um ein neues Bildpaar anzulegen.
- Für jedes Paar:
- Lade das Bild, das auf der linken Seite (unter dem Regler) stehen soll – das ist das Bild „vorher".
- Lade das Bild, das auf der rechten Seite (unter dem Regler) stehen soll – das ist das Bild „nachher". Die Bilder werden automatisch im Seitenverhältnis 4:3 zugeschnitten.
- Trage eine Bildunterschrift ein, die beide Bilder beschreibt (optional).
- Ein Paar erscheint erst auf der Website, wenn du beide Bilder hochgeladen hast.
- Mit den Pfeilen neben jedem Paar kannst du die Reihenfolge ändern (nach oben oder unten verschieben).
- Mit dem Papierkorb-Symbol löschst du ein Paar wieder heraus.
- Wiederhole das für alle Bildpaare, die du brauchst.
Falls du getrennte Inhalte gewählt hast:
- Die Eingabefelder für linke und rechte Seite öffnen sich automatisch. Dort stellst du ein, was links und rechts jeweils erscheinen soll – Bilder, Text oder Kombinationen, je nachdem, wie der Block aufgebaut ist.
Speichern. Der Block ist damit fertig eingerichtet.
Aufbau des Blocks
Kopfbereich (Text):
- Die kleine Überschrift, Überschrift und der Untertitel erscheinen oben im Block.
- Die Beschriftungen links und rechts werden beim Regler angezeigt, damit der Besucher weiß, was er sieht.
Bildbereich (bei Bauform „Bildpaare"):
- Jedes Bildpaar hat einen eigenen Regler. Der Besucher zieht ihn mit der Maus oder dem Finger oder bedient ihn mit den Pfeiltasten der Tastatur.
- Die Bilder müssen im Seitenverhältnis 4:3 vorliegen – weboffice zuschneidet sie automatisch.
- Erst wenn beide Bilder eines Paares gespeichert sind, erscheint das Paar auf der Website.
Bauform-Auswahl:
- Im Feld Bauform entscheidest du, ob mehrere Bildpaare nebeneinander laufen sollen oder ob du getrennte Inhalte links und rechts brauchst. Die verfügbaren Optionen richten sich danach, wie der Block in deiner Website konfiguriert wurde.
Was danach passiert
Der Block wird im Editor gespeichert. Deine Besucher sehen die Bilder oder Inhalte mit dem Regler – sie können ihn verschieben, um den Unterschied zu sehen.
Um den Block auf der Website zu veröffentlichen, siehe Seiten veröffentlichen.
Tipps und Hinweise
- Bildpaare nur mit beiden Bildern sichtbar: Solange du bei einem Paar nur ein Bild hochgeladen hast, wird das Paar auf der Website nicht angezeigt. Das ist gewollt – so vermeidest du halb fertige Paare im Netz.
- Reihenfolge anpassen: Mit den Pfeiltasten neben jedem Paar kannst du die Reihenfolge jederzeit ändern. Der Nach-oben-Pfeil ist ausgegraut, wenn das Paar schon ganz oben steht.
- Bildgröße und Format: Bringe deine Bilder am besten auf eine ähnliche Größe und das Seitenverhältnis 4:3 mit – dann sieht der Block gleichmäßig aus. weboffice zuschneidet die Bilder beim Speichern automatisch auf dieses Format.