Möchten Sie Fotobearbeitungsfähigkeiten auf eine interaktive und professionelle Weise präsentieren? Ein Vorher-Nachher-Foto-Schieberegler ermöglicht es Besuchern, durch Ziehen eines Reglers die Transformation selbst aufzudecken, was Ihr Portfolio ansprechender macht als statische nebeneinander liegende Bilder.
Das Beste daran ist, dass Sie diesen Effekt mit einer einfachen No-Code-Lösung zu WordPress hinzufügen können, und ich werde Sie Schritt für Schritt durchführen.
Schnelle Schritte zum Hinzufügen eines Vorher-Nachher-Foto-Schiebereglers zu WordPress:
Wie funktioniert der Vorher-Nachher-Fotoeffekt?
Ein Vorher-Nachher-Foto-Schieberegler ermöglicht es Besuchern, einen Teiler zu ziehen, um ein Bild über einem anderen anzuzeigen. Anstelle von statischen nebeneinander liegenden Aufnahmen steuern die Benutzer, wie viel von jeder Version sie sehen, was die Transformation ansprechender macht.
Zum Beispiel:
- Zahnärzte können Ergebnisse vor und nach der Behandlung hervorheben.
- Schönheitsmarken können die Wirkung eines Produkts zeigen.
- E-Commerce-Shops können Produktmerkmale vergleichen.
Es ist eine einfache, aber wirkungsvolle 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
Normalerweise beinhaltet das Hinzufügen von Foto-Schieberegler-Widgets und Diashows zu Ihrer Website die Verwendung von Javascript, Jquery, HTML, CSS und anderen Programmiersprachen. Viele Website-Besitzer wissen nicht, wie sie diesen Code schreiben sollen, und wenden sich daher an Webentwickler, was ziemlich kostspielig sein kann.
Glücklicherweise gibt es günstigere Möglichkeiten, Ihrer WordPress-Site neue Funktionen hinzuzufügen. Mit einigen der besten WordPress-Plugins können Sie Ihre Website einfach erweitern, ohne ein Vermögen auszugeben.
Das folgende Tutorial zeigt Ihnen, wie Sie Vorher-Nachher-Foto-Schieberegler mit SeedProd hinzufügen.
SeedProd ist der beste WordPress-Website-Builder mit Drag-and-Drop-Funktionalität. Es ermöglicht Ihnen, vorgefertigte Vorlagen und einen visuellen Seitenersteller zu verwenden, um flexible WordPress-Layouts ohne Code zu erstellen.
Mit seinen Drag-and-Drop- WordPress-Blöcken können Sie Ihre Website mit wertvollen Funktionen erweitern, darunter:
- Vorher-Nachher-Schieberegler
- Erweiterte Bildergalerien
- Preistabellen
- Opt-in-Formulare
- Call-to-Action-Buttons
- Countdown-Timer
- Tabbed Content
- Verlosungen
- Kontaktformulare
- Und vieles mehr.
Sie können SeedProd auch verwenden, um eine „Coming Soon“-Seite zu erstellen und WordPress in den Wartungsmodus zu versetzen. Außerdem ist alles, was Sie erstellen, zu 100 % mobilfreundlich, sodass 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
Nach der Installation von SeedProd müssen Sie entscheiden, welche Art von Layout Sie erstellen möchten. Sie können ein benutzerdefiniertes WordPress-Theme erstellen oder mit dem Drag-and-Drop-Editor von SeedProd hochkonvertierende Landing Pages erstellen.
Die Option Theme Builder ist eine großartige Möglichkeit, Ihr bestehendes Website-Design durch ein neues WordPress-Theme zu ersetzen, das auf Ihre Geschäftsanforderungen zugeschnitten ist. Sie generiert alle Designdateien eines typischen WordPress-Themes und ermöglicht es Ihnen, jeden Teil visuell mit seinem leistungsstarken Seitenersteller anzupassen.
Folgen Sie diesem Tutorial, um mit SeedProd ein benutzerdefiniertes WordPress-Theme zu erstellen.
Alternativ können Sie den Landing Page Builder verwenden, um eigenständige Landing Pages zu erstellen, die nahtlos mit Ihrem aktuellen WordPress-Theme funktionieren. Er verwendet denselben visuellen Editor wie der Theme Builder und ist eine fantastische Lead-Generierungs-Taktik für jede Website.
Hier ist eine Anleitung, wie Sie mit SeedProd eine Landing Page in WordPress erstellen.
Sobald Sie ein neues Layout erstellt haben, können Sie zu Schritt 3 übergehen und Ihrem Design einen Vorher-Nachher-Schieberegler hinzufügen.
Hinweis: Für diese Anleitung erstellen wir ein benutzerdefiniertes WordPress-Theme und bearbeiten die Homepage.
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.
Das Anpassen von Elementen ist super einfach.
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.
Schauen wir uns nun 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 sind, müssen Sie Ihr WordPress-Theme noch live schalten. Keine Sorge; dieser Schritt ist schnell und einfach.
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 Bild-Schieberegler ausprobieren.
Häufig gestellte Fragen zum Vorher-Nachher-Foto-Schieberegler
Sie wissen jetzt, wie Sie Vorher-Nachher-Foto-Schieberegler zu Ihrer WordPress-Website hinzufügen. Es gibt so viele Möglichkeiten, diese Funktion für den Erfolg Ihres Unternehmens zu nutzen.
Worauf warten Sie also noch?
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.
