Grid-Vorlagen erstellen und im Editor bedienen
Eine Grid-Vorlage beschreibt ein Rasterlayout: wie viele Spalten und Zeilen es hat, wo die einzelnen Slots liegen und wie groß sie sind – jeweils getrennt für Desktop, Tablet und Mobile. Gespeicherte Vorlagen stehen anschließend als CMS-Block bereit.
Eine neue Vorlage anlegen
- Öffnen Sie im Admin Inhalte → Dynamic Grids.
- Klicken Sie oben rechts auf Grid erstellen.
- Vergeben Sie unter Name einen sprechenden Namen (z. B.
Hero Grid 2x3). Der Name wird später als Block-Titel im Picker angezeigt. - Konfigurieren Sie das Raster im Editor (siehe unten).
- Klicken Sie auf Speichern.
Der Editor im Überblick
Über den Tabs Desktop, Tablet und Mobile wechseln Sie den Viewport, den Sie gerade bearbeiten. Darüber steuern Sie das Raster:
| Steuerung | Bedeutung |
|---|---|
| Spalten | Anzahl der Rasterspalten (max. 12). |
| Zeilen | Anzahl der Rasterzeilen (max. 6). |
| Spaltenabstand | Horizontaler Abstand zwischen den Slots (beliebiger CSS-Wert, z. B. 24px). |
| Zeilenabstand | Vertikaler Abstand zwischen den Slots. |
| Viewports synchronisieren | Überträgt Änderungen auf alle Viewports (siehe unten). |
| Abstände synchronisieren | Hält Spalten- und Zeilenabstand identisch. |
Grenzen des Editors
Ein Raster kann maximal 12 Spalten, 6 Zeilen und 12 Slots enthalten. Diese Grenzen sind fest.
Slots hinzufügen, verschieben und vergrößern
- Hinzufügen: Klicken Sie auf eine leere Zelle. Ein neuer Slot wird dort eingesetzt.
- Verschieben: Ziehen Sie einen Slot per Drag-and-drop an eine andere Position.
- Größe ändern: Ziehen Sie am Anfasser des Slots oder nutzen Sie die Buttons zum Erweitern/Verkleinern von Breite und Höhe.
- Entfernen: Entfernen Sie einen Slot über die Slot-Aktionen. Er wandert je nach Synchronisationseinstellung ins Depot (siehe unten), statt sofort gelöscht zu werden.
- Rückgängig: Über Rückgängig nehmen Sie den letzten Schritt zurück.
Überlappende Slots
Slots dürfen sich überlappen. Die Reihenfolge bestimmt die Ebene: Slot 2 liegt über Slot 1, Slot 3 über Slot 2 und so weiter. Der Editor weist Sie darauf hin, sobald sich Slots überschneiden.
Responsive Layouts: Viewports getrennt einstellen
Jeder Viewport (Desktop, Tablet, Mobile) kann ein eigenes Raster haben – etwa drei Spalten auf dem Desktop und eine einzige gestapelte Spalte auf dem Handy.
- Ist Viewports synchronisieren aktiv, gelten Spalten, Zeilen, Slots und Abstände für alle Viewports gleichzeitig.
- Schalten Sie die Synchronisation aus, um pro Viewport ein eigenes Layout zu bauen.
Wenn Sie die Synchronisation einschalten, während sich die Viewports bereits unterscheiden, erscheint der Dialog Viewports synchronisieren. Er überträgt die Einstellungen des aktuell gewählten Viewports auf alle anderen – die abweichenden Layouts der übrigen Viewports werden dabei überschrieben.
Zuordnung der Breakpoints
Die drei Viewports greifen im Storefront in diesen Bereichen: Mobile ≤ 768 px · Tablet 769–1024 px · Desktop > 1024 px.
Abstände synchronisieren
Der Schalter Abstände synchronisieren hält Spalten- und Zeilenabstand identisch. Aktivieren Sie ihn bei unterschiedlichen Werten, erscheint der Dialog Abstände synchronisieren und übernimmt den Spaltenabstand als neuen Zeilenabstand.
Diese Einstellung wird pro Viewport gespeichert. Bei aktiver Viewport-Synchronisation gilt sie für alle Viewports, sonst nur für den aktuellen.
Das Depot
Das Depot ist ein Ablagebereich für Slots, die aktuell außerhalb des sichtbaren Rasters liegen – etwa weil ein Slot in einem anderen Viewport genutzt wird oder Sie ihn zwischengeparkt haben.
- Zurück ins Raster: Ziehen Sie einen Slot aus dem Depot in eine Rasterzelle.
- Auge-Symbol: Zeigt an, dass der Slot in einem anderen Viewport sichtbar ist.
- Dauerhaft löschen: Entfernt den Slot aus allen Viewports.
Screenshot-Checkliste
- [ ] Menüeintrag Inhalte → Dynamic Grids
- [ ] Detailseite Neues Grid erstellen (Namensfeld + Editor)
- [ ] Editor mit platzierten, teils überlappenden Slots
- [ ] Depot-Bereich mit abgelegtem Slot
- [ ] Dialog Viewports synchronisieren