Der Abschnitt Vorher und nachher legt zwei Bilder mit einem Trenner übereinander. Kunden ziehen den Trenner, um mehr vom einen oder vom anderen Bild zu sehen. Nutze ihn für Ergebnisse (vorher und nachher), zwei Farben oder zwei Ausführungen eines Produkts.
Den Abschnitt hinzufügen
- Öffne den Builder und gehe zur gewünschten Seite. Er funktioniert auf der Startseite, der Produktseite, der Landingpage, der Kollektionsseite und der Kollektionsübersicht, bis zu 3 pro Seite.
- Klicke im Tab Abschnitte auf Neuen Abschnitt hinzufügen und wähle Vorher und nachher aus der Gruppe Inhalt.
- Klicke auf den Block Vorher und nachher darin, wähle deine zwei Bilder und klicke dann auf Veröffentlichen.
Der Block Vorher und nachher
Dieser Block enthält die zwei Bilder. Er ist immer im Abschnitt und kann nicht entfernt werden.
- Vorher-Bild und Nachher-Bild: die zwei Bilder. Nutze Fotos aus demselben Blickwinkel, damit sie genau übereinanderpassen.
- Vorher-Beschriftung und Nachher-Beschriftung: ein kurzes Etikett in der Ecke jedes Bildes, etwa "Vorher" und "Nachher" oder "Schwarz" und "Weiß". Lass das Feld leer, um das Etikett auszublenden.
- Richtung: Horizontal nutzt einen Trenner, den Kunden nach links und rechts ziehen. Vertikal nutzt einen Trenner, den Kunden nach oben und unten ziehen.
- Verhältnis: die Form des Rahmens. Auto richtet sich nach dem Vorher-Bild, oder wähle Hochformat, Quadrat oder Querformat. Beide Bilder werden auf denselben Rahmen zugeschnitten.
- Position des Trenners: wo der Trenner startet, von 5 % bis 95 %. Bei 50 % sehen Kunden von jedem Bild die Hälfte.
- Hinweis zeigen, sobald es sichtbar wird: Der Trenner bewegt sich ein wenig von selbst, damit Kunden sehen, dass sie ihn ziehen können.
- Auf dem Desktop der Maus folgen: Auf Computern folgt der Trenner der Maus ohne Klick. Auf dem Handy ziehen Kunden immer.
- Übergeordnetes Farbschema verwenden: Trenner, Griff und Etiketten nutzen die Farben des Abschnitts. Schalte es aus, um ein anderes Farbschema zu wählen.
Abschnittseinstellungen und Titel
Füge bis zu 2 Text-Blöcke, 1 Trennlinie und 1 Gruppe für eine Überschrift und einen kurzen Text hinzu.
- Richtung: Vertikal setzt die Überschrift über die Bilder, Horizontal daneben.
- Auf Mobilgeräten vertikal stapeln: standardmäßig an, damit die Bilder die volle Handybreite behalten.
- Position und Ausrichtung, Abschnittsbreite, Farbschema, Innenabstand und ein Tab Benutzerdefiniertes CSS.
Auf der Produktseite
Derselbe Block Vorher und nachher kann auch in die Abschnitte Produktinformationen und Landing-Informationen sowie in Aufklappbereiche eingefügt werden, damit der Vergleich direkt neben dem Kaufen-Button steht. Siehe Wie füge ich meiner Produktseite Aufklappbereiche, Lieferdaten, eine Größentabelle, Badges oder Vorher-Nachher-Bilder hinzu?
Gut zu wissen
- In deinem Live-Shop erscheint der Vergleich erst, wenn beide Bilder gewählt sind. Bis dahin zeigt der Builder Beispielbilder.
- Kunden können den Trenner auch mit der Tastatur bewegen.
- Kunden, die auf ihrem Gerät reduzierte Bewegung eingeschaltet haben, sehen die Hinweis-Bewegung nicht.
- Die Bilder wirken abgeschnitten? Wähle das Verhältnis, das deinen Fotos am nächsten kommt, oder nutze Fotos mit derselben Form.
- Nutze nur echte Fotos von echten Ergebnissen.