Loading...
Navigation überspringen
Bitte beachte, dass sich diese Dokumentation auf die neuste Version dieser Erweiterung bezieht. Wenn eine ältere Version eingesetzt wird, kann diese abweichen. Die jeweils passende Dokumentation befindet sich im Dokumentation-Verzeichnis der Erweiterung.

Masonry erstellen

Wechsel in das Listen-Modul und aktiviere den Masonry Daten-Container im Seitenbaum. Hier klickst Du auf Datensatz hinzufügen und erstellst einen Masonry-Datensatz.

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

Masonry-Items

Masonry-Items sind die unterschiedlichen Blöcke Deines 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 Du das Masonry-Objekt erstellt hast, kannst Du es mit Hilfe eines Masonry-Inhaltselements auf beliebigen Seiten platzieren.

Kontaktanfrage

Du kannst uns jederzeit kontaktieren

Stop! Playing in the meantime?
Stop! Playing in the meantime?
Stop! Playing in the meantime?

Stop! Playing in the meantime?

Break the highscore

Press Start
Contact request
Screenreader label
Security question
GK1_________TQE______
H_H____O____8_R___B52
H4A___PD2___QCB______
__5____K______8___O96
T79_________1KZ______