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:
- Default: Dieses ist das Standard Masonry-Item und enthält alle Datenfelder.
- QR-Code: In diesem Masonry-Item wird eine URL als QR-Code angezeigt.
- Owl-Carousel: In diesem Masonry-Item kann eine Slideshow/Bildslider angezeigt werden.
- Background-Image: Dieses Masonry-Item zeigt ein Hintergrundbild an.
- 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.