So erstellst du Grid-, Masonry- oder Justify-Layouts mit JetElements

Diese kleine Anleitung zeigt dir, wie du schöne Galerien für deine WordPress-Website mit wenigen Klicks erstellst. Nur keine Angst! Programmieren musst du nicht.

Wenn Bilder schön und scharf sind, halten es viele Nutzer für überflüssig, das Aussehen der Galerie zu verbessern. Mit tollen Fotos könne angeblich nichts die Optik einer Website beeinträchtigen. Wenn du beim Lesen dieser Zeilen zustimmend genickt hast, gibt es eine schlechte Nachricht für dich: Ein unschönes Galerie-Layout kann sich tatsächlich negativ auf das Erscheinungsbild deiner Website und somit auf die ersten Eindrücke deiner Besucher  auswirken. Um derlei Probleme zu vermeiden, solltest du dir genau überlegen, wie deine Galerie aussehen wird. Bild-Layouts sind mit Kleidern vergleichbar -  bei richtiger Auswahl sie sind fähig, eine ganz gewöhnliche Frau wie eine richtige Star aussehen zu lassen. 

Der Elementor Page-Builder ist das beste Tool, das es ermöglicht, nicht nur eine Bildergalerie mit einem Grid-, Masonry- oder Justify-Layout zu erstellen, sondern kannst du auch sie schnell editieren und wählen, was für dein Design besser passt. Wenn du bisher mit Elementor noch nicht gearbeitet hast, behandeln wir in diesem Blogbeitrag die neueste Version des Seitenerstellers. 

Kurz gefasst, Elementor ist eine riesige Toolbox, mit der du visuelle Darstellung deiner Website in Echtzeit anpassen und diese Änderungen sofort sehen kannst. Das JetElements-Plugin hilft dir, ein Grid-, Masonry- oder Justify-Layout zu erstellen. Dieses Addon, das speziell für Elementor entwickelt wurde, erweitert das Anpassungsmenü um eine Vielzahl an Werkzeugen. 

Also, lass uns an Bild-Layouts näher ran gehen. Das Widget “Images Layout” im JetElements-Plugin verfügt über eine intuitive Benutzeroberfläche, sodass du keine Schwierigkeiten in der Bedienung haben wirst. Jetzt zeigen wir dir Schritt  für Schritt, wie es funktioniert.

Zuerst gehst du zum WP-Admin-Dashboard, öffnest den Tab “Seiten” und auf der Seite, wo du ein Bild-Layout umsetzen willst, klickst du auf den Button “Mit Elementor bearbeiten”. Dann wählst du im Elementor-Menü den JetElements-Abschnitt aus und findest das Widget "Images Layout".

Zieh es in das zu bearbeitende Feld und leg es ab (ja, so einfach ist das). Dieses Element sieht folgenderweise aus:

Im Tab “Content” des Bearbeitungsmenüs gibt es zwei Abschnitte: "Settings” (Einstellungen) und "Items” (Elemente). Im ersten Abschnitt kann die Anzahl der angezeigten Spalten angegeben werden. Hier änderst du auch den Layouttyp. Im Bereich "Items” lassen sich Bilder hinzufügen.

Klick auf das Element und füge ein Bild, Icon, einen Titel, eine Beschreibung und einen Link hinzu. Alle Änderungen, die du am Layout vorgenommen hast, kannst du live beobachten.

Wenn du mit dem Hinzufügen von Bildern fertig bist, ist es an der Zeit, ein wenig mit Layouts zu spielen. So sieht das Grid-Layout für Bilder aus.

Alle Bilder haben die gleiche Größe und sind in akkuraten Zeilen angeordnet. Unter Typen gilt das Grid-Layout besonders übersichtlich und sauber. 

Im Vergleich zu Grid wirkt Masonry weniger strikt. Die Bilder haben die gleiche Breite, und die Höhe wird proportional skaliert.

Justify ist dem Masonry-Layout ähnlich, aber umgekehrt: Bei gleicher Höhe werden Bilder auf die ursprüngliche Größe proportional skaliert.

Wenn du die beschriebenen Schritte in Aktion sehen möchtest, dann solltest du einen Blick auf dieses Video werfen. Wir zeigen denselben Prozess für das Grid-,  Masonry-  und Justify-Layout detailliert, so dass du alles leicht nachmachen kannst.

Wir hoffen, diese Anleitung hilft dir,  mit dem JetElements-Plugin deine Layouts ansprechend zu gestalten. Solltest du weitere Fragen über das Addon haben, poste sie einfach unten in die Kommentare. Wir freuen uns sehr über dein Feedback!

Dieses Tutorial stammt von Elizabeth Thistle und wurde erstmals bei MonsterPost veröffentlicht. Wenn du den Originaltext auf Englisch lesen möchtest,  findest du den Beitrag hier.