So zeigen Sie Vorher-Nachher-Bilder mit dem Slider-Effekt in WordPress an

Nehmen wir an, Sie sind ein Fitness-Blogger und möchten Ihr Publikum inspirieren, indem Sie die Vorher- und Nachher-Bilder Ihrer Körpertransformation teilen. Anstatt die Bilder nur nebeneinander zu platzieren, wäre es ziemlich cool, wenn Sie einen Vorher-Nachher-Bildschieberegler verwenden können, um den Unterschied anzuzeigen.

Warte ab! Was ist ein Vorher-Nachher-Bildschieberegler?

Es ist ein Bildschieberegler, der ein Bild übereinander stapelt und einen interaktiven Schieberegler verwendet, um die Bilder anzuzeigen. Wenn sich der Schieberegler horizontal bewegt, wird das erste Bild angezeigt, wenn der Schieberegler ganz nach rechts bewegt wird, und das zweite wird sichtbar, wenn er nach links bewegt wird.

Solche Schieberegler sind praktisch, um zwei ähnliche Bilder zu vergleichen. Daher kann es für eine Reihe von Fachleuten wie Fotografen, Kosmetikerinnen, Designer, Ärzte und Zahnärzte nützlich sein.

Wenn Sie ein WordPress-Benutzer sind und sich fragen, wie Sie es auf Ihrer Website verwenden können, dann sind Sie hier richtig. In diesem Artikel werde ich teilen, wie Sie Vorher- und Nachher-Bilder mit dem Slider-Effekt auf Ihrer Website hinzufügen können.

Lassen Sie uns also ohne weiteres loslegen.

Abonnieren Sie unseren Youtube-Kanal

So fügen Sie einen Vorher-Nachher-Bildschieberegler hinzu

Es gibt viele kostenlose und Premium-Plugins, mit denen Sie den Vorher-Nachher-Bildschieberegler auf einer Webseite hinzufügen können.

In diesem Artikel werden wir jedoch das Twenty20 Image Before After Plugin verwenden. Später werde ich auch einige beliebte kostenlose und Premium-Alternativen erwähnen.

Installieren Sie das Twenty20 Image Vorher Nachher Plugin

Twenty20 ist ein kostenloses Plugin und ist im WordPress-Plugin-Repository verfügbar. Es ermöglicht Ihnen, Vorher-Nachher-Bildschieberegler in Ihren Beiträgen, Seiten und der Seitenleiste hinzuzufügen. Es unterstützt auch beliebte Seitenersteller wie Elementor und WPBakery.

Um dieses Plugin zu installieren, gehen Sie zu Plugins -> Neu hinzufügen und suchen Sie nach Twenty20 Image Before-After. Sobald Sie das Plugin gefunden haben, installieren und aktivieren Sie es einfach:

Fügen Sie Ihrem Beitrag oder Ihrer Seite ein Vorher-Nachher-Bild hinzu

Das Twenty20-Plugin enthält keine Einstellungsseite. So können Sie nach der Installation des Plugins mit der Drecksarbeit beginnen.

Jetzt, nach dem WordPress 5.0-Update, verwenden Sie möglicherweise entweder den Classic- oder den Gutenberg-Editor. Lassen Sie mich Ihnen also zeigen, wie dieses Plugin in beiden Editoren funktioniert.

Gutenberg-Redakteur

Das Twenty20-Plugin hat bisher keinen Block, aber Sie können seine Shortcode-Funktionalität verwenden und den Code in den Shortcode-Block einfügen.

Schauen wir uns ein Beispiel für den Shortcode an:

[twenty20 img1=”3442″ img2=”3442″ direction=”horizontal” offset=”0.4″ align=”none” width=”100%” before=”before” after=”after” hover=”false”]

Lassen Sie mich jeden der Parameter erklären:

• img1 – Hier müssen Sie die Bild-ID (nicht die Bild-URL) des ersten Bildes hinzufügen.
• img2 – Fügen Sie die ID (und nicht die Bild-URL) des zweiten Bildes hinzu.
• Richtung – Hier können Sie entscheiden, ob Sie den Schieberegler in horizontaler oder vertikaler Richtung haben möchten. Der Wert ist also entweder horizontal oder vertikal.
• offset – Der Offsetwert sollte zwischen 0,1 und 1 liegen.
• ausrichten – Bestimmt die Ausrichtung des Vorher-Nachher-Bildes. Der Wert kann keiner, links oder rechts sein.
• width – Die Breite des Bildes kann in Prozent oder Pixel angegeben werden.
• vor – Hier können Sie die Beschriftung des Vorher-Bildes hinzufügen.
• after – Fügen Sie die Beschriftung des Nachher-Bilds hinzu.
• hover – Dieser Parameter entscheidet, ob Sie den Schieberegler bei Mausbewegungen bewegen möchten. Es akzeptiert einen wahren oder falschen Wert.

Sie wissen nicht, wie Sie die ID eines Bildes finden? Gehen Sie in der linken Seitenleiste Ihres WordPress-Dashboards zu Medien -> Bibliothek und klicken Sie auf das Bild. Überprüfen Sie nun die Adressleiste Ihres Webbrowsers:

Im obigen Beispiel sehen Sie item = 50 in der URL. 50 ist also die ID dieses bestimmten Bildes.

Okay! Nachdem Sie nun wissen, wie Sie den Twenty20-Shortcode verwenden, erstellen (oder bearbeiten) Sie einen Beitrag oder eine Seite, auf der Sie den Vorher-Nachher-Bildschieberegler hinzufügen möchten. Fügen Sie dann einen neuen Block hinzu und suchen Sie nach dem Shortcode-Widget:

Kopieren Sie den Code, den ich im obigen Beispiel verwendet habe, fügen Sie ihn in das Shortcode-Feld ein und passen Sie ihn Ihren Anforderungen an:

Das ist es. Sie können jetzt den Beitrag (oder die Seite) in der Vorschau anzeigen und überprüfen, ob er richtig funktioniert oder nicht.

Klassischer Editor

Wenn Sie den Classic Editor verwenden, sehen Sie nach der Installation des Plugins eine neue Schaltfläche Twenty 20 hinzufügen. Klicken Sie auf diese Schaltfläche und ein Popup-Fenster wird geöffnet, in dem Sie aufgefordert werden, zwei Bilder auszuwählen:

Nachdem Sie zwei Bilder ausgewählt und auf Einfügen geklickt haben, öffnet sich ein neues Fenster, in dem Sie nach einigen Details zur Generierung des Shortcodes gefragt werden:

Sobald Sie mit den Einstellungen fertig sind, können Sie auf die Schaltfläche Shortcode einfügen klicken.

Sie können diesen Shortcode auch später ändern – folgen Sie einfach dem Beispiel im Abschnitt Gutenberg-Editor.

Vorher-Nachher-Bild in Ihrer Seitenleiste hinzufügen

Mit dem Twenty20-Plugin können Sie auch Vorher-Nachher-Bilder in die Seitenleiste Ihrer Website einfügen. Es kommt mit einem Widget, das die coole Arbeit für Sie erledigt.

Gehen Sie zu Erscheinungsbild -> Widgets. Suchen Sie nun das Twenty20-Widget und ziehen Sie es in den Seitenleistenbereich. Die Einstellungen dieses Widgets sind ähnlich wie im vorherigen Abschnitt – Sie haben nur zwei zusätzliche Schaltflächen zum Auswählen (oder Hochladen) der Vorher- und Nachher-Bilder.

Wenn Sie fertig sind, speichern Sie die Widget-Einstellungen und überprüfen Sie dann Ihre Website. Einfach, nicht wahr?

Einige alternative Plugins

Während ich das Twenty20-Plugin mag, weil es einfach und kostenlos ist, bevorzugen Sie vielleicht etwas anderes. Daher habe ich beschlossen, einige kostenlose und Premium-Alternativen zu diesem Plugin zu teilen:

1. Vorher-Nachher-Bilder für Divi

Wenn Sie ein Divi-Benutzer sind, ist das Vorher-Nachher-Bilder für das Divi-Plugin das Beste für Ihre Bedürfnisse. Es ist leicht, reaktionsschnell und unterstützt Lazy Loading. Es erstellt ein neues Modul, mit dem Sie Ihrer Website Vorher- und Nachher-Bilder hinzufügen können. Dieses kostenlose Plugin funktioniert mit dem Divi Builder Plugin, Divi Theme und anderen Themes von Elegant Themes.

Preis – Kostenlos | Mehr Informationen

2. Mehrzweck Vorher Nachher Slider

Mehrzweck Vorher Nachher Slider ist ein Touch-and-Swipe-fähiges Premium-Plugin. Es kommt mit einem einfach zu bedienenden Admin-Panel, das Ihnen hilft, jeden Bild-Slider nach Ihren Bedürfnissen zu optimieren und erfordert keine Verwendung von Shortcodes. Sie können unbegrenzt Vorher-Nachher-Bilder erstellen und sie in Beiträgen, Seiten und der Seitenleiste verwenden.

Preis – $18 | Mehr Informationen

3. Smart Vorher Nachher Viewer

Smart Before After Viewer ist ein vollständig reaktionsfähiges und berührungsfreundliches Premium-Plugin. Sie können benutzerdefinierte Etikettentexte zu den Vorher- und Nachher-Bildern hinzufügen. Und Sie können die Position und Farbe der Etiketten problemlos ändern. Mit diesem Plugin können Sie auch mehrere Bilder auf einer einzigen Seite hinzufügen.

Preis – $18 | Mehr Informationen

Endnote

Ein Vorher-Nachher-Bildschieberegler ist eine großartige Möglichkeit, die Unterschiede zwischen zwei identischen Bildern anzuzeigen. Und Sie können solche Schieberegler nach diesem Tutorial auf Ihrer WordPress-Site verwenden.

Haben Sie schon einmal eines der in diesem Artikel erwähnten Plugins verwendet? Oder möchten Sie ein bestimmtes Plugin vorschlagen, das dafür geeignet ist, dasselbe zu erreichen? Lass es uns im Kommentarbereich wissen.

Ausgewähltes Bild über __ / shutterstock.com