Elementor-Anleitung: Before- und After-Fotos gestalten

Wir setzen unsere Tutorial-Serie zu Elementor und Elementor-Addons fort. Diesmal erfährst du, wie du den Bildvergleich auf deiner Website einrichten kannst.

Vergleichsfotos bzw. Nachher-Vorher-Bilder sagen mehr als tausend Worte. Sie sind einfach unerlässlich, wenn du das Endergebnis der Anfangsphase eines Projektes gegenüberstellen willst. Derartige Bilder wirken beeindruckend und führen dein Können bestens vor Augen. Sie erweisen sich als besonders effektiv im Bereich Innenraum- und Garten-Architektur, Fotodesign, Sport und Diät, Makeup u.a. In diesem Elementor-Tutorial erfährst du, wie du ein Widget zum Bildvergleich mit dem JetElements-Plugin zu deiner Website hinzufügst.

Unter Elementor-Addons weist dieses Plugin die vielseitigsten Funktionen auf. Es verfügt über eine Fülle von hochwertigen Inhaltselementen, die bei der Erstellung von Websites zum Einsatz kommen. Wenn dieses Plugin auf deiner WordPress-Website installiert ist, dann öffne den Elementor Page-Builder und lies diese Anleitung weiter.

1. Gib in das Suchfeld das Image Comparison-Widget ein.

2. Dann klicke auf das Widget und verschiebe es in einen neuen Abschnitt.

3. Links im Sidebar-Menü findest du den Block mit Einstellungen. Da kannst hier die Anzahl der zu zeigenden Folien ändern.

4. Setzt du die Hover-Pause auf “yes”, wird die Folie wird beim Überfahren mit der Maus anhalten.

5. Du kannst auch die Autoplay-Funktion aktivieren und deren Geschwindigkeit einstellen.

6. Setze Infinite Loop auf “yes”, wenn du willst, dass deine Folien endlos angezeigt werden.

7. Beim Slide- oder Fade-Effekt definierst du den Übergang von einer Folie zur anderen.

8. Weiter lassen sich Navigationspunkte und -Pfeile ein- bzw. ausschalten. Diese zwei Optionen machen die Navigation intuitiver und benutzerfreundlicher.

9. Jetzt übergehen wir zum Block “Items” und fügen Bilder hinzu.

10. Standardmäßig heißen Labels  "Vorher" und "Nachher". Diese lassen sich selbstredend nach deinem Belieben ändern.

11. Um Bilder hinzuzufügen, sollst du auf  “Choose Your Image” klicken und ein Bild von Insert Media hochladen.

12. Nachdem du Bilder hochgeladen hast, kannst du ihr Verhältnis ändern, indem du einfach den Folientrenner in der Mitte anklickst und diesen zur gewünschten Seite ziehst.

13. Nun sind Stil-Einstellungen an der Reihe.

14. Geh zum zweiten Tab, um das Aussehen der Labels zu ändern.

15. Hier lassen sich Farben von Before- und After-Labels, horizontale und vertikale Ausrichtung sowie der Typ des Hintergrundes ändern.

16. Im nächsten Schritt legst du Handle-Einstellungen fest. Du kannst Breite, Höhe, Hintergrundfarbe sowie Typ wählen.

17. Im diesem Block lassen sich verschiedene Parameter (unter anderem die Startposition) des Trenners zwischen diesen Bildern editieren. 

18. In den letzten beiden Blöcken gibt es Stil-Einstellungen für Pfeile und Punkte, mit denen du den Slider steuern kannst. Diese Einstellungen sollten dir bekannt sein, wenn du jemals einen Slider mit JetElements erstellt hast.

So einfach ist es, den Bildvergleich mit Hilfe des JetElements-Plugins zu erstellen. Machst du das zum zweiten Mal, geht alles viel schneller.

Hier geht es zum Originaltext auf Englisch bei MonsterPost.