Der UI Composer ermöglicht es Ihnen, benutzerdefinierte Benutzeroberflächen-Layouts für den Product Customizer zu erstellen. Anstatt das Standard-Layout zu verwenden, können Sie genau steuern, wo Module, Aktionen und Panels erscheinen — und so ein maßgeschneidertes Erlebnis für Ihre Kunden schaffen.

Bevor Sie beginnen

• Chamevo ist installiert und Ihre Lizenz ist aktiv.
• Sie haben mindestens ein Produkt zum Testen des Layouts.

UI Composer öffnen

1. Gehen Sie zu Chamevo → UI Composer im WordPress-Admin.
2. Sie sehen den visuellen Layout-Builder.

Neues Layout erstellen

1. Klicken Sie im UI Composer auf Add New.
2. Geben Sie dem Layout einen Namen (z.B. „Minimal Layout", „Full Featured Layout").
3. Der Editor öffnet sich mit einem leeren Canvas, auf dem Sie Ihre Oberfläche erstellen können.

Komponenten hinzufügen

Der UI Composer bietet eine Reihe von Bausteinen, die Sie anordnen können:

• Module — die Inhaltspanels, mit denen Kunden interagieren (Images, Text, Graphics, Layers, Products usw.).
• Actions — Toolbar-Buttons (Undo, Redo, Download, Print, Reset, Zoom usw.).
• Container — strukturelle Wrapper, die Komponenten zusammenfassen.

Ziehen Sie Komponenten aus dem Panel der verfügbaren Elemente in Ihr Layout. Ordnen Sie sie in der gewünschten Reihenfolge und Position an.

Komponentenverhalten konfigurieren

Jede Komponente im Layout kann konfiguriert werden:

• Sichtbarkeit für bestimmte Bildschirmgrößen festlegen (ein-/ausblenden auf Mobilgeräten, Tablets, Desktop).
• Positionierung und Größe innerhalb des Layouts anpassen.
• Icon- und Label-Stil festlegen (nur Icon, nur Text, Icon + Text).

Layout Produkten zuweisen

Sobald Sie ein Layout im UI Composer erstellt haben:

1. Gehen Sie zu Chamevo → Settings → General → Display.
2. Wählen Sie unter Main User Interface Ihr benutzerdefiniertes Layout aus dem Dropdown.

Das ausgewählte Layout gilt global. Um das Standard-Layout zu verwenden, wählen Sie Default.

Häufige Layout-Muster

Minimales Layout

Für Produkte mit begrenzten Personalisierungsoptionen (z.B. Gravur, einfache Textpersonalisierung):

• Fügen Sie nur das Text-Modul (oder Text Layers) ein.