Grid Builder Pro

Beschreibung

Mit dem Responsive Grid Builder für die Shopware 6 Erlebniswelten bist du endlich vollkommen frei, was das Erstellen ansprechender Raster-Layouts angeht. Der intuitive Editor ermöglicht es dir, selbstständig Layout-Blöcke für die Erlebniswelten zu erstellen – egal ob diese 2 oder 20 Elemente enthalten sollen. Dabei definierst du genau, wie viele Zeilen und Spalten dein Raster enthält und wie die Elemente platziert sind.

Darüber hinaus lassen sich die Layouts responsiv definieren, das heißt, du bestimmst genau, wie sie auf Desktops, Tablets oder Mobilgeräten dargestellt werden.

Nach dem Erstellen eines Raster-Layouts fügst du dieses wie gewohnt in ein Erlebniswelten-Layout ein und befüllst es mit deinen gewünschten Elementen.

Highlights

• Intuitiver Grid-Editor
• Eigene Grid-Layouts (Raster) für Erlebniswelten bauen
• Endlose Möglichkeiten für Erlebniswelten-Layouts
• Responsive: unterschiedliche Darstellung für Mobil, Tablet, Laptop und Desktop (optional Desktop XL / XXL)

Editor

Der Editor bietet mehrere Wege, ein Raster aufzubauen und zu verfeinern:

• Elemente zeichnen und in der Größe ändern: Klicke auf eine leere Startzelle und ziehe zur Endzelle, um ein neues Element zu zeichnen. Am Eck-Griff unten rechts eines Elements änderst du dessen Größe – Zelle für Zelle, bis herunter auf 1 × 1. Ziehe Elemente aufeinander, um sie zu tauschen.
• Mit einer Vorlage starten: Eine Galerie mit acht professionell gestalteten Start-Layouts (z. B. „Hero + 3 Teaser“, „Feature links“, „50 / 50 geteilt“, „Mosaik-Galerie“) – jeweils inklusive Mobil-, Tablet- und Desktop-Varianten – lässt sich per Klick übernehmen. Alternativ startest du mit dem leeren Raster.
• Layout je Ansicht ausblenden: Über das Augen-Symbol blendest du einzelne Elemente nur in einer bestimmten Ansicht aus. Ausgeblendete Elemente erscheinen in einer Wiederherstellungs-Leiste und werden aus Vorschau und Storefront ausgeschlossen.
• Layout zwischen Ansichten übernehmen: Über die Werkzeugleiste oberhalb des Editors kopierst du ein komplettes Layout von einer Ansicht in eine andere.
• Live-Vorschau: Ein Vorschau-Panel auf der Detailseite simuliert die Storefront-Darstellung mit echten Spaltenproportionen, Abständen und ausgeblendeten Elementen. Per Geräte-Buttons (Mobil / Tablet / Laptop / Desktop, bei Bedarf zusätzlich XL und XXL) wechselst du die Ansicht; die Vorschau aktualisiert sich live.

Slot-Stil

Für jeden Slot lassen sich zusätzliche Darstellungsoptionen setzen: Innenabstand (oben/rechts/unten/links), Hintergrundfarbe, Eckenradius, Mindesthöhe sowie die vertikale Inhaltsausrichtung (Standard, oben, zentriert, unten). Die Einstellungen werden sowohl in der Admin-Vorschau als auch in der Storefront berücksichtigt.

Standard-CMS-Elemente

Optional legst du je Slot fest, mit welchem CMS-Element dieser vorbelegt wird, sobald das Raster neu in einer Erlebniswelt platziert wird. Bereits platzierte Raster bleiben davon unberührt.

Raster verwalten

Die Listenansicht zeigt zu jedem Raster Mini-Vorschauen pro Ansicht, eine Layout-Zusammenfassung (Spalten × Zeilen, Anzahl der Ansichten und Elemente), den Zeitpunkt der letzten Änderung sowie eine „In Verwendung“-Kennzeichnung. Raster lassen sich direkt in der Liste umbenennen und duplizieren.

• Export / Import: Über das Kontextmenü der Liste exportierst du ein Raster als JSON-Datei; über „Raster importieren“ liest du es – mit Validierung – wieder ein. So teilst du Layouts zwischen mehreren Shops.

KI-Raster-Generator (optionale In-App-Freischaltung)

Als kostenpflichtige In-App-Freischaltung für den jeweiligen Shop steht ein KI-Generator zur Verfügung. Du lädst einen Screenshot oder eine Skizze deines Wunsch-Layouts hoch und/oder beschreibst es in Worten; die KI erstellt daraus ein passendes Raster – inklusive Varianten für Laptop, Tablet und Mobil. Ohne Freischaltung bleibt der Funktionsumfang von Grid Builder Pro vollständig nutzbar.

Konfiguration

Unter Entwicklereinstellungen – Responsive Breakpoints legst du fest, ab welcher Breite (in Pixeln) die jeweilige Ansicht greift. Die Standardwerte entsprechen den üblichen Bootstrap-Breakpoints:

Breakpoint XS in px (Mobilgeräte) Ab dieser Breite gilt die Mobil-Ansicht (Standard: 0).

Breakpoint SM in px (Tablet) Ab dieser Breite gilt die Tablet-Ansicht (Standard: 576).

Breakpoint MD in px (Laptop) Ab dieser Breite gilt die Laptop-Ansicht (Standard: 768).

Breakpoint LG in px (Desktop) Ab dieser Breite gilt die Desktop-Ansicht (Standard: 992).

Breakpoint XL in px (XL Desktop) Ab dieser Breite gilt die optionale Ansicht „Desktop XL“ (Standard: 1200).

Breakpoint XXL in px (XXL Desktop) Ab dieser Breite gilt die optionale Ansicht „Desktop XXL“ (Standard: 1400).

Die zusätzlichen Ansichten „Desktop XL“ und „Desktop XXL“ aktivierst du pro Raster direkt im Editor – passend dazu, ob dein Theme diese Breakpoints unterstützt.