Übersichten übersichtlich darstellen
Kacheleffekte bzw. Mauerwerke eignen sich insbesondere dann, wenn Inhalte wie Anreißer, aber auch Bilder beispielsweise auf Übersichtsseiten unterschiedlich hoch bzw. breit sind. Diese funktionieren, indem Elemente basierend auf dem verfügbaren vertikalen Raum in optimaler Position platziert werden.
Einer meiner Favoriten unter den gängigen sogenannten Grid-Layouts ist Masonry, das sich besonders gut in WordPress einbinden lässt. Im engeren Sinne heißt das, dass kein Plugin benötigt wird, da die entsprechenden Bibliotheken bereits mitgeliefert werden. Diese müssen nur aktiviert und über ein eigenes Skript via jQuery initialisiert werden. Die Größenanpassung und Gestaltung von Elementen erfolgt über unser eigenes Stylesheet. Nicht geladene Elemente bzw. Bilder können das Layout stören und dazu führen, dass sich einzelne Bausteine des Mauerwerks überlappen. Das Skript ImagesLoaded behebt dieses Problem.
Masonry in der Praxis
Im Fallbeispiel lese ich meinen eigenen Feed zu Frequently Asked Questions rund um die häufigsten Fragen meiner Kund:innen aus und stelle diesen als Mauerwerk dar. Besonders gut sieht man den Effekt bei Änderung der Größe des Browserfensters. Inspirationen für eine Kombination mit Galerie und Bildbetrachter finden Sie hier.