Vorher und Nachher Foto in WordPress zeigen (mit Folieneffekt)

Möchten Sie die Vorher- und Nachher-Fotos auf Ihrer Website zeigen? Ein Vorher- und Nachher-Foto kann nützlich sein, um zwei identische Bilder mit geringfügigen Unterschieden nebeneinander anzuzeigen. In diesem Artikel erfahren Sie, wie Sie ein Foto vor und nach einem Foto in WordPress anzeigen können.

Wie funktioniert der Vorher- und Nachher-Fotoeffekt??

Normalerweise verwenden Leute Photoshop, um ein Vorher- und Nachherbild zu erstellen. Es ist ein einzelnes Foto, das Vorher / Nachher-Effekte zeigt, und Sie können es als statisches Bild auf Ihrer WordPress-Website hinzufügen.

Ein funktionaler Foto-Schieberegler ist eine interaktive Möglichkeit, zwei verschiedene Versionen eines ähnlichen Bildes in voller Größe anzuzeigen. Sie können den Schieberegler verschieben, um beide Bilder nebeneinander zu vergleichen.

Werfen wir einen Blick darauf, wie man in WordPress vor und nach dem Foto einfach zeigt.

Videoanleitung

Wenn Sie das Video-Tutorial nicht sehen möchten, können Sie die Textversion weiter unten lesen:

Anzeigen des Vorher- und Nachher-Fotos in WordPress

Zuerst müssen Sie das Twenty20 Image Before-After-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie eine Seite / einen Beitrag in Ihrem WordPress-Admin-Bereich erstellen oder bearbeiten, auf dem Sie das Vorher- und Nachher-Bild anzeigen möchten. Klicken Sie nun auf die Addiere Twenty20 Schaltfläche über dem Texteditor.

Es öffnet sich die WordPress-Medienbibliothek in einem Popup. Hier müssen Sie zwei Bilder für den Schieberegler Vorher und Nachher auswählen.

Sobald die Bilder ausgewählt sind, klicken Sie auf Einfügen Taste.

Als Nächstes werden die Textfelder angezeigt, um Inhalte vor und nach dem Foto hinzuzufügen. Sie können auch Breite für den Schieberegler, den Versatzwert, die Richtung des Schiebereglers usw. hinzufügen.

Danach klicken Sie auf die Shortcode einfügen Schaltfläche, um das Vorher- und Nachher-Foto in Ihre WordPress-Seite einzufügen.

Sie können das Twenty20-Widget auch verwenden, um das Vorher- und Nachher-Foto in Ihrer WordPress-Seitenleiste anzuzeigen. Einfach auf gehen Aussehen »Widgets Abschnitt in Ihrem WordPress-Admin, und ziehen Sie das Twenty20 Slider-Widget in den Sidebar-Widgetbereich.

Das Widget "Twenty20 Slider" hat ähnliche Einstellungen für das Vorher- und Nachher-Foto, wie wir es oben in diesem Handbuch beschrieben haben. Sie können die 2 Bilder nacheinander in den Widget-Einstellungen auswählen, um den Schieberegler vor und nach dem Foto zu erstellen.

Jetzt können Sie Ihre Website besuchen, um das Vorher- und Nachher-Foto in Aktion zu sehen.

Wenn die Benutzer den Griff auf jedes Bild verschieben, wird das andere Bild sichtbar. Benutzer können den Schieberegler ganz nach rechts oder links bewegen, um das vollständige Bild vor und nach dem Bild zu sehen. Wenn die Benutzer schieben, werden die Vorher- und Nachher-Etiketten automatisch ausgeblendet.

Dieses Plugin eignet sich hervorragend für die beliebten WordPress-Seitenersteller wie Beaver Builder und Elementor, um schnell und unkompliziert Fotos auf Ihren Websites anzuzeigen, ohne Shortcodes zu verwenden.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, wie Sie vor und nach dem Foto in WordPress zeigen. Möglicherweise möchten Sie auch unsere Anleitung zum Vergrößern des Zooms für Bilder in WordPress anzeigen.

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