So fügst du in WordPress einen Vorher-Nachher-Slider hinzu

Sind Sie Stylist, Dekorateur, Retuscheur oder in einem anderen Beruf tätig, in dem Sie die visuellen Ergebnisse Ihrer Arbeit präsentieren müssen? Ein Vorher-Nachher-Slider auf Ihrer Website ist einfach zu bedienen und vermittelt Ihren Mehrwert sofort. Leider bietet die Plattform WordPress keine native Slider-Funktion.

Es ist aber nicht unmöglich, einen Slider zu WordPress hinzuzufügen. Dafür stehen Ihnen drei Möglichkeiten zur Verfügung: ein Plugin eines Drittanbieters verwenden, ein kostenloses, schlankes externes Widget nutzen oder einen Slider mit eigenem Code von Grund auf selbst erstellen.

In diesem Artikel erfahren Sie, wie Sie mit allen drei Methoden einen WordPress Vorher-Nachher-Slider einbinden, damit Sie wissen, welche Methode für Ihre Anforderungen die richtige ist.

Watch on youtube

How to Add a Before and After Slider in WordPress

Option 1: Ein WordPress-Slider-Plugin installieren 

Eine der gängigsten Methoden, einen Vorher-Nachher-Slider hinzuzufügen, ist die Verwendung eines WordPress-Plugins. Dieser Ansatz hat allerdings einige Nachteile.

Manche Plugins laden zusätzliches CSS und JavaScript auf Ihrer gesamten Website, was die Ladezeiten der Seiten erhöht. Außerdem zwingen „schwere“ Page Builder wie Elementor Sie dazu, den Slider über komplexe Shortcodes (textbasierte, WordPress-spezifische Codes) zu verwalten, was für Einsteiger ein Albtraum sein kann. Wenn Sie versehentlich einen Teil des Codes löschen, funktioniert der Slider sofort nicht mehr. Hinzu kommt, dass einige Plugins auf einem Freemium-Geschäftsmodell basieren und erweiterte Funktionen hinter einer Paywall verbergen.

Plugins sind nicht für jeden Nutzer geeignet, aber sie sind eine solide Lösung, wenn Sie technisch versiert sind und sich mit WordPress auskennen. Befolgen Sie diese Anleitung, um ein WordPress-Plugin für Vorher-Nachher-Slider zu installieren:

1. Das Plugin installieren: Gehen Sie zum WordPress-Dashboard und klicken Sie auf Plugins. Geben Sie „Vorher-Nachher-Slider“ in die Suchleiste ein und wählen Sie in den Suchergebnissen das Plugin aus, das Sie verwenden möchten. (Es gibt Dutzende. Eine Liste der besten WordPress-Plugins für andere Aufgaben finden Sie hier.)

Folgen Sie den Anweisungen, um das Plugin zu installieren. (Die genaue Installationsanleitung hängt vom jeweiligen Plugin ab.)

Beachten Sie, dass viele Plugins zwar kostenlos sind, andere jedoch einmalige Kosten verursachen. In den meisten Fällen können Sie sie nur mit einem kostenpflichtigen WordPress-Tarif nutzen.

2. Den Vorher-Nachher-Slider erstellen: Öffnen Sie das Plugin im WordPress-Dashboard. Wählen Sie die Option, einen neuen Vorher-Nachher-Slider zu erstellen. Laden Sie Ihre Vorher-Nachher-Bilder hoch. Um bewährte Vorgehensweisen zu befolgen, verwenden Sie Bilder mit demselben Bildausschnitt und denselben Abmessungen.
3. Den Vorher-Nachher-Slider anpassen: Mit den meisten Plugins können Sie Einstellungen wie Bildbeschriftungen, Startposition, Aussehen des Reglers und Ausrichtung des Sliders anpassen. Passen Sie Ihre Einstellungen an und speichern Sie sie.
4. Den Vorher-Nachher-Slider zu Ihrer WordPress-Website hinzufügen: Öffnen Sie die WordPress-Seite, auf der der Slider erscheinen soll. Je nach Plugin können Sie ihn hinzufügen, indem Sie einen eigenen WordPress-Block erstellen oder der Seite einen Shortcode hinzufügen.

Option 2: Ein kostenloses No-Code-Slider-Widget verwenden (empfohlen) 

Wenn Sie sich nicht mit mühsamen Shortcodes oder schwerfälligen Plugins herumschlagen möchten, die Ihre WordPress-Website verlangsamen, ist ein No-Code-Slider-Widget die beste Option. Das Jotform Vorher-Nachher-Slider-Widget ist völlig kostenlos und einfach zu bedienen. Da das Widget serverlos ist, hat es keinerlei Einfluss auf die Geschwindigkeit Ihrer Website. Außerdem funktioniert es einwandfrei auf Desktop-Computern und Smartphones.

Das Vorher-Nachher-Slider-Widget von Jotform bietet eine visuelle Oberfläche, für die Sie keine Programmierkenntnisse benötigen. Laden Sie einfach zwei Bilder in den Widget-Generator hoch, passen Sie die Farben des Ziehreglers an und legen Sie die Standard-Startposition fest. Kopieren Sie anschließend den Code und fügen Sie ihn in WordPress ein.

Hier die Details:

1. Bildpaare hinzufügen: Rufen Sie die Seite des Jotform Vorher-Nachher-Slider-Widgets auf und laden Sie Ihre Vorher- und Nachher-Bilder in das Feld mit den Widget-Einstellungen hoch. Bearbeiten Sie den Titel Ihres Widgets und legen Sie fest, welche Art von Interaktion Sie anbieten möchten (Ziehen und Klicken oder Hover). Klicken oder tippen Sie auf Weiter.

2. Die Slider-Einstellungen anpassen: Sie können Einstellungen wie das Bildverhältnis, den Eckenradius, die Stärke der Trennlinie und die Farben des Sliders anpassen. Scrollen Sie nach unten, um alle Ihre Vorgaben auszuwählen.

3. Den Einbettungscode für das Slider-Widget abrufen: Klicken oder tippen Sie auf Kostenlos auf Ihrer Website testen. Jotform stellt Ihnen einen Einbettungscode für das Slider-Widget bereit. Klicken oder tippen Sie auf Kopieren. Jotform fordert Sie auf, sich zu registrieren oder anzumelden, um den Code zu erhalten.

4. Den Slider-Einbettungscode in WordPress einfügen: Rufen Sie Ihre WordPress-Website auf und fügen Sie über den Block-Inserter einen Individuelles-HTML-Block hinzu. Fügen Sie den Einbettungscode in den HTML-Block ein. Klicken oder tippen Sie auf Aktualisieren. WordPress fügt das Vorher-Nachher-Slider-Widget automatisch in Ihre WordPress-Website ein.

Option 3: Einen individuellen HTML/CSS-Slider programmieren 

Wenn Sie ein WordPress-Purist sind und Plugins von Drittanbietern oder externe Widgets lieber meiden, können Sie einen Slider mit reinem Code von Grund auf selbst erstellen.

Diese Methode ist technisch gesehen kostenlos und nativ in WordPress umsetzbar, aber nicht einfach. Sie benötigen fortgeschrittene Programmierkenntnisse, besonders wenn Website-Besucher den Slider auch auf dem Smartphone nutzen können sollen. Und ein einziger Programmierfehler kann den Slider zerstören und unter anderem die Darstellung auf Smartphones beeinträchtigen.

So fügen Sie mit eigenem Code einen Vorher-Nachher-Slider in WordPress ein:

1. Die Vorher-Nachher-Bilder hochladen: Fügen Sie beide Bilder zur WordPress-Mediathek hinzu.
2. Den individuellen HTML/CSS-Code für den Slider erstellen: Schreiben Sie den HTML/CSS-Code, um den Slider zu strukturieren und zu gestalten. Möglicherweise benötigen Sie außerdem JavaScript, um interaktives Ziehen und Wischen zu ermöglichen.

Sie können diesen Code selbst schreiben, mit einem Kollegen mit Programmiererfahrung zusammenarbeiten oder ein KI-Tool verwenden, um den Code zu generieren.

Kopieren Sie den Code.

3. Den Code zu Ihrer WordPress-Website hinzufügen: Fügen Sie in Ihrer WordPress-Website einen Individuelles-HTML-Block hinzu und fügen Sie Ihren Code in den Block ein. Ergänzen Sie CSS und JavaScript bei Bedarf über das WordPress-Theme oder die Website-Konfiguration.

Werten Sie Ihre WordPress-Website mit smarten No-Code-Widgets auf 

Wenn Sie Wert auf Website-Geschwindigkeit und Sicherheit legen, die Kosten niedrig halten und komplexen Code vermeiden möchten, ist das Vorher-Nachher-Slider-Widget von Jotform eine hervorragende Möglichkeit, Ihrer Website interaktive Medieninhalte hinzuzufügen. Die Nutzung ist völlig kostenlos, ideal für Einsteiger und Profis und erfordert keinerlei Programmierung.

Doch das ist nicht alles, was Jotform zu bieten hat!

Im Jotform-Verzeichnis für Website-Widgets finden Sie über 150 kostenlose Website-Widgets, mit denen Sie Ihre WordPress-Website aufwerten können. So zeigt Ihnen beispielsweise das Besucherzähler-Widget, wie beliebt Ihre Website ist, während das Countdown-Timer-Widget dabei hilft, Dringlichkeit rund um wichtige Veranstaltungen und Kampagnen zu erzeugen.

Jotform bietet außerdem Tausende von WordPress-Formularen, wie Kontaktformulare, Formulare zur Lead-Generierung und Bestellformulare. Fügen Sie sie Ihrer Website hinzu, um wichtige Informationen von Besuchern zu erfassen.

Jotform bietet einen kostenlosen Tarif. Probieren Sie ihn aus, um die Widgets zu entdecken und zu sehen, wie einfach Sie die Funktionalität Ihrer WordPress-Website verbessern können, ohne die Leistung zu beeinträchtigen oder Code schreiben zu müssen.