Masonry erstellen

Wechseln Sie in das Listen-Modul und aktivieren Sie den Masonry Daten-Container im Seitenbaum. Hier klicken Sie auf Datensatz hinzufügen und erstellen einen Masonry-Datensatz.

In diesem Datensatz vergeben Sie als erstes einen Titel, so dass Sie den Masonry-Datensatz wieder erkennen können. Auf dem Tab Items haben Sie jetzt die Möglichkeit beliebig viele Items in Ihrem Masonry zu erstellen - mehr dazu im nächsten Abschnitt. Auf dem Tab Grid gutter können Sie den Abstan zwischen Ihren Masonry-Items festlegen. Dieser Abstand wird in Pixeln angegeben. Des Weiteren haben Sie die Möglichkeit den Abstand je nach responsiver Auflösung unterschiedlich groß zu gestalten.

Masonry-Items

Masonry-Items sind die unterschiedlichen Blöcke Ihres Masonry. Jedes Masonry kann beliebig viele Masonry-Items enthalten - folgende Typen sind vorkonfiguriert vorhanden:

1. Default: Dieses ist das Standard Masonry-Item und enthält alle Datenfelder.
2. QR-Code: In diesem Masonry-Item wird eine URL als QR-Code angezeigt.
3. Owl-Carousel: In diesem Masonry-Item kann eine Slideshow/Bildslider angezeigt werden.
4. Background-Image: Dieses Masonry-Item zeigt ein Hintergrundbild an.
5. HTML: Mit diesem Masonry-Item können einfach HTML-Inhalte angezeigt werden.

Jedes Masonry-Item hat die folgenden Felder:

• Template: Über die Template-Auswahlbox können verschiedene Fluid-Varianten des Masonry-Items bereitgestellt werden.
• Description: Das Beschreibungsfeld ist für interne Informationen vorgesehen.

• Responsive settings: Über die responsive Settings wird angegeben, wie groß ein Masonry-Item in jeweiligen responsiven Stufen ist. Generell wird (ähnlich wie bei Bootstrap) zwischen den folgenden Auflösungen unterschieden:

  • Extra small devices (portrait phones)
  • Small devices (landscape phones)
  • Medium devices (tablets)
  • Large devices (desktops)
  • Extra large devices (large desktops)

  In jeder dieser responsiven Stufen muss nun die Breite und die Höhe angegeben werden. Dabei orientieren wir uns wieder am Konzept von Bootstrap - das heißt wir unterteilen die komplette Breite in ein 12er Grid. Somit kann das kleinste Masonry-Item 1/12 der gesamten Breite klein sein. Die Höhe eines Masonry-Items orientiert sich ebenfalls am 12er Grid und kann immer um 1/12 wachsen.

Nach dem Sie das Masonry-Objekt erstellt haben, können Sie es mit Hilfe eines Masonry-Inhaltselements auf beliebigen Seiten platzieren.