Section-Editor

Mit dem Section-Editor gestalten Sie die Seitenlayouts Ihres Shops aus vorgefertigten Bausteinen — ohne Code. Sie können Sektionen hinzufügen, verschieben, konfigurieren und in Echtzeit als Vorschau ansehen.

Überblick

Der Section-Editor steht für sieben Seitentypen zur Verfügung:

Seitentyp	Admin-Pfad	Beschreibung
Homepage	Seiten → Homepage	Startseite Ihres Shops
Produkt	Seiten → Product	Abschnitte unterhalb der Produktdetails
Kollektion	Seiten → Collection	Abschnitte unterhalb des Produktrasters
Blog	Seiten → Blog	Abschnitte unterhalb der Beitrags-Liste
Checkout	Seiten → Checkout → Sections	Abschnitte oberhalb und unterhalb des Checkout-Formulars
Danke-Seite	Seiten → Thank-You → Sections	Abschnitte oberhalb und unterhalb der Bestellbestätigung
Bestellstatus	Seiten → Order-Status → Sections	Abschnitte auf der Bestellstatus-Seite

Section-Editor öffnen

Melden Sie sich im Admin-Bereich an.
Navigieren Sie zu Seiten.
Im Bereich Seitensektionen sehen Sie alle vier Seitentypen mit der jeweiligen Anzahl konfigurierter Sektionen.
Klicken Sie auf den gewünschten Seitentyp (z. B. Homepage).

Bearbeitungsmodi

Der Editor bietet zwei Reiter — wählen Sie den Modus, der zu Ihrem Workflow passt.

Visueller Editor

Der visuelle Editor (Standardansicht) zeigt alle Sektionen als Karten in der aktuellen Reihenfolge. Jede Karte zeigt Name, Typ und einen Aktivieren/Deaktivieren-Schalter.

Karte aufklappen: Klicken Sie auf eine Karte, um die Einstellungen zu sehen. Drei Reiter stehen zur Verfügung:

Reiter	Inhalt
Einstellungen	Alle konfigurierbaren Felder der Sektion (Texte, Farben, Bilder, Layouts)
Blöcke	Wiederholbare Inhaltsblöcke wie Testimonials, FAQ-Einträge oder Logos (falls vorhanden)
CSS	Eigenes CSS, das nur auf diese Sektion angewendet wird

Änderungen werden beim Wechsel zu einer anderen Karte automatisch gespeichert.

JSON-Editor

Der JSON-Editor zeigt die vollständige Seitenkonfiguration als JSON-Code (CodeMirror-Editor mit Syntaxhervorhebung). Dieser Modus ist nützlich für:

Massenänderungen an mehreren Sektionen gleichzeitig
Import von AI-generierten Konfigurationen
Export und Backup der Konfiguration

Funktionen im JSON-Editor:

Button	Aktion
Validieren	Prüft die JSON-Struktur auf Fehler und zeigt sie mit Pfad an
Vorschau	Rendert die Konfiguration als HTML-Vorschau in einem neuen Tab
Speichern	Übernimmt die Konfiguration und veröffentlicht sie
JSON herunterladen	Lädt die aktuelle Konfiguration als `.json`-Datei herunter

Hinweis: Beim Wechsel vom JSON- zum visuellen Editor wird das JSON geprüft. Ist es ungültig, erscheint eine Fehlermeldung — korrigieren Sie die Fehler, bevor Sie wechseln.

Sektion hinzufügen

Klicken Sie im visuellen Editor auf Sektion hinzufügen.
Ein Dialog zeigt alle verfügbaren Sektionstypen, gruppiert nach Kategorie (Hero, Produkte, Inhalte, Conversion usw.).
Klicken Sie auf den gewünschten Typ.
Die neue Sektion erscheint am Ende der Liste mit Standardwerten.
Klappen Sie die Karte auf und passen Sie die Einstellungen an.

Eine vollständige Liste aller Sektionstypen finden Sie unter Sektionstypen.

Checkout-spezifische Sektionstypen

Auf den Seiten Checkout, Danke-Seite und Bestellstatus stehen zusätzlich sieben spezialisierte Sektionstypen zur Verfügung:

Sektionstyp	Beschreibung
Checkout Trust Signals	Kompakte Icon-Zeile: Sicheres Bezahlen, Kostenloser Versand, Geld-zurück-Garantie, Qualitätssicherung
Checkout USP Bar	Horizontaler Balken mit Icon + Text-Paaren (Vorteils-Leiste)
Bestellbestätigung	Gestaltete Bestätigungsnachricht mit Icon und formatiertem Text
Nächste Schritte CTA	Kacheln mit Icons, die auf Shop-Seiten verlinken
Countdown-Angebot	Countdown-Timer mit CTA-Button (zählt ab Seitenaufruf)
Post-Purchase Umfrage	„Wie haben Sie uns gefunden?" mit auswählbaren Optionen
Produkt-Empfehlungen	Raster aus manuell ausgewählten Produkten des Katalogs

Hinweis: Sektionen auf der Checkout-Seite werden oberhalb und unterhalb des Checkout-Formulars eingefügt — nicht innerhalb der Formularfelder. Der Countdown-Timer zählt ab dem Seitenaufruf, nicht bis zu einem festen Enddatum.

Sektionen sortieren

Verschieben Sie Sektionen per Drag & Drop:

Greifen Sie eine Karte am Griff-Symbol (⠿) links.
Ziehen Sie die Karte an die gewünschte Position.
Lassen Sie los — die neue Reihenfolge wird automatisch gespeichert.

Sektion bearbeiten

Klappen Sie die gewünschte Karte auf.
Ändern Sie Einstellungen im Reiter Einstellungen:
- Text-Felder: Überschriften, Beschreibungen, Button-Texte
- Bild-Felder: Pfad zum Bild (z. B. /media/hero.jpg)
- Farben: Hex-Farbwähler oder RGBA-Eingabe
- Auswahl: Layout-Optionen, Spaltenanzahl, Ausrichtung
- Bereiche: Schieberegler für Höhe, Geschwindigkeit, Abstände
- Schalter: Funktionen ein-/ausschalten (z. B. Autoplay, Bewertungen anzeigen)
Bearbeiten Sie bei Bedarf Blöcke (z. B. einzelne FAQ-Einträge, Testimonials, Logos):
- Klicken Sie auf Block hinzufügen, um einen neuen Eintrag anzulegen.
- Bearbeiten Sie die Felder jedes Blocks.
- Entfernen Sie Blöcke mit dem Entfernen-Button.
Fügen Sie im Reiter CSS optional eigenes CSS hinzu — es wird automatisch auf diese Sektion beschränkt.

Sektion deaktivieren oder löschen

Deaktivieren: Schalten Sie den Schalter auf der Karte aus. Die Sektion bleibt gespeichert, wird aber im Shop nicht angezeigt.

Löschen:

Klappen Sie die Karte auf.
Klicken Sie auf Löschen.
Bestätigen Sie den Dialog.

Vorschau

Prüfen Sie Änderungen, bevor Kunden sie sehen:

Klicken Sie auf Vorschau.
Ein neuer Browser-Tab öffnet sich mit der gerenderten Seite.
Die Vorschau-URL kann mit anderen Personen geteilt werden — sie ist 1 Stunde lang gültig und erfordert keine Anmeldung.

Entwurf & Veröffentlichen

Änderungen im Section-Editor werden nicht sofort live geschaltet — sie werden zunächst als Entwurf gespeichert. Besucher Ihres Shops sehen immer die zuletzt veröffentlichte Version, bis Sie den Entwurf explizit veröffentlichen.

Entwurf speichern

Nehmen Sie Änderungen an Sektionen vor.
Klicken Sie in der Werkzeugleiste auf Entwurf speichern (oder drücken Sie Ctrl+S / Cmd+S in der Live-Vorschau).
Die Änderungen werden gespeichert — der live-Shop bleibt unverändert.
Ein bernsteinfarbenes Entwurf-Badge erscheint in der Werkzeugleiste und zeigt an, dass unveröffentlichte Änderungen vorliegen.
Jeder weitere Speichervorgang ersetzt den vorherigen Entwurf — pro Seite gibt es immer nur einen aktiven Entwurf.

Entwurf veröffentlichen

Klicken Sie auf Veröffentlichen (erscheint nur, wenn ein Entwurf vorhanden ist).
Der Entwurf ersetzt die live-Version — Shop-Besucher sehen die Änderungen sofort.
Ein Schnappschuss wird automatisch in der Versionshistorie angelegt (Bezeichnung: „Veröffentlicht — [Datum]").
Das Entwurf-Badge verschwindet.

Entwurf verwerfen

Klicken Sie auf Entwurf verwerfen (sichtbar, wenn ein Entwurf vorhanden ist).
Ein Bestätigungsdialog erscheint.
Klicken Sie auf Verwerfen — der Entwurf wird gelöscht und der Editor zeigt wieder den veröffentlichten Zustand.

Verworfene Entwürfe können nicht wiederhergestellt werden. Die veröffentlichte Version bleibt dabei unberührt.

Homepage-Vorlagen

Starten Sie mit einer vorgefertigten Homepage statt bei Null:

Klicken Sie im Section-Editor der Homepage auf Oder starten Sie mit einer Vorlage →.
Die Vorlagengalerie zeigt vier professionell gestaltete Startseiten:

Vorlage	Stil	Sektionen
Artisan Warm	Warm, handwerklich, serifen-betont	6–8
Editorial Luxury	Großzügige Weißräume, Lifestyle-Magazin	8–10
DTC Minimal	Clean, Off-White, Nachhaltigkeit	7–9
Quiet Luxe	Einzelne Schrift, warmes Taupe, Video-Hero	7–9

Klicken Sie auf Anwenden.
Bestätigen Sie den Dialog — alle bestehenden Homepage-Sektionen werden ersetzt.
Nach dem Anwenden können Sie jede Sektion wie gewohnt bearbeiten.

KI-Assistent

Der KI-Assistent hilft Ihnen, Seitenkonfigurationen mit einer externen KI (z. B. ChatGPT, Claude) zu erstellen.

Klicken Sie im Section-Editor auf KI-Assistent oder navigieren Sie zu Seiten → KI-Assistent.
Wählen Sie eine Prompt-Vorlage:
- Von WooCommerce/Shopify migrieren — Bestehende Layouts in Sektions-Konfiguration umwandeln
- Von Screenshot nachbauen — Screenshot analysieren und Konfiguration generieren
- Homepage beschreiben — Aus einer Beschreibung Sektionen erstellen
Klicken Sie auf Kopieren — der Prompt wird mit den aktuellen Schema-Regeln in die Zwischenablage kopiert.
Fügen Sie den Prompt in eine KI ein und hängen Sie ggf. einen Screenshot an.
Kopieren Sie die JSON-Antwort der KI.
Wechseln Sie in den JSON-Editor und fügen Sie das JSON ein.
Klicken Sie auf Validieren, dann auf Vorschau, und bei Zufriedenheit auf Speichern.

Häufige Probleme

Problem	Lösung
Sektion erscheint nicht im Shop	Prüfen Sie, ob der Schalter aktiviert ist
Bild wird nicht angezeigt	Stellen Sie sicher, dass der Pfad mit `/media/` beginnt
JSON-Wechsel zum visuellen Editor schlägt fehl	Korrigieren Sie JSON-Syntaxfehler (rote Markierungen im Editor)
Vorschau-Link funktioniert nicht	Der Link ist nach 1 Stunde abgelaufen — klicken Sie erneut auf Vorschau
Vorlage hat falsche Produkte	Produkt-Sektionen zeigen Platzhalter, bis Sie Kategorien/Produkte konfigurieren

Nächste Schritte

Live-Vorschau — Änderungen in Echtzeit im Storefront-Layout bearbeiten
Versionshistorie — Schnappschüsse anlegen, wiederherstellen und verwalten
Sektionstypen — Alle verfügbaren Sektionstypen und ihre Einstellungen
Design & Farben — Globale Farben und Schriften anpassen
Inhalte & Seiten — Statische Seiten verwalten