Responsive Layouts konfigurieren
Der CMS Block Builder ermöglicht es Ihnen, unabhängige Grid-Layouts für Desktop, Tablet und Mobile zu definieren. Die Storefront zeigt automatisch das korrekte Layout für den Viewport des Besuchers an. Diese Anleitung erklärt, wie Sie diese responsiven Breakpoints einrichten und anpassen.
Voraussetzungen
- Ein eigener Block wurde erstellt und in der Block Builder-Detailansicht geöffnet.
- Das Desktop-Layout ist bereits definiert (responsive Layouts basieren auf dem Desktop-Layout).
Breakpoints verstehen
Der Editor hat drei Breakpoint-Tabs:
| Tab | Shopware-Breakpoint | Wann er gilt |
|---|---|---|
| Desktop | > md (> 768 px) | Standard — immer sichtbar, wenn nicht überschrieben |
| Tablet | md und darunter (≤ 768 px) | Nur angezeigt, wenn ein Tablet-Layout konfiguriert ist |
| Mobile | sm und darunter (≤ 576 px) | Nur angezeigt, wenn ein Mobile-Layout konfiguriert ist |
Element-Zuweisungen (welches Element in welchem Slot ist) werden immer auf dem Desktop-Tab festgelegt und für alle Breakpoints geteilt. Tablet- und Mobile-Tabs steuern nur, wo jeder Slot auf dem Grid positioniert ist — nicht, welches Element er enthält.
Wenn Sie kein Tablet- oder Mobile-Layout konfigurieren, wird das Desktop-Layout bei allen Viewport-Größen verwendet.
Schritt 1 — Zum Tablet-Tab wechseln
Klicken Sie auf das Tablet-Symbol in der Breakpoint-Tab-Leiste oben im Block-Editor.
Das Grid ist leer, wenn Sie noch kein Tablet-Layout konfiguriert haben. Sie sehen eine Leer-Zustand-Meldung.
Schritt 2 — Desktop-Layout als Ausgangspunkt kopieren
Klicken Sie auf Layout von Desktop kopieren. Das Tablet-Grid zeigt nun dieselben Bereiche wie der Desktop.
Schritt 3 — Bereiche für Tablet neu positionieren
Im Tablet-Tab können Sie jeden Slot neu positionieren, aber keine neuen Slots hinzufügen oder Elementtypen ändern.
So verschieben Sie einen Slot:
- Wählen Sie in der Slot-Auswahl über dem Grid den Slot, den Sie neu positionieren möchten (z. B.
slot-0 (Bild)). - Der Slot wird als derjenige hervorgehoben, der gezeichnet werden soll.
- Entfernen Sie zunächst seinen aktuellen Bereich, indem Sie darüber hovern und auf die ×-Schaltfläche klicken. Der Bereich verschwindet und der Slot kehrt in die unplatzierten Liste zurück.
- Zeichnen Sie einen neuen Bereich auf dem Grid für diesen Slot — klicken und ziehen Sie zur gewünschten Position und Größe.
- Der Slot wird an der neuen Position platziert.
Wiederholen Sie dies für jeden Slot, der auf dem Tablet eine andere Position benötigt.
Schritt 4 — Mobile-Layout konfigurieren
Wechseln Sie zum Mobile-Tab und wiederholen Sie die Schritte 2–3. Ein typisches Mobile-Layout stapelt alle Slots vertikal (jeder umspannt alle 12 Spalten, je eine Zeile).
Schritt 5 — Speichern
Klicken Sie auf Speichern. Die Storefront zeigt nun:
- Das Desktop-Grid bei
> 768 px. - Das Tablet-Grid bei
≤ 768 px(wenn konfiguriert). - Das Mobile-Grid bei
≤ 576 px(wenn konfiguriert).
Wenn Tablet oder Mobile nicht konfiguriert ist, wird das Desktop-Layout als Fallback verwendet.
Responsives Verhalten testen
Öffnen Sie die Seite in der Storefront und nutzen Sie die Entwicklertools Ihres Browsers (responsiver Design-Modus), um verschiedene Viewport-Breiten zu simulieren. Überprüfen Sie, ob der Block beim jeweiligen Breakpoint zum korrekten Layout wechselt.
Was auf Tablet/Mobile-Tabs nicht möglich ist
- Neue Slots hinzufügen (Bereiche können nur für vorhandene Desktop-Slots platziert werden).
- Elementtypen zuweisen oder tauschen (immer auf dem Desktop-Tab).
- Vorlagen anwenden (Vorlagen gelten nur auf dem Desktop-Tab).
- Zeilen hinzufügen oder entfernen (Zeilenanzahl wird auf dem Desktop-Tab festgelegt).
Wenn Sie ein grundlegend anderes Layout für einen Breakpoint benötigen, erstellen Sie einen separaten Block für diesen Viewport und platzieren Sie ihn bedingt auf der Seite über die Abschnitts-Sichtbarkeitseinstellungen von Shopware.