TL;DR: So fügen Sie einen WordPress Vorher-Nachher-Slider hinzu (ohne Code)
Ein Vorher-Nachher-Slider ermöglicht es Besuchern, durch Ziehen eines Reglers eine Transformation aufzudecken. Sie können einen solchen Slider zu WordPress hinzufügen, ohne Code anfassen zu müssen, indem Sie den SeedProd Vorher-Nachher-Umschaltblock verwenden.
- SeedProd installieren: Laden Sie das Plugin herunter, kopieren Sie Ihren Lizenzschlüssel und aktivieren Sie ihn in WordPress.
- Layout erstellen: Öffnen Sie den Theme Builder oder Landing Page Builder und wählen Sie eine Vorlage zum Bearbeiten aus.
- Block hinzufügen: Suchen Sie den Vorher-Nachher-Umschaltblock im SeedProd-Blockbereich und ziehen Sie ihn in Ihr Design.
- Änderungen aktivieren: Speichern und veröffentlichen Sie, dann aktivieren Sie den SeedProd-Theme-Umschalter, um Ihr Layout live zu schalten.
Sie haben die Arbeit geleistet, Sie haben die Fotos und Sie möchten, dass die Besucher die Transformation spüren. Aber zwei nebeneinander liegende Bilder kommen einfach nicht so gut an, wie Sie es sich erhofft haben, und die Leute scrollen vorbei, ohne anzuhalten.
Ein WordPress Vorher-Nachher-Slider ändert das. Besucher ziehen einen Regler über ein einzelnes Bild, um die Transformation selbst aufzudecken, und dieser Moment der Interaktion lässt das Ergebnis auf eine Weise real wirken, wie es statische Fotos niemals tun.
Ich zeige Ihnen genau, wie Sie einen solchen Slider zu WordPress hinzufügen, ohne eine Zeile Code anfassen zu müssen, indem Sie den integrierten Vorher-Nachher-Umschaltblock von SeedProd verwenden.
Wie funktioniert der Vorher-Nachher-Fotoeffekt?
Ein Vorher-Nachher-Foto-Slider stapelt zwei Bilder und fügt einen ziehbaren Regler hinzu. Besucher schieben, um zu steuern, wie viel von jeder Version sie sehen, was die Transformation partizipativ und nicht passiv wirken lässt.
Ein Zahnarzt, der Aufhellungsergebnisse zeigt, ein Friseursalon, der eine Haartransformation zeigt, oder ein Bauunternehmer, der eine Renovierung zeigt – der Slider ermöglicht es Besuchern, zu ziehen, um die Veränderung selbst zu sehen, anstatt einem statischen Foto zu vertrauen.
Es ist eine einfache Möglichkeit, Änderungen direkt auf Ihrer Website anzuzeigen. Als Nächstes zeige ich Ihnen, wie Sie diesen Effekt in WordPress hinzufügen.
So fügen Sie Vorher-Nachher-Foto-Schieberegler in WordPress hinzu
Die meisten WordPress-Websites benötigen ein Plugin, um diesen Effekt hinzuzufügen. Das folgende Tutorial zeigt Ihnen, wie Sie es mit SeedProd machen.
SeedProd ist ein Drag-and-Drop-Website-Builder, mit dem Sie WordPress-Seiten, Themes und Landing Pages ohne Code erstellen können. Es enthält einen nativen Vorher-Nachher-Umschaltblock, was bedeutet, dass Sie kein separates Slider-Plugin benötigen. SeedProd erledigt alles an einem Ort.
Sie können SeedProd auch verwenden, um eine „Coming Soon“-Seite zu erstellen und WordPress in den Wartungsmodus zu versetzen. Alles, was Sie erstellen, ist zu 100 % mobilfreundlich und stellt sicher, dass Ihre Website auf Mobilgeräten einfach zu bedienen ist.
Klicken Sie auf die Schaltfläche unten, um das SeedProd-Plugin herunterzuladen, und folgen Sie dann den Schritten, um einen Vorher-Nachher-Foto-Schieberegler auf Ihrer Website einzubetten.
Schritt 1. SeedProd installieren und aktivieren
Nach dem Herunterladen des Plugins finden Sie den Tab Downloads in Ihrem SeedProd-Konto und kopieren Sie Ihren Lizenzschlüssel.
Laden Sie nun das Plugin auf Ihre WordPress-Site hoch. Wenn Sie Hilfe benötigen, können Sie dieser Schritt-für-Schritt-Anleitung folgen, wie Sie ein WordPress-Plugin installieren.
Sobald SeedProd installiert ist, navigieren Sie zu SeedProd » Einstellungen in Ihrem WordPress-Adminbereich und fügen Sie den zuvor kopierten Lizenzschlüssel ein.
Klicken Sie auf die Schaltfläche Schlüssel überprüfen, um Ihre Lizenz zu aktivieren, und fahren Sie dann mit Schritt 2 fort.
Schritt 2. Erstellen Sie Ihr WordPress-Layout
SeedProd bietet Ihnen zwei Optionen, wo Sie Ihren Slider platzieren können: den Theme Builder, der Ihr gesamtes WordPress-Theme durch ein benutzerdefiniertes Design ersetzt, oder den Landing Page Builder, der eigenständige Seiten neben Ihrem vorhandenen Theme erstellt.
Diese Anleitung verwendet den Theme Builder, um ein benutzerdefiniertes WordPress-Theme zu erstellen und die Homepage-Vorlage zu bearbeiten. Die Schritte zum Hinzufügen des Slider-Blocks sind jedoch in beiden Fällen gleich.
Sobald Sie ein neues Layout erstellt haben, fahren Sie mit Schritt 3 fort und fügen Sie den Slider zu Ihrem Design hinzu.
Schritt 3. Fügen Sie den Vorher-Nachher-WordPress-Block hinzu
Nachdem Sie Ihr Layout erstellt haben, öffnen Sie die Seite, die Sie mit dem Seitenersteller von SeedProd bearbeiten möchten.
Da wir die Homepage unseres WordPress-Themes bearbeiten, gehen wir zu SeedProd » Theme Builder und klicken auf Design bearbeiten unter der Vorlage Homepage.
Auf dem folgenden Bildschirm sehen Sie ein Layout, das dem unten gezeigten ähnelt:
Auf der rechten Seite sehen Sie eine Live-Vorschau der Vorlage, die Sie in Schritt 2 ausgewählt haben, und auf der linken Seite befinden sich Blöcke und Abschnitte, die Sie per Drag & Drop in Ihr Design ziehen können.
Sie können beispielsweise Überschriften bearbeiten, indem Sie darauf klicken und Ihren neuen Inhalt direkt in der Live-Vorschau eingeben.
Oder Sie bearbeiten den Text im Einstellungsbereich auf der linken Seite, der unzählige Anpassungsoptionen enthält.
Passen Sie Ihre Vorlage an, bis sie so aussieht, wie Sie es möchten.
Nun sehen wir uns an, wie Sie Funktionen hinzufügen, die Ihre Vorlage möglicherweise nicht automatisch enthält. Zum Beispiel hat das von uns gewählte Website-Kit keinen Vorher-Nachher-Foto-Schieberegler, also müssen wir ihn selbst hinzufügen.
Scrollen Sie dazu durch die WordPress-Blöcke auf der linken Seite, bis Sie den Vorher-Nachher-Umschalter finden. Ziehen Sie ihn dann an die richtige Stelle in Ihrer Live-Vorschau.
Wenn Sie auf den Block klicken, öffnen Sie dessen Anpassungsoptionen im linken Einstellungsbereich. Hier können Sie Ihre Vorher- und Nachher-Bilder hinzufügen, das Styling ändern und vieles mehr.
Beginnen wir mit dem Hinzufügen des ersten Bildes, das normalerweise Ihr „Vorher“-Foto ist. Sie können dies tun, indem Sie auf die Option Eigenes Bild verwenden klicken und entweder ein neues Foto hochladen oder eines aus Ihrer WordPress-Mediathek auswählen.
Wiederholen Sie diesen Schritt nun für das „Nachher“-Bild. Sie können die Beschriftungen für jedes Bild bearbeiten, indem Sie die Namen in den Textfeldern ersetzen.
Nachdem Ihre Bilder platziert sind, sehen wir uns einige weitere Einstellungen an.
Unter der Überschrift Ausrichtung können Sie den Vorher-Nachher-Schieberegler vertikal statt horizontal machen.
Sie können den Schieberegler auch so bewegen, dass er sich bewegt, wenn Sie mit dem Mauszeiger über das Bild fahren, und eine Farbüberlagerung auf die Fotos anwenden.
Wenn Sie die Überschrift Vergleichsgriff öffnen, sehen Sie Einstellungen zum Ändern der Schiebereglerfarbe, -breite, -radiusgröße und mehr.
Weitere Einstellungen finden Sie, indem Sie auf die Registerkarte Erweitert klicken. Sie können beispielsweise die Typografie und Farbe der Beschriftung ändern, den Blockabstand und die Attribute anpassen und bestimmte Elemente auf mobilen Geräten ausblenden.
Wenn Sie mit dem Aussehen des Vorher-Nachher-Foto-Schiebereglers zufrieden sind, klicken Sie auf die Schaltfläche Speichern in der oberen rechten Ecke Ihres Bildschirms und dann auf Veröffentlichen.
Wenn Sie eine Landingpage erstellen, können Sie jetzt eine Vorschau Ihrer Seite anzeigen und Ihren Vorher-Nachher-Bild-Schieberegler in Aktion sehen. Wenn Sie jedoch ein benutzerdefiniertes WordPress-Theme erstellen, müssen Sie Schritt 4 abschließen.
Schritt 4. Änderungen aktivieren
Auch wenn Ihre Änderungen gespeichert und veröffentlicht wurden, müssen Sie Ihr WordPress-Theme noch live schalten. Keine Sorge, dieser Schritt ist schnell erledigt.
Gehen Sie in Ihrem WordPress-Dashboard zu SeedProd » Theme Builder und stellen Sie den Schalter SeedProd Theme aktivieren auf „Ja“. Das war’s!
Jetzt können Sie zum Frontend Ihrer Website gehen und Ihren neuen WordPress Vorher-Nachher-Schieberegler ausprobieren.
Häufig gestellte Fragen zum Vorher-Nachher-Foto-Schieberegler
Kann ich mehrere Vorher-Nachher-Schieberegler auf einer Seite in WordPress hinzufügen?
Ja. Der SeedProd Vorher-Nachher-Umschaltblock kann überall in Ihrem Layout hinzugefügt werden, sodass Sie mehrere Schieberegler auf einer einzigen Seite platzieren können. Jeder Block ist unabhängig und enthält seine eigenen Bilder und Einstellungen.
Es gibt keine Begrenzung, wie viele Sie verwenden können, obwohl mehr Schieberegler auf einer Seite die Ladezeiten verlangsamen können, wenn die Bilder nicht optimiert sind.
Funktioniert der Vorher-Nachher-Schieberegler auf Mobilgeräten?
Ja. Der SeedProd Vorher-Nachher-Umschaltblock ist vollständig responsiv, sodass der Schieberegler sowohl auf Touchscreens als auch auf Desktops funktioniert. Besucher wischen auf Mobilgeräten anstelle von Ziehen, und das Erlebnis überträgt sich natürlich.
Für beste Ergebnisse verwenden Sie Bilder, die mindestens 800 Pixel breit sind, und halten Sie den Schieberegler auf Mobilgeräten in einem einspaltigen Layout. Sie können den Tab "Erweitert" von SeedProd verwenden, um die Sichtbarkeit und Abstände für verschiedene Bildschirmgrößen anzupassen.
Wie wechsle ich den Schieberegler in WordPress von horizontal zu vertikal?
Finden Sie in den Einstellungen des SeedProd Vorher-Nachher-Umschaltblocks die Option Ausrichtung. Ein Klick darauf schaltet die Ziehrichtung von links nach rechts (horizontal) auf oben nach unten (vertikal) um.
Die vertikale Ausrichtung eignet sich gut für Vergleiche, bei denen die Veränderung entlang einer vertikalen Achse stärker auffällt, wie z. B. bei Haarschnitten oder höhenbasierten Renovierungen.
Welche Bildgröße sollte ich für einen Vorher-Nachher-Schieberegler verwenden?
Beide Bilder sollten die gleichen Abmessungen haben. Wenn sie unterschiedliche Größen haben, kann der Schieberegler inkonsistent angezeigt werden. Eine Breite von 800-1200 Pixeln eignet sich gut für die meisten Layouts.
Halten Sie die Dateigrößen unter 150 KB, indem Sie JPEGs mit 70-80 % Qualität speichern. Unterschiedliche Bildabmessungen sind die häufigste Ursache für einen schiefen oder ruckelnden Schieberegler.
Kann ich einen Vorher-Nachher-Schieberegler zu WordPress hinzufügen, ohne ein Plugin zu verwenden?
Technisch gesehen ja, aber es erfordert benutzerdefiniertes JavaScript und CSS, das die meisten WordPress-Websitebesitzer nicht selbst schreiben können. Sie müssten diesen Code auch bei jedem WordPress-Update pflegen.
Ein Plugin wie SeedProd kümmert sich um die technische Seite für Sie, und die Drag-and-Drop-Oberfläche bedeutet, dass zu keinem Zeitpunkt im Prozess Code erforderlich ist.
Sie haben einen WordPress Vorher-Nachher-Schieberegler hinzugefügt, der Ihre Arbeit auf die überzeugendste Weise präsentiert. Besucher können die Transformation selbst entdecken, anstatt nur statische Bilder anzusehen, was genau der Sinn der Sache ist.
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
