Kompatibilität:

WebSite X5 Evo und Pro

Beim Arbeiten mit Bildsammlungen oder visuellen Inhalten kommt es häufig vor, dass Elemente mit unterschiedlichen Abmessungen verwaltet werden müssen, ohne auf ein übersichtliches und ansprechendes Layout zu verzichten. Alle Bilder in ein starres Raster zu zwingen, ist jedoch nicht immer die beste Lösung und kann das Endergebnis beeinträchtigen.


Das Masonry-Objekt wurde genau für diesen Zweck entwickelt: Es ermöglicht die Erstellung dynamischer Raster, in denen die Elemente automatisch entsprechend dem verfügbaren Platz und ihrer Höhe angeordnet werden, wodurch fließende und visuell ausgewogene Kompositionen entstehen. Einen Eindruck der möglichen Ergebnisse erhalten Sie auf der Seite Vorschau.



Wie das Masonry-Layout funktioniert

Das Masonry-Layout organisiert die Elemente innerhalb der Seite in Spalten und verteilt sie vertikal entsprechend dem verfügbaren Platz. Im Gegensatz zu einem klassischen Raster werden die Elemente nicht an festen Zeilen ausgerichtet: Jedes Element nimmt den in der Höhe benötigten Platz ein und wird an der ersten verfügbaren Stelle in der Spalte positioniert.

Dieser Mechanismus ermöglicht es, Bilder oder Inhalte mit unterschiedlichen Proportionen auf natürliche Weise zu verwalten, leere Bereiche zu vermeiden und eine kompakte sowie visuell ausgewogene Komposition beizubehalten. Die Reihenfolge der Elemente bleibt erhalten, ihre Anordnung passt sich jedoch dynamisch an die Größe der einzelnen Inhalte und an die verfügbare Seitenbreite an.


Das Ergebnis ist ein fließendes Layout, das den verfügbaren Platz besser nutzt und sich automatisch an Größenänderungen anpasst, ohne dass manuelle Eingriffe in die Seitengestaltung erforderlich sind.


Wann das Masonry-Objekt verwendet werden sollte

Wie bereits erwähnt, eignet sich das Masonry-Objekt besonders dann, wenn mit heterogenen visuellen Inhalten gearbeitet wird und keine starre Ausrichtung auf horizontalen Zeilen erforderlich ist.


Im Allgemeinen empfiehlt es sich, das Objekt zu verwenden, wenn:

  • die Bilder oder Inhalte unterschiedliche Proportionen und Höhen aufweisen;
  • das Ziel eine fließende und visuell dynamische Komposition ist;
  • die Leserichtung nicht strikt sequenziell ist.


Dagegen kann es sinnvoller sein, andere Objekte zu verwenden, wenn:

  • eine präzise Ausrichtung der Elemente erforderlich ist;
  • Inhalte Zeile für Zeile verglichen werden müssen;
  • die Seitenstruktur eine geordnete und vorhersehbare Leseführung erfordert.


So fügen Sie ein Masonry-Objekt ein

Um das Masonry-Objekt zu verwenden, genügt es, es in eine Seite einzufügen und über die Einstellungen die anzuzeigenden Inhalte hinzuzufügen und zu organisieren.

  • Doppelklicken Sie auf das eingefügte Masonry-Objekt, um das Fenster mit allen verfügbaren Optionen zu öffnen.
  • Klicken Sie auf die Schaltfläche Hinzufügen, um Bilder zu importieren. Über den Pfeil neben der Schaltfläche Hinzufügen können Sie wählen, ob Sie nach Lokalen Dateien suchen oder die Online-Bibliothek verwenden (weitere Informationen finden Sie unter Wie importiert man eine Datei?). Die importierten Dateien bilden die Liste der Elemente, die frei sortiert und bearbeitet werden kann.
#Tipp – Mehrfachauswahl. Halten Sie die STRG-Taste gedrückt und klicken Sie auf alle Dateien, die Sie auswählen möchten, um sie in einem einzigen Schritt zu importieren.
  • Mit den Schaltflächen  können Sie festlegen, ob die Vorschaubilder in der Liste in kleiner oder mittlerer Größe angezeigt werden, um die Arbeit zu erleichtern.
  • Sobald die Bildliste erstellt wurde, kann sie jederzeit bearbeitet werden: Neben dem Hinzufügen neuer Bilder können nicht mehr benötigte Bilder gelöscht oder verschoben werden, um eine neue Reihenfolge festzulegen. Wählen Sie dazu einfach ein Bild aus der Liste aus und klicken Sie auf die Schaltfläche , um es zu entfernen, oder verwenden Sie die Pfeilschaltflächen, um es zu verschieben.
  • In gleicher Weise können Sie für jedes Bild:
    • die Schaltfläche verwenden, um einen Titel und einen alternativen Text für Barrierefreiheit und SEO-Optimierung einzugeben (siehe Barrierefreiheit von Bildern: die Bedeutung von alternativem Text);
    • auf die Schaltfläche  klicken und im daraufhin geöffneten Fenster einen kurzen Text (z. B. einen Titel oder eine Bildunterschrift) eingeben;
    • auf die Schaltfläche klicken und einen Link festlegen, indem Sie die passende Aktion auswählen.


So definieren Sie den Stil der Masonry-Galerie

Nachdem die Galerie erstellt wurde, können Sie sich den grafischen Aspekten widmen.

  • Rufen Sie den Bereich Stil auf, legen Sie die Anzahl der Spalten fest, nach denen die Bilder angeordnet werden sollen, und bestimmen Sie das Verhalten im Responsive-Modus: Sie können entscheiden, dass bei abnehmendem verfügbaren Platz die Anzahl der Spalten reduziert wird, zugunsten größerer Bilder, oder alternativ die Spaltenanzahl immer gleich bleibt. 
  • Um den Stil des Rasters zu definieren, können Sie außerdem die Ränder anpassen und einen Ab­rundungsfaktor anwenden, um die Ecken der Bilder abzurunden.
  • Konfigurieren Sie anschließend den Bildstil: Sie können eine Farbe und einen Overlay-Effekt festlegen sowie das Symbol auswählen, das beim Überfahren mit der Maus angezeigt wird, um darauf hinzuweisen, dass das Bild per Klick vergrößert werden kann.
  • Natürlich können Sie auch die Effekte auswählen: sowohl den Effekt beim Überfahren einer einzelnen Grafik mit der Maus als auch den Effekt für das Einblenden der Galerie auf der Seite.
  • Legen Sie abschließend fest, ob beim Klick auf ein Bild eine vergrößerte Version desselben Bildes angezeigt werden soll; in diesem Fall können Sie die maximale Größe für die Vergrößerung bestimmen.


Praktische Tipps für ein gutes Ergebnis

Um ein effektives und ansprechendes Masonry-Layout zu erzielen, sollten bei der Vorbereitung der Inhalte und beim Aufbau der Seite einige bewährte Vorgehensweisen berücksichtigt werden.


Insbesondere:

  • eine ausgewogene Anzahl von Elementen verwenden und zu dichte Sammlungen vermeiden;
  • auf eine visuelle Konsistenz der Bilder achten, insbesondere in Bezug auf Stil und Qualität;
  • die Dateigröße optimieren, um die Ladezeiten der Seite zu verbessern;
  • das Ergebnis stets in der Vorschau überprüfen, sowohl auf dem Desktop als auch auf mobilen Geräten.



Möchten Sie das Objekt auf den Seiten Ihrer Website verwenden? Installieren Sie das Masonry-Objekt jetzt


Sie verfügen nicht über ausreichend Credits, um dieses Objekt zu erwerben? Alle Credit-Pakete anzeigen