Wir bereiten die neuesten Anleitungen, Releases und Feature-Updates vor.
Anleitungen werden geladen
Wir bereiten die passenden Inhalte der Wissensdatenbank für diese Plattform vor.
UI Composer für individuelle Layouts konfigurieren | Chamevo Support Center
UI Composer für individuelle Layouts konfigurieren
Erstellen Sie individuelle Oberflächen für den Produkt-Customizer mit dem UI Composer – steuern Sie Layout, Module, Actions, die Symbolleiste für Elemente, Custom CSS und geführte Touren.
Aktualisiert am 28. April 20265 Min. Lesezeit
Mit dem UI Composer gestalten Sie die Oberfläche, die Ihre Kunden zum Personalisieren von Produkten verwenden. Sie legen fest, welche Panels, Tools und Actions angezeigt werden – und Sie können mehr als ein Interface erstellen, sodass ein Bekleidungsprodukt und ein graviertes Schild jeweils ein passendes Layout erhalten.
Jedes Produkt verwendet ein Standard-Interface, sofern Sie ihm kein anderes zuweisen. Sie können dieses Standard-Interface bearbeiten oder separate Interfaces für verschiedene Produktlinien erstellen.
Bevor Sie beginnen
Chamevo ist installiert und Ihre Lizenz ist aktiv.
Legen Sie das Ziel fest: Möchten Sie das Standard-Layout für alle Produkte anpassen oder ein eigenes Interface für eine bestimmte Produktlinie erstellen?
UI Composer öffnen
Öffnen Sie im WordPress-Adminbereich das Menü Chamevo.
Edit default UI – die Standardoberfläche ändern, die alle Produkte standardmäßig verwenden.
New interface – ein separates Interface erstellen. Geben Sie ihm einen aussagekräftigen Namen wie „Apparel Customizer“.
Duplicate – ein vorhandenes Interface als Ausgangspunkt kopieren.
Delete – ein Interface entfernen. Produkte, die diesem Interface zugewiesen sind, fallen auf das Standard-Interface zurück.
Nutzen Sie das Suchfeld, um ein Interface anhand seines Namens zu finden, wenn die Liste größer wird.
Klicken Sie auf Edit bei einem beliebigen Interface, um den Editor zu öffnen. Der Editor hat fünf Tabs – Layout, Modules, Actions, Custom CSS und Guided Tour – sowie und oben rechts.
Layout-Tab: Erscheinungsbild und die Symbolleiste für Elemente
Der Layout-Tab steuert, wie der Customizer aussieht und wie sich die Symbolleiste für Elemente verhält. Er umfasst acht Einstellungen:
Main Bar – das Modul-Panel als Sidebar oder als Dialog anzeigen.
Color Scheme – Light oder Dark für das Erscheinungsbild des Customizers.
UI Style – Ecken- und Oberflächenstil: Default, Rounded oder Sharp.
Container Shadow – Schattentiefe rund um den Customizer: No Shadow, SM, MD oder LG.
Initial Active Module – das Modul, das beim Laden des Customizers zuerst geöffnet wird. Wählen Sie None oder ein Modul aus.
Primary Color – die Akzentfarbe für Buttons und Hervorhebungen.
Toolbar Placement – wo die Symbolleiste für Elemente erscheint, wenn ein Kunde ein Element auswählt.
Exclude Tools – bestimmte Tools aus der Symbolleiste für Elemente ausblenden.
Festlegen, wo die Symbolleiste für Elemente erscheint
Wenn ein Kunde auf ein Element im Canvas klickt, erscheint eine Symbolleiste mit Bearbeitungsoptionen. Toolbar Placement legt fest, wo:
Smart – schwebt in der Nähe des ausgewählten Elements.
Sidebar – dockt die Symbolleiste im Sidebar-Panel an.
Hidden – blendet die Symbolleiste für Elemente vollständig aus.
Tools aus der Symbolleiste ausschließen
Verwenden Sie Exclude Tools, um Tools auszublenden, die Ihre Kunden nicht nutzen sollen. Klicken Sie auf das Feld und wählen Sie die zu entfernenden Tools aus:
Edit Text
Color
Font Family
Text Size
Text Format
Curved Text / Effects
Image Filters
Transform
Position / Layer Order
Duplicate
Remove Background
Remove
Blenden Sie beispielsweise Font Family und Color aus, um Text auf Ihre Markenschrift und -palette festzulegen. Ausgeschlossene Tools gelten nur für dieses Interface.
Modules-Tab: Die Panels der Hauptleiste auswählen
Modules sind die Panels in der Hauptnavigation des Customizers – etwa Products, Images, Text und Designs. Dieser Tab besteht aus zwei Bereichen:
Selected Modules – die in der Hauptleiste angezeigten Module. Ziehen Sie den Griff, um sie neu anzuordnen. Klicken Sie auf ×, um eines zu entfernen.
Available Modules – Module, die derzeit nicht angezeigt werden. Ziehen Sie eines in Selected Modules oder klicken Sie auf +, um es hinzuzufügen.
Neue Interfaces starten mit Products, Images, Text und Designs. Fügen Sie Module wie layers, names & numbers oder bulk variations hinzu, wenn Ihr Produkt sie benötigt. Siehe mit Textelementen arbeiten und die weiteren Modul-Anleitungen für die Funktion der einzelnen Panels.
Actions-Tab: Die Action-Leisten anordnen
Actions sind Buttons wie Download, Print, Undo, Redo und Info. Sie platzieren sie in zwei Leisten:
Top Bar – drei Zonen: Left, Center, Right.
Bottom Bar – zwei Zonen: Left, Right (für Zoom- und Ansichtssteuerung).
Wechseln Sie über das Segmented Control oben zwischen den beiden Leisten. So fügen Sie eine Action hinzu:
Klicken Sie auf eine Zone, um sie auszuwählen (sie wird hervorgehoben).
Klicken Sie auf + bei einer Action im Pool Available Actions.
Sie können eine Action auch direkt in eine Zone ziehen. Ziehen Sie Actions innerhalb einer Zone, um sie neu anzuordnen, oder klicken Sie auf ×, um eine zu entfernen.
Custom CSS-Tab: Das Styling feinabstimmen
Der Custom CSS-Tab ist ein Code-Editor für Style-Überschreibungen, die nur für dieses Interface gelten. Nutzen Sie ihn, wenn die Layout-Optionen nicht ausreichen – etwa um Abstände anzupassen oder ein bestimmtes Markenerscheinungsbild zu erreichen.
Richten Sie sich nach dem Geltungsbereich des Customizers und verwenden Sie die CSS-Variablen des Customizers für das Theming. Eine Referenz zu Selektoren und Variablen finden Sie unter Custom CSS für den Produkt-Customizer.
Guided Tour-Tab: Kunden durch den Customizer führen
Eine geführte Tour zeigt Erstkunden einen schrittweisen Rundgang durch den Customizer. Jeder Schritt zeigt auf einen Teil der Oberfläche und blendet einen kurzen Tooltip ein.
So erstellen Sie eine Tour:
Öffnen Sie den Tab Guided Tour.
Klicken Sie auf Add step.
Legen Sie das Target fest – das Element, auf das der Schritt zeigt. Wählen Sie im Dropdown ein Module oder eine Action.
Für alles, was nicht im Dropdown enthalten ist, aktivieren Sie Use CSS selector und geben Sie einen Selektor ein.
Geben Sie den Schritttext ein, den Kunden lesen werden.
Wiederholen Sie dies für jeden Schritt. Ziehen Sie Schritte am Griff, um sie neu anzuordnen. Nutzen Sie das Papierkorb-Symbol, um einen Schritt zu entfernen.
Wenn Ihr Shop in mehr als einer Sprache läuft, zeigt der Guided Tour-Tab für jede Sprache einen eigenen Sprach-Tab. Verfassen Sie den Tourtext separat pro Sprache.
Interface speichern und zuweisen
Klicken Sie im Editor auf Save, um Ihre Änderungen zu speichern.
Gehen Sie zu Chamevo → Settings → General → Display.
Wählen Sie unter Main User Interface Ihr Interface aus dem Dropdown aus. Damit legen Sie das Interface fest, das in Ihrem gesamten Shop verwendet wird. Wählen Sie Default, um das Standard-Interface zu verwenden.
Der Button Reset im Editor setzt das aktuelle Interface auf das Standard-Layout zurück. Nutzen Sie ihn, wenn eine Änderung schiefgeht, bevor Sie speichern.
Interface-Vorlagen als Ausgangspunkt
Diese Kombinationen aus Modules und Actions decken gängige Produkttypen ab:
Minimal (Gravur, einfacher Text): Behalten Sie nur das Text-Modul. Reduzieren Sie die Top Bar auf Undo, Redo und Download. Nutzen Sie Exclude Tools, um alles über die grundlegende Textbearbeitung hinaus auszublenden.
Vollausgestattet (Bekleidung, Produkte mit mehreren Elementen): Zeigen Sie Products, Images, Text und layers an. Fügen Sie Download, Print, Preview, Undo und Redo über die Top-Bar-Zonen hinweg hinzu.
Foto-fokussiert (Handyhüllen, Leinwanddrucke): Stellen Sie das Images-Modul in den Vordergrund, halten Sie Grafiken im Hintergrund und reduzieren Sie die Textoptionen.
Überprüfen Sie Ihr Setup
Öffnen Sie eine Produktseite in Ihrem Shop und beginnen Sie mit dem Anpassen.
Bestätigen Sie, dass Module, Actions und die Symbolleiste Ihrer Konfiguration entsprechen.
Wählen Sie ein Element aus und prüfen Sie, ob ausgeschlossene Tools nicht mehr vorhanden sind und die Symbolleiste dort erscheint, wo Sie es festgelegt haben.
Wenn Sie eine geführte Tour erstellt haben, bestätigen Sie, dass der Rundgang läuft und jeder Schritt an der richtigen Stelle zeigt.
Testen Sie auf Mobilgeräten, ob das Interface auf kleinen Bildschirmen nutzbar ist.
Fehlerbehebung
Änderungen erscheinen nicht im Shop. Bestätigen Sie, dass Sie auf Save geklickt haben, und prüfen Sie dann, ob Main User Interface in den Settings auf dieses Interface verweist (oder die eigene Interface-Einstellung des Produkts). Leeren Sie den Cache eines Caching-Plugins – siehe Caching-Probleme beheben, die den Produkt-Customizer verbergen.
Ein Tool wird trotz Ausschluss weiterhin angezeigt. Exclude Tools gilt pro Interface. Stellen Sie sicher, dass Sie das Interface bearbeitet haben, das das Produkt tatsächlich verwendet, und speichern Sie erneut.
Ein Modul fehlt im Frontend. Das Modul muss im Modules-Tab hinzugefügt und für das Produkt aktiviert sein. Manche Module hängen zusätzlich von Produkteinstellungen ab.
Ein Schritt der geführten Tour zeigt ins Leere. Das Ziel-Modul oder die Ziel-Action muss im Interface vorhanden sein. Wenn Sie einen CSS-Selektor verwendet haben, prüfen Sie, ob er auf ein Element im Customizer passt.
Ein gelöschtes Interface hat ein Produkt beeinträchtigt. Produkte fallen nach dem Löschen auf das Standard-Interface zurück. Weisen Sie bei Bedarf in den Produkteinstellungen ein anderes Interface zu.
F: Kann ich für verschiedene Produkte unterschiedliche Customizer-Layouts verwenden?
A: Ja. Erstellen Sie im UI Composer ein separates Interface und weisen Sie es dann über die Chamevo-Produkteinstellungen einem Produkt zu. Andere Produkte behalten das Standard-Interface.
F: Wie verhindere ich, dass Kunden die Schrift oder Farbe ändern?
A: Öffnen Sie den Layout-Tab des Interfaces und nutzen Sie Exclude Tools, um Font Family und Color aus der Symbolleiste für Elemente auszublenden.
F: Was passiert mit Produkten, wenn ich ein Interface lösche?
A: Sie fallen auf das Standard-Interface zurück. Weisen Sie in den Produkteinstellungen ein anderes Interface zu, falls Sie nicht das Standard-Interface verwenden möchten.
F: Muss ich programmieren, um eine geführte Tour einzurichten?
A: Nein. Fügen Sie Schritte im Guided Tour-Tab hinzu und wählen Sie jedes Target aus dem Module- oder Action-Dropdown. Ein CSS-Selektor ist optional für erweitertes Targeting.
