So zeigen Sie Vorher- und Nachher-Fotos in WordPress an (mit Schiebeeffekt)

Der Versuch, eine dramatische Transformation mit statischen, nebeneinander liegenden Bildern zu zeigen, kann sich etwas flach anfühlen. Sie haben erstaunliche Arbeit geleistet, aber der Wow-Faktor geht verloren, wenn Besucher die Veränderung nicht selbst erleben können.

Wir haben festgestellt, dass eine der besten Möglichkeiten, die Wirkung eines Produkts oder einer Dienstleistung hervorzuheben, ein interaktiver Vorher-Nachher-Schieberegler ist. Es ist ein leistungsstarkes Werkzeug, das wir in unseren eigenen Projekten verwendet haben, um die Ergebnisse für sich sprechen zu lassen.

In diesem Artikel stellen wir Ihnen unsere zwei bewährten Methoden vor, um einen Vorher-Nachher-Fotovergleicher zu Ihrer WordPress-Website hinzuzufügen. Wir haben eine einfache Option für Anfänger und eine anpassbarere für diejenigen, die mehr Kontrolle wünschen.

Wann man einen Vorher-Nachher-Foto-Schieberegler in WordPress verwendet

Ein Vorher-Nachher-Bild ist ein interaktives Bild, das typischerweise eine Art Veränderung zeigt.

Besucher können einen Schieberegler verwenden, um auf ansprechende und interaktive Weise zwischen den verschiedenen 'Versionen' des Bildes zu wechseln.

Wenn Sie einen Online-Shop mit einem Plugin wie WooCommerce betreiben, können Vorher-Nachher-Fotos die Wirkung Ihrer Produkte oder Dienstleistungen zeigen.

Sie müssen lediglich ein „Vorher“-Foto zeigen, mit dem sich der Kunde identifizieren kann, und ein wünschenswertes „Nachher“-Foto. Dies wird Käufer dazu bringen, das Produkt kaufen zu wollen, das sie vom „Vorher“-Zustand in den „Nachher“-Zustand versetzt.

Wenn Sie ein Affiliate-Marketer sind, ist die Anzeige überzeugender Vorher-Nachher-Fotos auf Ihrer Website eine großartige Möglichkeit, Ihre Affiliate-Links zu bewerben und mehr Verkäufe zu erzielen.

Das Ziehen eines Schiebereglers, um das 'Nachher'-Foto anzuzeigen, ist auch eine einfache Möglichkeit, mehr Engagement zu erzielen, was Besucher länger auf Ihrer Website halten kann. Dies kann auch helfen, Ihre Seitenaufrufe zu erhöhen und die Absprungrate in WordPress zu reduzieren.

Mit diesen Worten wollen wir uns ansehen, wie Sie mit einem Schieberegler-Effekt ein Vorher-Nachher-Foto in WordPress erstellen können. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: Vorher-Nachher-Foto mit einem kostenlosen Plugin anzeigen (einfach)
• Methode 2: Zeigen Sie ein Vorher-Nachher-Foto mit SeedProd an (anpassbarer)
• Frequently Asked Questions About Before and After Sliders

Methode 1: Vorher-Nachher-Foto mit einem kostenlosen Plugin anzeigen (einfach)

Der einfachste Weg, Vorher-Nachher-Fotos zu erstellen, ist die Verwendung des Plugins Ultimate Before After Image Slider & Gallery – BEAF.

Das BEAF-Plugin ermöglicht es Ihnen, horizontale und vertikale Slider zu erstellen und das Bild mit verschiedenen Beschriftungen und Farben anzupassen.

Wichtiger Tipp: Damit der Schieberegler-Effekt perfekt funktioniert, müssen Ihre „Vorher“- und „Nachher“-Bilder exakt die gleiche Größe haben (gleiche Breite und Höhe in Pixel). Dies stellt sicher, dass sie korrekt ausgerichtet sind. Sie können jedes Bildbearbeitungswerkzeug verwenden, um Ihre Bilder vor dem Hochladen zuzuschneiden oder die Größe zu ändern.

Das erste, was Sie tun müssen, ist das Plugin Ultimate Before After Image Slider & Gallery (BEAF) zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie in Ihrem Dashboard zu Vorher-Nachher-Schieberegler » Neu hinzufügen.

Geben Sie zunächst einen Namen für den Bildschieberegler ein. Dies dient nur zu Ihrer Information, sodass Sie alles verwenden können, was Ihnen hilft, ihn zu identifizieren.

Wenn Sie damit fertig sind, können Sie das „Vorher“-Bild hinzufügen, indem Sie zum Abschnitt „Vorheriges Bild“ scrollen.

Klicken Sie hier auf „Hochladen“ und wählen Sie dann entweder ein Bild aus der WordPress-Mediathek oder laden Sie ein neues Bild von Ihrem Computer hoch.

Damit Suchmaschinen dieses Bild verstehen und es den richtigen Personen anzeigen, ist es eine gute Idee, einen alternativen Bildtext hinzuzufügen. Geben Sie dazu einfach in das Feld „Bild-Alt“ ein.

Für weitere Informationen über Alt-Text lesen Sie bitte unseren Anfängerleitfaden für Image-SEO.

Wenn Sie damit fertig sind, scrollen Sie zum Abschnitt „Nachher-Bild“.

Sie können nun das „Nachher“-Bild hinzufügen, indem Sie den gleichen oben beschriebenen Prozess befolgen. Vergessen Sie nicht, auch diesem Bild einen Alternativtext hinzuzufügen, da dies für WordPress SEO wichtig ist.

Sie können auch Text unter dem Bild anzeigen, indem Sie einen Titel und eine Beschreibung hinzufügen (wie eine Bildunterschrift).

Zum Beispiel könnten Sie Besucher ermutigen, mit dem Schieberegler zu interagieren. Dies ist eine großartige Möglichkeit, Besucher anzuleiten, die nicht wissen, wie interaktive Schieberegler funktionieren.

Dies ist auch eine einfache Möglichkeit, dem Bild etwas Kontext zu geben.

Um Text hinzuzufügen, tippen Sie einfach in die Felder 'Slider-Titel' oder 'Slider-Beschreibung'.

Sie können auch eine 'Weiterlesen'-URL hinzufügen, die zu jedem Beitrag oder jeder Seite auf Ihrer WordPress-Website oder sogar zu einer externen Website verlinken kann. Zum Beispiel könnten Sie Besucher auf eine Seite senden, auf der sie das im Schiebereglerbild dargestellte Produkt kaufen können.

Dieser Link wird unter dem Vorher/Nachher-Bild und auch unter jedem Schieberegler-Titel oder jeder Beschreibung angezeigt, die Sie verwenden.

Wenn Sie auf eine andere Website verlinken, empfehlen wir die Auswahl von „Neuer Tab“, damit Sie keine Besucher von Ihrem WordPress-Blog weg senden.

Wenn Sie dies getan haben, können Sie im Abschnitt „Ausrichtungsstil“ durch Klicken auf eine der Miniaturansichten wählen, ob Sie einen vertikalen oder horizontalen Schieberegler erstellen möchten.

Scrollen Sie danach zum oberen Bildschirmrand und klicken Sie auf 'Optionen'.

Hier sehen Sie, dass der 'Standardversatz' auf 0,5 eingestellt ist. Das bedeutet, dass der Besucher beim ersten Laden der Seite die Hälfte des 'Vorher'-Bildes sieht.

Wenn Sie mehr vom Vorher-Bild anzeigen möchten, geben Sie eine größere Zahl ein, z. B. 0,6, 0,7 oder höher.

Wenn Sie das gesamte Vorher-Bild anzeigen möchten, geben Sie 1 ein.

Dies platziert den Slider oben oder rechts vom Vorher-Bild, wie Sie im folgenden Bild sehen können.

Standardmäßig zeigt das Plugin die Beschriftungen „Vorher“ und „Nachher“ an, wenn der Besucher mit der Maus über das Bild fährt.

Möglicherweise möchten Sie diese Beschriftungen durch etwas Aussagekräftigeres ersetzen.

Tun Sie dies, indem Sie einfach in die Felder "Bezeichnung vorher" und "Bezeichnung nachher" eingeben.

Standardmäßig verschieben Besucher den Schieberegler per Drag & Drop. Manche Leute finden das schwierig, besonders wenn sie Mobilitätsprobleme haben oder kleinere Geräte wie Smartphones oder Tablets verwenden.

Vor diesem Hintergrund möchten Sie vielleicht ändern, wie Besucher den Schieberegler bewegen.

Wenn Sie die Schaltfläche „Ein“ neben „Schieberegler bei Mauszeigerbewegung verschieben?“ aktivieren, können Besucher den Schieberegler einfach durch Bewegen der Maus über das Bild verschieben.

Wenn Sie die Schaltfläche „Klicken zum Verschieben“ aktivieren, können Besucher überall auf das Bild klicken, um den Schieberegler zu diesem Punkt zu verschieben.

Während diese Optionen die Barrierefreiheit verbessern können, ändern sie das Standardverhalten des Sliders. Wir empfehlen, sie zu testen, um zu sehen, was sich für die Besucher Ihrer Website am intuitivsten anfühlt.

Klicken Sie als Nächstes auf die Registerkarte „Stil“.

Hier können Sie die Farben für die verschiedenen Beschriftungen, Hintergründe, Überschriften, Beschreibungen und die Schaltfläche „Mehr lesen“ ändern. Dies kann dazu beitragen, dass das Vorher/Nachher-Bild mit Ihrem WordPress-Theme harmoniert oder sich sogar vom Rest des Designs Ihrer Website abhebt.

Sie können auch die Schriftgröße und die Textausrichtung ändern.

Wenn Sie mit der Einrichtung des Schiebereglers zufrieden sind, klicken Sie auf die Schaltfläche "Veröffentlichen".

Dies erstellt einen Shortcode, mit dem Sie das Vorher-/Nachher-Bild und den Schieberegler zu jeder Seite, jedem Beitrag oder jedem Widget-fähigen Bereich hinzufügen können.

Weitere Informationen zum Platzieren des Shortcodes finden Sie in unserem Leitfaden zum Hinzufügen eines Shortcodes in WordPress.

Nachdem Sie den Shortcode zu Ihrer Website hinzugefügt haben, klicken Sie einfach auf die Schaltfläche "Veröffentlichen" oder "Aktualisieren", um das Vorher/Nachher-Bild und den Schiebereffekt live zu schalten.

Methode 2: Zeigen Sie ein Vorher-Nachher-Foto mit SeedProd an (anpassbarer)

Wenn Sie nur einen einfachen Schieberegler zu einem bestehenden Beitrag hinzufügen möchten, ist das kostenlose Plugin in Methode 1 eine großartige Option. Wenn Sie jedoch eine Landingpage mit hoher Konversionsrate, eine Verkaufsseite oder sogar ein benutzerdefiniertes Theme mit einem Vorher-Nachher-Vergleich erstellen möchten, empfehlen wir die Verwendung von SeedProd. Es ist ein leistungsstarker Website-Builder, der Ihnen die vollständige Designkontrolle gibt.

Hier bei WPBeginner verwenden wir SeedProd ausgiebig, um benutzerdefinierte Websites für viele unserer Partner-Marken innerhalb der Awesome Motive-Familie zu gestalten. Seine Drag-and-Drop-Oberfläche gibt uns die Flexibilität, schnell hochkonvertierende Seiten zu erstellen.

SeedProd ist der beste Drag-and-Drop WordPress Page Builder. Er wird mit über 300 fertigen Vorlagen geliefert, die Sie verwenden können, um hochkonvertierende Landing Pages, Verkaufsdesigns, benutzerdefinierte WordPress-Themes und mehr zu erstellen.

Es gibt auch einen fertigen „Before After Toggle“-Block, mit dem Sie schöne Vorher-Nachher-Bilder erstellen können, mit denen Ihre Benutzer interagieren können.

Ziehen Sie den Block einfach aus dem linken Menü und legen Sie ihn auf jedes Seitenlayout, an dem Sie gerade arbeiten, einschließlich Verkaufsseiten.

Wenn Sie WooCommerce verwenden, um Ihre Produkte zu verkaufen, dann integriert sich SeedProd mit WooCommerce und enthält sogar spezielle E-Commerce-Blöcke. Dies ist perfekt, wenn Sie Vorher-Nachher-Bilder verwenden möchten, um Ihre WooCommerce-Produkte zu bewerben.

Informationen zur Verwendung von SeedProd finden Sie in unserem Leitfaden zum Erstellen einer benutzerdefinierten Seite in WordPress.

Nach dem Erstellen einer Seite ist es einfach, ein Vorher-Nachher-Bild in Ihr Design einzufügen. Suchen Sie im SeedProd-Seiteneditor einfach nach dem Block „Vorher-Nachher-Umschalter“.

Sie können diesen Block dann per Drag & Drop überall in Ihrem Design platzieren, um ihn zum Seitenlayout hinzuzufügen.

Wenn Sie damit fertig sind, klicken Sie einfach, um den Block „Vorher-Nachher-Umschalter“ auszuwählen. Das linke Menü wird nun aktualisiert und zeigt alle Einstellungen an, die Sie zum Erstellen Ihres Vorher-Nachher-Bildes verwenden können.

Zuerst müssen Sie das Bild hinzufügen, das Sie als Vorher-Bild verwenden möchten. Klicken Sie unter „Vorheriges Bild“ entweder auf „Eigenes Bild verwenden“ oder auf „Stock-Bild verwenden“ und wählen Sie das Bild aus, das Sie verwenden möchten.

Standardmäßig zeigt SeedProd über diesem Bild die Beschriftung „Before“ an. Sie können dies jedoch in etwas Aussagekräftigeres ändern, indem Sie es in das Feld „Before Label“ eingeben.

Wenn Sie damit fertig sind, scrollen Sie zum Abschnitt „Nachher-Bild“.

Sie können nun ein Bild hinzufügen und die Standardbeschriftung 'Nachher' anpassen, indem Sie den gleichen Prozess wie oben beschrieben befolgen.

SeedProd kann einen vertikalen oder horizontalen Schiebeeffekt hinzufügen.

Um zwischen diesen beiden Stilen zu wechseln, scrollen Sie zum Abschnitt 'Schieberegler-Ausrichtung' und klicken Sie dann auf 'Vertikal' oder 'Horizontal'.

Standardmäßig wechseln die Besucher zwischen den Vorher- und Nachher-Bildern, indem sie den Schieberegler ziehen.

Einige Benutzer finden es jedoch einfacher, den Slider zu bewegen, indem sie die Maus über das Bild bewegen. Dies gilt insbesondere für größere Bilder, bei denen der Besucher den Slider weiter ziehen müsste.

Um diese Einstellung auszuprobieren, aktivieren Sie „Bewegen beim Überfahren“ im Menü auf der linken Seite.

Als Nächstes möchten Sie vielleicht eine farbige Überlagerung zu den Vorher- und Nachher-Bildern hinzufügen. Dies kann helfen, das Bild mit dem Rest des Farbschemas zu verschmelzen oder sich vom Hintergrund abzuheben.

Sie können die farbige Überlagerung sogar halbtransparent machen, um einen subtileren Effekt zu erzielen.

Um verschiedene Farben auszuprobieren, klicken Sie auf den Abschnitt „Overlay Color“ und nehmen Sie dann Ihre Änderungen im erscheinenden Popup vor.

Sobald dies erledigt ist, können Sie den Slider-Griff anpassen, indem Sie auf den Abschnitt „Comparison Handle“ klicken, um ihn zu erweitern.

Standardmäßig zeigt SeedProd die Hälfte des „Vorher“-Bildes und die Hälfte des „Nachher“-Bildes an. Um dies zu ändern, ziehen Sie einfach den Schieberegler „Handle Initial Offset“.

Um weniger vom Vorher-Bild anzuzeigen, ziehen Sie den Schieberegler nach links, sodass eine niedrigere Zahl angezeigt wird. Um mehr vom Vorher-Bild anzuzeigen, ziehen Sie den Schieberegler nach rechts, wodurch sich die Zahl erhöht.

Als Nächstes können Sie die Farbe des Schiebereglers mit den Einstellungen „Griff-Farbe“ ändern.

Sie können den Griff auch dicker oder dünner machen, indem Sie den Schieberegler "Griffstärke" verwenden.

Auf diese Weise können Sie den Griff hervorheben oder einen subtileren Effekt erzielen.

Wenn Sie mit dem Griff zufrieden sind, möchten Sie vielleicht den Kreis ändern. Sie können den Kreis mit den Einstellungen 'Kreisbreite' größer oder kleiner machen und den 'Kreisradius' ändern, um scharfe oder abgerundete Ecken zu erzeugen.

Während Sie Änderungen vornehmen, wird die Live-Vorschau automatisch aktualisiert, sodass Sie verschiedene Einstellungen ausprobieren können, um zu sehen, was am besten aussieht.

Wenn Sie mit dem Kreis zufrieden sind, möchten Sie vielleicht die Größe der Dreiecke innerhalb dieses Kreises ändern. Wenn Sie beispielsweise den Kreis größer gemacht haben, möchten Sie vielleicht auch die Größe der Dreiecke erhöhen.

Um diese Änderung vorzunehmen, ziehen Sie den Schieberegler „Dreieckgröße“, bis Sie mit dem Ergebnis zufrieden sind.

Sobald dies erledigt ist, können Sie weitere Blöcke hinzufügen und den Inhalt Ihrer SeedProd-Seite anpassen.

Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie einfach auf den Pfeil neben der Schaltfläche „Speichern“ und wählen Sie dann „Veröffentlichen“.

Wenn Sie nun Ihre Website besuchen, sehen Sie das Design Ihrer Seite mit den Vorher-Nachher-Bildern live.

Häufig gestellte Fragen zu Vorher-Nachher-Schiebereglern

Wir haben einige der häufigsten Fragen unserer Leser zum Erstellen von Vorher-Nachher-Foto-Schiebereglern in WordPress beantwortet.

Sind die Plugins für Vorher-Nachher-Fotos kostenlos?

Das im Methode 1 vorgestellte Plugin „The Ultimate Before After Image Slider & Gallery“ ist komplett kostenlos. SeedProd bietet ebenfalls eine kostenlose Version an, aber Sie benötigen einen ihrer Premium-Pläne, um auf den Block „Vorher-Nachher-Umschalter“ zugreifen zu können.

Welche Methode ist besser für die Erstellung eines Vorher-Nachher-Schiebereglers?

Die beste Methode hängt von Ihren Bedürfnissen ab. Für das schnelle Hinzufügen eines einfachen Schiebereglers zu einem Blogbeitrag ist das kostenlose Plugin eine ausgezeichnete Wahl. Wenn Sie mehr Designkontrolle wünschen oder eine benutzerdefinierte Landingpage erstellen, empfehlen wir SeedProd aufgrund seiner Flexibilität.

Kann ich einen Schieberegler mit mehr als zwei Bildern erstellen?

Die Werkzeuge in diesem Leitfaden sind speziell für den Vergleich zweier Bilder konzipiert. Wenn Sie mehrere Bilder in einer Sequenz anzeigen müssen, sollten Sie ein spezielles WordPress-Slider-Plugin wie Soliloquy verwenden.

Verlangsamt ein Vorher-Nachher-Schieberegler meine Website?

Wie bei jedem Bild können große Dateien die Ladezeit Ihrer Website beeinträchtigen. Um dies zu verhindern, empfehlen wir immer, Ihre Bilder für das Web zu optimieren, bevor Sie sie in WordPress hochladen.

Mehr erfahren WordPress Bild-Tipps und Tricks

Möchten Sie weitere Tipps und Tricks zur Anpassung Ihrer Bilder in WordPress? Sehen Sie sich diese Anleitungen an:

• So fügen Sie Instagram-ähnliche Fotofilter in WordPress hinzu (Schritt für Schritt)
• So erstellen Sie Flipbox-Overlays und Hover-Effekte in WordPress
• Bilder in WordPress automatisch mit Wasserzeichen versehen
• KI zur Bilderzeugung in WordPress verwenden
• So fügen Sie animierte GIFs in WordPress hinzu (Der RICHTIGE Weg)
• So erstellen Sie einfach einen responsiven Slider in WordPress

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein Vorher-Nachher-Foto mit einem Schiebereffekt zu Ihrer WordPress-Website hinzufügen. Sie können auch unseren Leitfaden durchgehen, wie Sie Kategorien und Tags zur WordPress-Mediathek hinzufügen und unsere Expertenauswahl der besten WordPress-Plugins für Beitragsbilder.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.