{"id":19019,"date":"2019-07-03T14:20:16","date_gmt":"2019-07-03T14:20:16","guid":{"rendered":"https:\/\/www.templatemonster.com\/de\/blog\/?p=19019"},"modified":"2020-03-31T09:16:37","modified_gmt":"2020-03-31T09:16:37","slug":"so-erstellst-du-grid-masonry-oder-justify-layout-fuer-bilder-mit-jetelements","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/so-erstellst-du-grid-masonry-oder-justify-layout-fuer-bilder-mit-jetelements\/","title":{"rendered":"So erstellst du Grid-, Masonry- oder Justify-Layouts mit JetElements"},"content":{"rendered":"

Diese kleine Anleitung zeigt dir, wie du sch\u00f6ne Galerien\u00a0f\u00fcr deine WordPress-Website mit wenigen Klicks erstellst. Nur keine Angst! Programmieren musst du nicht.<\/p>\n

Wenn Bilder sch\u00f6n und scharf sind, halten es viele Nutzer f\u00fcr \u00fcberfl\u00fcssig, das Aussehen der Galerie zu verbessern. Mit tollen Fotos k\u00f6nne angeblich nichts die Optik einer Website beeintr\u00e4chtigen. Wenn du beim Lesen dieser Zeilen zustimmend genickt hast, gibt es eine schlechte Nachricht f\u00fcr dich: Ein unsch\u00f6nes Galerie-Layout kann sich tats\u00e4chlich negativ auf das Erscheinungsbild deiner Website und somit auf die ersten Eindr\u00fccke deiner Besucher\u00a0 auswirken. Um derlei Probleme zu vermeiden, solltest du dir genau \u00fcberlegen, wie deine Galerie aussehen wird. Bild-Layouts sind mit Kleidern vergleichbar -\u00a0 bei richtiger Auswahl sie sind f\u00e4hig, eine ganz gew\u00f6hnliche\u00a0Frau wie eine richtige Star aussehen zu lassen.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Der Elementor Page-Builder ist das beste Tool, das es erm\u00f6glicht, nicht nur eine Bildergalerie mit einem Grid-, Masonry- oder Justify-Layout zu erstellen, sondern kannst du auch sie schnell editieren und w\u00e4hlen, was f\u00fcr dein Design besser passt. Wenn du bisher mit Elementor noch nicht gearbeitet hast, behandeln wir in diesem <\/span>Blogbeitrag <\/span><\/a>die neueste Version des Seitenerstellers.\u00a0<\/span><\/p>\n

Kurz gefasst, Elementor ist eine riesige Toolbox, mit der du visuelle Darstellung deiner Website in Echtzeit anpassen und diese \u00c4nderungen sofort sehen kannst. Das <\/span>JetElements-Plugin<\/span><\/a> hilft dir, ein <\/span>Grid-, Masonry- oder Justify-Layout zu erstellen. Dieses Addon, das speziell f\u00fcr Elementor entwickelt wurde, erweitert das Anpassungsmen\u00fc um eine Vielzahl an Werkzeugen.\u00a0<\/span><\/p>\n

Also, <\/span>lass uns an Bild-Layouts n\u00e4her ran gehen. Das <\/span>Widget \u201cImages Layout\u201d im JetElements-Plugin verf\u00fcgt \u00fcber eine intuitive Benutzeroberfl\u00e4che, sodass du keine Schwierigkeiten in der Bedienung haben wirst. Jetzt zeigen wir dir Schritt\u00a0 f\u00fcr Schritt, wie es funktioniert.<\/span><\/p>\n

Zuerst gehst du zum WP-Admin-Dashboard, \u00f6ffnest den Tab \u201cSeiten\u201d und auf der Seite, wo du ein Bild-Layout umsetzen willst, klickst du auf den Button \u201cMit Elementor bearbeiten\u201d. Dann w\u00e4hlst du im Elementor-Men\u00fc den JetElements-Abschnitt aus und findest das Widget \"Images Layout\".<\/span><\/p>\n

\"\"<\/p>\n

Zieh es in das zu bearbeitende Feld und leg es ab (ja, so einfach ist das). Dieses Element sieht folgenderweise aus:<\/span><\/p>\n

\"\"Im Tab \u201cContent\u201d des Bearbeitungsmen\u00fcs gibt es zwei Abschnitte: \"Settings\u201d (Einstellungen) und \"Items\u201d (Elemente). Im ersten Abschnitt kann die Anzahl der angezeigten Spalten\u00a0angegeben\u00a0werden. Hier \u00e4nderst du auch den Layouttyp. Im Bereich \"Items\u201d lassen sich Bilder hinzuf\u00fcgen.<\/span><\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

Klick auf das Element und f\u00fcge ein Bild, Icon, einen Titel, eine Beschreibung und einen Link hinzu. Alle \u00c4nderungen, die du am Layout vorgenommen hast, kannst du live beobachten.<\/span><\/p>\n

\"\"<\/p>\n

Wenn du mit dem Hinzuf\u00fcgen von Bildern fertig bist, ist es an der Zeit, ein wenig mit Layouts zu spielen. So sieht das Grid-Layout f\u00fcr Bilder aus.<\/span><\/p>\n

\"\"<\/p>\n

Alle Bilder haben die gleiche Gr\u00f6\u00dfe und sind in akkuraten Zeilen angeordnet. Unter Typen gilt das Grid-Layout besonders \u00fcbersichtlich und sauber.\u00a0<\/span><\/p>\n

Im Vergleich zu Grid wirkt Masonry weniger strikt.<\/span> Die Bilder haben die gleiche Breite, und die H\u00f6he wird proportional skaliert.<\/span><\/p>\n

\"\"<\/p>\n

Justify ist dem Masonry-Layout \u00e4hnlich, aber umgekehrt: Bei gleicher H\u00f6he werden Bilder auf die urspr\u00fcngliche Gr\u00f6\u00dfe <\/span>proportional skaliert.<\/span><\/p>\n

\"\"<\/p>\n

Wenn du die beschriebenen Schritte in Aktion sehen m\u00f6chtest, dann solltest du einen Blick auf dieses Video werfen. Wir zeigen denselben Prozess f\u00fcr das Grid-,\u00a0 Masonry-\u00a0 und Justify-Layout detailliert, so dass du alles leicht nachmachen kannst.<\/p>\n