{"id":371,"date":"2022-12-28T16:45:15","date_gmt":"2022-12-28T15:45:15","guid":{"rendered":"https:\/\/www.servicepraxis.com\/plugins\/?page_id=371"},"modified":"2025-08-06T11:48:50","modified_gmt":"2025-08-06T09:48:50","slug":"masonry","status":"publish","type":"page","link":"https:\/\/www.servicepraxis.com\/plugins\/lightbox\/masonry\/","title":{"rendered":"Masonry in WordPress einbinden"},"content":{"rendered":"\n

Kacheleffekte bzw. Mauerwerke eignen sich insbesondere dann, wenn Inhalte wie Anrei\u00dfer, aber auch Bilder beispielsweise auf \u00dcbersichtsseiten unterschiedlich hoch bzw. breit sind. Diese funktionieren, indem Elemente basierend auf dem verf\u00fcgbaren vertikalen Raum in optimaler Position platziert werden.<\/p>\n\n\n\n

Einer meiner Favoriten unter den g\u00e4ngigen sogenannten Grid-Layouts ist Masonry<\/strong>, das sich besonders gut in WordPress<\/strong> einbinden l\u00e4sst. Im engeren Sinne hei\u00dft das, dass kein Plugin<\/strong> ben\u00f6tigt wird, da die entsprechenden Bibliotheken bereits mitgeliefert werden. Diese m\u00fcssen nur aktiviert und \u00fcber ein eigenes Skript via jQuery<\/em> initialisiert werden. <\/p>\n\n\n\n

\n
\"Fallbeispiel<\/a>
Fallbeispiel einer Bildergalerie mit einspaltiger Ausgabe f\u00fcr Mobilger\u00e4te unter 300 Pixel Gr\u00f6\u00dfe<\/figcaption><\/figure>\n\n\n\n
\"Fallbeispiel<\/a>
Fallbeispiel einer Bildergalerie mit zweispaltiger Ausgabe f\u00fcr Mobilger\u00e4te mit einer Gr\u00f6\u00dfe von 300 bis 600 Pixel<\/figcaption><\/figure>\n\n\n\n
\"Fallbeispiel<\/a>
Fallbeispiel einer Bildergalerie mit dreispaltiger Ausgabe f\u00fcr Displays mit einer Gr\u00f6\u00dfe von 600 bis 800 Pixel<\/figcaption><\/figure>\n\n\n\n
\"Fallbeispiel<\/a>
Fallbeispiel einer Bildergalerie mit vierspaltiger Ausgabe f\u00fcr Displays mit einer Gr\u00f6\u00dfe von 800 bis 1024 Pixel<\/figcaption><\/figure>\n\n\n\n
\"Fallbeispiel<\/a>
Fallbeispiel einer Bildergalerie mit f\u00fcnfspaltiger Ausgabe f\u00fcr Notebooks mit einer Gr\u00f6\u00dfe von 1024 bis 1200 Pixel<\/figcaption><\/figure>\n\n\n\n
\"Fallbeispiel<\/a>
Fallbeispiel einer Bildergalerie mit sechspaltiger Ausgabe f\u00fcr Notebooks und Desktops mit einer Gr\u00f6\u00dfe von mindestens 1200 Pixel<\/figcaption><\/figure>\n<\/figure>\n\n\n\n

Die Gr\u00f6\u00dfenanpassung und Gestaltung von Elementen erfolgt \u00fcber unser eigenes Stylesheet<\/em>. Nicht geladene Elemente bzw. Bilder k\u00f6nnen das Layout st\u00f6ren und dazu f\u00fchren, dass sich einzelne Bausteine des Mauerwerks \u00fcberlappen. Das Skript ImagesLoaded<\/em> behebt dieses Problem.<\/p>\n\n\n\n

Masonry in der Praxis<\/strong><\/h3>\n\n\n\n

Im Fallbeispiel lese ich meinen eigenen Feed zu Frequently Asked Questions rund um die h\u00e4ufigsten Fragen meiner Kund:innen aus und stelle diesen als Mauerwerk dar. Besonders gut sieht man den Effekt bei \u00c4nderung der Gr\u00f6\u00dfe des Browserfensters. Inspirationen f\u00fcr eine Kombination mit Galerie und Bildbetrachter finden Sie hier<\/a><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Kacheleffekte bzw. Mauerwerke eignen sich insbesondere dann, wenn Inhalte wie Anrei\u00dfer, aber auch Bilder beispielsweise auf \u00dcbersichtsseiten unterschiedlich hoch bzw. breit sind. Diese funktionieren, indem Elemente basierend auf dem verf\u00fcgbaren vertikalen Raum in optimaler Position platziert werden. Einer meiner Favoriten unter den g\u00e4ngigen sogenannten Grid-Layouts ist Masonry, das sich besonders gut in WordPress einbinden l\u00e4sst. […]<\/p>\n","protected":false},"author":1,"featured_media":370,"parent":342,"menu_order":22,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[7],"class_list":["post-371","page","type-page","status-publish","has-post-thumbnail","hentry","tag-cards-im-webdesign"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/comments?post=371"}],"version-history":[{"count":0,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/371\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/342"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/media\/370"}],"wp:attachment":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/media?parent=371"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/tags?post=371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}