Erste Schritte mit dem CMS Block Builder

Diese Anleitung führt Sie durch die Installation des Plugins, die Erstellung Ihres ersten eigenen CMS-Blocks und dessen Platzierung auf einer Seite, sodass er in der Storefront sichtbar ist. Die Bearbeitung dauert ca. zehn Minuten.

Voraussetzungen

• Shopware 6.7 Adminzugang mit Berechtigung zur Verwaltung von Plugins und Erlebniswelten-Seiten.
• Das Plugin CMS Block Builder ist installiert und aktiviert (siehe Schritt 1).

Schritt 1 — Plugin installieren und aktivieren

1. Gehen Sie im Shopware-Adminbereich zu Erweiterungen > Meine Erweiterungen.
2. Suchen Sie CMS Block Builder und klicken Sie auf Installieren, dann auf Aktivieren.
3. Nach der Aktivierung erscheint unter Inhalte ein neuer Eintrag CMS Block Builder.

Schritt 2 — Block Builder öffnen

1. Klicken Sie in der Admin-Seitenleiste auf Inhalte > CMS Block Builder.
2. Sie sehen die Block-Bibliotheksliste. Bei einer Neuinstallation ist sie leer.
3. Klicken Sie oben rechts auf Block erstellen.

Schritt 3 — Block-Einstellungen ausfüllen

Füllen Sie auf der Erstellungsseite folgende Felder aus:

Feld	Was eingeben
Blockname	Ein lesbarer Anzeigename, z. B. Hero mit Text
Technischer Name	Eine eindeutige Kennung in Kleinbuchstaben mit Bindestrichen, z. B. hero-mit-text. Kann nach dem Speichern nicht mehr geändert werden.
Kategorie	Legt fest, wo der Block im Block-Picker erscheint, z. B. Benutzerdefiniert.
Position	Belassen Sie den Wert vorerst bei 0 — niedrigere Zahlen erscheinen früher im Picker.

Lassen Sie den Schalter Aktiv eingeschaltet.

Schritt 4 — Layout im Block-Editor gestalten

Der Block-Editor ist das zeichenbare Grid unterhalb der Einstellungskarte. Es verwendet eine 12-Spalten-CSS-Grid-Leinwand.

Schnellstart mit einer Vorlage:

1. Im leeren Zustand sehen Sie Vorlagen-Karten: 1 Spalte, 2 Spalten, Sidebar links usw.
2. Klicken Sie auf 2 Spalten, um sofort zwei gleichbreite Slots nebeneinander zu platzieren.
3. Das Grid zeigt zwei Bereiche mit den Bezeichnungen slot-0 und slot-1.

Elementen zu jedem Slot zuweisen:

1. Klicken Sie auf den Bereich slot-0 (oder er öffnet sich automatisch nach dem Zeichnen). Das Element-Picker-Modal erscheint.
2. Scrollen Sie durch die verfügbaren CMS-Element-Vorschauen und klicken Sie auf das gewünschte Element, z. B. Bild.
3. Der Slot zeigt nun „Bild" als zugewiesenes Element.
4. Klicken Sie auf slot-1 und wählen Sie Text (oder ein anderes Element).

Beide Slots haben nun Elemente zugewiesen.

Schritt 5 — Block speichern

Klicken Sie oben rechts auf Speichern. Bei Erfolg erscheint eine Erfolgsmeldung und die Seite lädt die Block-Detailansicht neu.

Der Block ist nun im CMS-Block-Picker registriert.

Schritt 6 — Block auf einer Seite platzieren

1. Gehen Sie zu Inhalte > Erlebniswelten.
2. Öffnen Sie eine bestehende Seite oder erstellen Sie eine neue.
3. Im Block-Picker in der rechten Seitenleiste finden Sie die von Ihnen gewählte Kategorie (z. B. Benutzerdefiniert). Ihr Block erscheint dort mit seinem Namen.
4. Ziehen Sie den Block per Drag & Drop auf die Seitenleinwand.
5. Jeder Slot öffnet das Standard-Shopware-Element-Konfigurationspanel. Füllen Sie Bild- und Textinhalte aus wie bei jedem anderen Block.
6. Speichern Sie die Seite.

Schritt 7 — Vorschau in der Storefront

Öffnen Sie die Seite in der Storefront. Ihr eigener Block wird als zweispaltiges CSS-Grid dargestellt — mit dem Bild links und dem Text rechts.

Sie haben Ihren ersten eigenen CMS-Block erstellt und platziert. Von hier aus können Sie:

• Das responsive Layout für Tablet und Mobile anpassen — siehe Responsive Layouts konfigurieren.
• Weitere Blöcke zur Bibliothek hinzufügen — siehe Einen eigenen Block erstellen.
• Blöcke verwalten, duplizieren und löschen — siehe Die Block-Bibliothek verwalten.