Hallo, wir haben bemerkt, dass Sie Ihren Kauf von Advanced Coupons nicht abgeschlossen haben.

Wir freuen uns, Sie in der Advanced Coupons-Familie begrüßen zu dürfen! Schließen Sie jetzt Ihren Kauf ab & sparen Sie!
Wenn Sie Fragen haben, wenden Sie sich bitte an unser Support-Team!

So zeigen Sie einen Vorher-Nachher-Bild-Schieberegler in WordPress an

So zeigen Sie einen Vorher-Nachher-Bild-Schieberegler in WordPress an

Der Betrieb eines Online-Shops birgt Profitabilitätspotenzial, aber oft konkurriert man mit zahlreichen ähnlichen Unternehmen auf dem eigenen Markt. Um sich von der Konkurrenz abzuheben, ist ein Vorher-Nachher-Bildschieberegler in WordPress ein effektives Werkzeug.

Ein Vorher-Nachher-Bildschieberegler in WordPress kann Ihnen helfen, die einzigartigen Merkmale und Vorteile Ihres Produkts hervorzuheben. Glücklicherweise lässt sich diese Funktion mit einem Plugin wie dem Vorher-Nachher-Bildvergleichsschieberegler für Elementor einfach einrichten.

In diesem Artikel werden wir uns die Gründe ansehen, warum die Nutzung eines Vorher-Nachher-Bildschiebereglers Ihre Online-Produktverkäufe steigern kann. Zusätzlich geben wir Ihnen eine einfache Schritt-für-Schritt-Anleitung, wie Sie diese Funktion installieren und optimal nutzen. Tauchen wir gleich ein!

Warum Sie einen Vorher-Nachher-Bildschieberegler in WordPress in Betracht ziehen sollten

Ein Vorher-Nachher-Bildschieberegler kann zeigen, wie eine Situation mit und ohne Ihr Produkt aussieht. Es ist ein visuelles Merkmal, das Ihren Kunden schnell greifbare Vorteile zeigen kann.

Diese Funktion ist besonders vorteilhaft, wenn Ihr Produkt ein Problem löst. Anstatt den Kunden zu erzählen, wie Ihr Artikel ihre Probleme beheben kann, können Sie es ihnen einfach zeigen.

Zum Beispiel verwenden wir auf unserer Website einen Vorher-Nachher-Bildschieberegler, um die Vorteile unseres Advanced Coupons Plugins zu zeigen. Er demonstriert, wie Sie mehr verfügbare Einstellungen und Flexibilität haben, um Ihre Coupons anzupassen, wenn Sie unser WooCommerce-Tool verwenden:

Ein Beispiel für einen Vorher-Nachher-Bildschieberegler in WordPress.
Ein Beispiel für einen Vorher-Nachher-Bildschieberegler (zum Vergrößern klicken)

Ein Bildschieberegler kann Ihren Online-Shop von der Konkurrenz abheben. Die meisten E-Commerce-Shops verwenden Produktbeschreibungen und Fotos, um ihre Waren zu bewerben. Nur wenige von ihnen nutzen immersive Elemente wie Schieberegler.

Insgesamt ist ein Bildschieberegler interaktiv, was das Interesse eines potenziellen Kunden wecken könnte. Sie können den Schieberegler nach Bedarf ziehen, um die Funktionen Ihres Produkts vollständig zu erkunden.

So zeigen Sie einen Vorher-Nachher-Bild-Schieberegler in WordPress an

Es gibt verschiedene Möglichkeiten, einen Vorher-Nachher-Bildschieberegler in WordPress einzurichten. In diesem Tutorial arbeiten wir mit dem Vorher-Nachher-Bildvergleichsschieberegler für Elementor. Dieses kostenlose Tool lässt sich einfach in den Elementor Page Builder integrieren und ermöglicht es Ihnen, Ihre Schiebereglerbilder anzupassen.

Sie könnten auch in Erwägung ziehen, ein anderes Schieberegler-Plugin zu verwenden. Dies sind beides gute Optionen:

  • BEAF Pro by Themefic. Dieses Premium-Tool bietet mehrere Vorschläge-Stile, eine filterbare Galerie und verschiedene Schieberegler-Optionen für Ihre Vorher-Nachher-Bilder. Eine Jahreslizenz beginnt bei 12 US-Dollar für eine Website.
  • Twenty20 Image Before After. Dieses reaktionsschnelle Plugin verwendet einen Shortcode, um einen einfachen Bildschieberegler zu Ihrer WordPress-Website hinzuzufügen. Es ist außerdem komplett kostenlos nutzbar.

Nun wollen wir mit dem Tool „Before After Image Comparison Slider“ einen Bildschieberegler erstellen. Beachten Sie, dass Sie auch das Elementor-Plugin installieren müssen, falls Sie es noch nicht verwenden.

Schritt 1: Installieren Sie den Before After Image Comparison Slider für Elementor

Öffnen Sie Ihr WordPress-Dashboard und gehen Sie zu Plugins > Installieren. Suchen Sie dann im Suchfeld nach „before after image comparison“ und wählen Sie das erste Plugin aus, das erscheint:

Das WordPress-Plugin Before After Image Comparison Slider.
Das WordPress-Plugin Before After Image Comparison Slider (zum Vergrößern klicken)

Klicken Sie auf die Schaltfläche Jetzt installieren. Sobald dieser Vorgang abgeschlossen ist, wählen Sie Aktivieren, um die Einrichtung des Plugins abzuschließen.

Alternativ können Sie das Plugin als .zip-Datei herunterladen. Dann können Sie es auf Ihre Website hochladen, indem Sie auf Plugin hochladen > Datei wählen > Jetzt installieren klicken:

Installieren des Bildschieberegler-Plugins aus einer .zip-Datei.
Installieren des Bildschieberegler-Plugins aus einer .zip-Datei (zum Vergrößern klicken)

Wählen Sie Plugin aktivieren, um die Installation abzuschließen. Das Plugin ist jetzt auf Ihrer Website aktiv und einsatzbereit.

Schritt 2: Laden Sie Ihre Bilder hoch

Sie sollten nun einen Menüpunkt Before After Slider for the Elementor in Ihrem WordPress-Dashboard sehen. Wir werden unseren Schieberegler jedoch mit dem Elementor-Editor anpassen.

Öffnen Sie die Seite oder den Beitrag, auf der/dem Sie den Schieberegler verwenden möchten.

Klicken Sie dann oben auf dem Bildschirm auf die Schaltfläche Mit Elementor bearbeiten:

Bearbeiten eines WordPress-Beitrags mit dem Elementor-Seitenersteller.
Bearbeiten eines WordPress-Beitrags mit dem Elementor Seiten-Builder (zum Vergrößern klicken)

Sie sollten nun links ein Elementor-Menü sehen. Scrollen Sie bis zum Ende, bis Sie WEB BUILDERS ELEMENT sehen. Öffnen Sie das Dropdown-Menü und ziehen Sie den Before After Image Comparison Slider auf Ihre Seite:

Erstellen eines Vorher-Nachher-Bildschiebereglers in WordPress mit Elementor.
Erstellen eines Vorher-Nachher-Bildschiebereglers in WordPress mit Elementor (zum Vergrößern klicken)

Laden Sie nun Ihre Vorher- und Nachher-Bilder hoch, indem Sie zu den entsprechenden Feldern navigieren und auf Bild wählen klicken:

Auswahl von Bildern für einen Vergleichsbildschieberegler.
Auswählen von Bildern für einen Vergleichsbildschieberegler (zum Vergrößern klicken)

Sie werden dann aufgefordert, entweder Bilder aus Ihrer Mediathek auszuwählen oder sie direkt von Ihrem Computer hochzuladen. Sobald Sie Ihre Bilder hinzugefügt haben, können Sie mit dem letzten Schritt fortfahren.

Schritt 3: Konfigurieren Sie Ihren Schieberegler und speichern Sie Ihre Änderungen

Die meisten Einstellungen für den Schieberegler sind nur in der Pro-Version des Plugins verfügbar. Wenn Sie beispielsweise die Ausrichtung des Schiebereglers, die Hover-Effekte und die Beschriftungseinstellungen anpassen möchten, müssen Sie für das Premium-Tool bezahlen:

Bearbeiten der Einstellungen für einen Vorher-Nachher-Bildschieberegler in WordPress.
Bearbeiten der Einstellungen (zum Vergrößern klicken)

Sie können jedoch die Bildgrößen ändern, indem Sie auf Bildgröße klicken und Ihre Abmessungen aus dem Dropdown-Menü auswählen:

Auswahl verschiedener Bildschieberegler-Größen.
Auswahl verschiedener Bildschieberegler-Größen (zum Vergrößern anklicken)

Wenn Sie auf die Registerkarte Erweitert klicken, finden Sie weitere technische Einstellungen. Sie können beispielsweise die Bewegungseffekte, das Erscheinungsbild und die Attribute des Schiebereglers anpassen. Sie können auch benutzerdefiniertes CSS anwenden:

Erweiterte Einstellungen für den Bildvergleichsschieberegler.
Erweiterte Einstellungen für den Bildvergleichsschieberegler (zum Vergrößern anklicken)

Wenn Sie mit Ihren Änderungen zufrieden sind, wählen Sie VERÖFFENTLICHEN.

Sie sollten nun in der Lage sein, Ihren Schieberegler in Aktion zu sehen:

Ein abgeschlossener Vorher-Nachher-Bildschieberegler in WordPress.
Ein fertiger Vorher-Nachher-Bildschieberegler in WordPress (zum Vergrößern anklicken)

Herzlichen Glückwunsch! Sie haben erfolgreich einen Vorher-Nachher-Bildschieberegler in WordPress erstellt.

Fazit

Ein Bildschieberegler ermöglicht es Benutzern, mit Ihren Produkten zu interagieren und die Merkmale und Vorteile Ihrer Artikel zu demonstrieren. Darüber hinaus kann die Verwendung eines dieser Schieberegler eine immersivere Erfahrung bieten als einfache Produktbeschreibungen oder Fotos.

Zusammenfassend lässt sich sagen, dass Sie einen Vorher-Nachher-Bildschieberegler in WordPress verwenden können, indem Sie die folgenden Schritte ausführen:

  1. Installieren Sie das Plugin Before After Image Comparison Slider für Elementor.
  2. Laden Sie Ihre Bilder hoch.
  3. Konfigurieren Sie Ihren Schieberegler und speichern Sie Ihre Änderungen.

Haben Sie Fragen zur Verwendung eines Vorher-Nachher-Bildschiebereglers in WordPress? Lassen Sie es uns im Kommentarbereich unten wissen!

Facebook
Twitter
LinkedIn
E-Mail

Antworten

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Schließen Sie Ihren Kauf ab