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.
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 Reset und Save oben rechts.
Layout-Tab: Erscheinungsbild, Abmessungen und die Symbolleiste für Elemente
Der Layout-Tab steuert, wie der Customizer aussieht, wie hoch er ist und wie sich die Symbolleiste für Elemente verhält. Er umfasst acht Einstellungen zum Erscheinungsbild sowie einen Bereich Dimensions:
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.
Die Höhe des Customizers je Gerät festlegen
Der Bereich Dimensions legt fest, wie hoch der Customizer auf Desktop, Tablet und Mobilgerät ist. Ohne CSS.
Oberhalb der Vorschau sitzt ein Schalter Desktop / Tablet / Mobile. Er erfüllt zwei Aufgaben: Er skaliert die Vorschau, sodass Sie das Layout in dieser Breite sehen, und er wählt aus, für welches Gerät die drei Dimensions-Felder gelten.
Wählen Sie über den Schalter ein Gerät aus.
Setzen Sie Height – die Zielhöhe des Customizers.
Setzen Sie Min Height – die kleinste Höhe, auf die er schrumpfen kann.
Setzen Sie Max Height – die größte Höhe, auf die er wachsen kann.
Wechseln Sie das Gerät, wiederholen Sie die Schritte und klicken Sie dann auf Save.
Jedes Feld nimmt eine Zahl und eine Einheit entgegen: px, %, vh, vw oder rem.
Min Height bildet die Untergrenze der Höhe, Max Height die Obergrenze. Beide setzen sich gegen die eingetragene Height durch. Bleibt der Customizer kürzer als eingestellt, erhöhen Sie Max Height – der eingebaute Standard 70vh gewinnt auf kurzen Bildschirmen. Für eine exakte Höhe unabhängig vom Viewport tragen Sie in alle drei Felder denselben Wert ein.
Leer bedeutet erben. Lassen Sie ein Feld leer, fällt genau dieser Wert auf das nächstbreitere Gerät zurück: Mobile erbt von Tablet, Tablet von Desktop, Desktop von den eingebauten Standardwerten (700px Height, 500px Min Height, 70vh Max Height). Die ausgegraute Zahl in einem leeren Feld zeigt, was geerbt wird. Vererbt wird pro Feld, nicht pro Gerät – eine Mobile-Height mit leerer Min Height nutzt weiterhin die Min Height von Tablet.
Die Breakpoints sind fest: Tablet gilt ab 1024px abwärts, Mobile ab 768px abwärts.
Für Höhen, die diese drei Felder nicht ausdrücken können – einen calc()-Ausdruck oder einen eigenen Breakpoint – nutzen Sie den Custom CSS-Tab. Von Hand geschriebenes CSS gewinnt gegenüber den Dimensions-Feldern, Sie können dort also einen einzelnen Wert überschreiben, ohne ihn hier zu löschen. Siehe Custom CSS für den Produkt-Customizer.
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.
Print Areas ist eines der verfügbaren Module. Es gibt Kunden ein Panel, das die Druckbereiche eines Produkts einzeln durchläuft, jeweils mit einer eigenen Vorschau des dortigen Artworks — nützlich bei mehrteiligen Produkten. Siehe Kunden durch die Druckbereiche führen.
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.
Hier geschriebene @media-Regeln wirken sich nicht auf die Vorschau aus. Der Geräteschalter emuliert ein Gerät, indem er den Vorschaurahmen skaliert, nicht das Browserfenster — Media Queries greifen darin also nie. Testen Sie responsives CSS im Shop bei einer echten Fensterbreite.
CSS in diesem Tab wird nach den Höhenregeln geladen, die der Dimensions-Bereich erzeugt. Ein hier gesetztes Höhen-Token überschreibt daher die Dimensions-Felder.
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.
Falls Sie Dimensions gesetzt haben, prüfen Sie die Höhe in einem Desktop-Browser und verkleinern Sie das Fenster anschließend unter 1024px und 768px, um zu bestätigen, dass die Tablet- und Mobile-Werte übernehmen.
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.
Der Customizer ist kürzer als die eingetragene Height. Max Height begrenzt ihn nach oben und liegt standardmäßig bei 70vh, auf einem kurzen Bildschirm gewinnt also die Obergrenze. Erhöhen Sie Max Height für dieses Gerät.
Ein Dimensions-Wert bleibt wirkungslos. Bestätigen Sie, dass Sie ihn beim im Schalter ausgewählten Gerät gesetzt und gespeichert haben und dass kein Höhen-Token im Custom CSS-Tab ihn überschreibt. Leeren Sie anschließend den Cache eines Caching-Plugins.
Meine @media-Regel wirkt im Shop, aber nicht in der Vorschau. Das ist zu erwarten. Der Geräteschalter skaliert den Vorschaurahmen, nicht das Browserfenster, Media Queries greifen darin also nicht.
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.
F: Wie mache ich den Produkt-Customizer höher?
A: Öffnen Sie den Layout-Tab des Interfaces, scrollen Sie zu Dimensions und setzen Sie Height. Erhöhen Sie auch Max Height — der Wert begrenzt die Höhe nach oben und liegt standardmäßig bei 70vh.
F: Kann ich Kunden auf Mobilgeräten eine andere Customizer-Höhe geben?
A: Ja. Stellen Sie den Geräteschalter oberhalb der Vorschau auf Mobile und setzen Sie die drei Dimensions-Felder. Mobile-Werte gelten ab 768px abwärts.
