Einen eigenen Block erstellen

Diese Anleitung erklärt, wie Sie ein Block-Layout im Block-Editor von Grund auf neu gestalten — mit eigens gezeichneten Bereichen, Vorlagen, Zeilen hinzufügen und CMS-Elementen zuweisen.

Voraussetzungen

• Die Anleitung Erste Schritte ist abgeschlossen — Sie wissen, wie Sie den Block Builder erreichen und einen Block erstellen.
• Admin-Rolle mit mindestens der Berechtigung ssd_custom_block.creator.

Layout-Vorlage verwenden

Vorlagen sind der schnellste Einstieg:

1. Öffnen Sie die Erstellungsseite (Inhalte > CMS Block Builder > Block erstellen).
2. Scrollen Sie nach Ausfüllen der Einstellungskarte zur Block-Editor-Karte.
3. Der leere Zustand zeigt Vorlagen-Karten. Wählen Sie eine:

Vorlage	Grid-Layout
1 Spalte	Volle Breite — ein Slot über alle 12 Spalten
2 Spalten	Zwei gleich breite 6-Spalten-Slots
Sidebar links	Ein schmaler 4-Spalten-Slot links und ein breiter 8-Spalten-Slot rechts
Sidebar rechts	Ein breiter 8-Spalten-Slot links und ein schmaler 4-Spalten-Slot rechts
3 Spalten	Drei gleich breite 4-Spalten-Slots
4 Spalten	Vier gleich breite 3-Spalten-Slots

4. Klicken Sie auf eine Vorlage, um sie anzuwenden. Das Grid zeigt die platzierten Bereiche sofort.

Einen eigenen Bereich zeichnen

Für ein Layout, das keine Vorlage abdeckt:

1. Bewegen Sie den Mauszeiger über eine leere Zelle im Grid. Der Cursor ändert sich und zeigt an, dass Sie zeichnen können.
2. Klicken und halten Sie die Maustaste auf der Startzelle.
3. Ziehen Sie zur Endzelle — eine blaue Markierung zeigt den zu zeichnenden Bereich. Im Vorschau erscheint eine Größenangabe (z. B. 6×2).
4. Lassen Sie die Maustaste los. Wenn der Bereich keinen vorhandenen Slot überschneidet, wird er platziert und der Element-Picker öffnet sich.
5. Wählen Sie ein CMS-Element im Picker aus.

Tipp: Bereiche können mehrere Zeilen und Spalten überspannen. Ziehen Sie nach unten, um einen höheren Slot zu erstellen.

Zeilen hinzufügen oder entfernen

Das Grid startet mit 4 Zeilen. Um es vertikal zu erweitern:

• Klicken Sie unter dem Grid auf Zeile hinzufügen, um eine Zeile anzuhängen.
• Klicken Sie auf Zeile entfernen, um die letzte Zeile zu löschen — sofern kein Bereich sie belegt.

Zeilen-Steuerelemente sind nur auf dem Desktop-Tab verfügbar und werden deaktiviert, wenn der Block auf einer Seite verwendet wird (Struktur gesperrt).

Einem Slot ein Element zuweisen

Nach dem Zeichnen eines Bereichs öffnet sich der Element-Picker automatisch. Sie können ihn auch später durch Klicken auf einen vorhandenen Bereich öffnen.

Der Picker zeigt Vorschau-Thumbnails aller verfügbaren CMS-Elemente in Ihrem Shop — einschließlich Elemente aus anderen Plugins. Klicken Sie auf eine Vorschau, um diesen Elementtyp zuzuweisen.

Um das Element in einem vorhandenen Slot zu tauschen, hovern Sie über den Bereich und klicken Sie auf das Tauschen-Symbol.

Layout leeren

Um auf dem Desktop-Tab neu zu beginnen, klicken Sie in der Toolbar auf Alle löschen. Dadurch werden alle Bereiche und Slot-Zuweisungen entfernt.

Hinweis: „Alle löschen" ist nur auf dem Desktop-Tab verfügbar. Tablet- und Mobile-Layouts können durch Entfernen einzelner Bereiche auf diesen Tabs separat zurückgesetzt werden.

Block speichern

Klicken Sie auf Speichern. Das Plugin prüft:

• Blockname und Technischer Name sind nicht leer.
• Der technische Name ist eindeutig (nicht von einem anderen eigenen Block oder einem registrierten Shopware-Block verwendet).
• Jedem Bereich ist ein Element zugewiesen.

Schlägt eine Prüfung fehl, identifiziert eine Warnmeldung das Problem. Korrigieren Sie es und speichern Sie erneut.

Was nach dem Speichern passiert

• Der Block wird in der Datenbanktabelle ssd_custom_block gespeichert.
• Der CMS-Block-Picker in den Erlebniswelten registriert den neuen Block unter der von Ihnen gewählten Kategorie.
• Der Block ist sofort verfügbar — kein Cache-Leeren erforderlich.