Wie passe ich das Aussehen an meine Webseite/meinen Shop an?

Voraussetzungen

• Sie haben einen Konfigurator angelegt

Benutzung Ihres Logos

• Gehen Sie zur Vorschau Ihres Konfigurators
• Klicken Sie auf das Stift Icon in der Nähe des Logos (oben links, falls Sie noch keines eingerichtet haben).
• Nun können Sie eine Bilddatei mit Ihrem Logo hochlagen. Sie wird dann über der Produktdarstellung angezeigt.
• Sie können noch Größe und Transparenz des Logos anpassen.
• Ebenfalls können Sie eine Webadresse angeben, die bei Klick auf das Logo geöffnet werden soll.
• Klicken Sie auf Speichern

Auswahl des Layouts

• Gehen Sie zum Editor Ihres Konfigurators
• Klicken Sie in der Mitte der Menüleiste oben auf das Desktop-Symbol. Sie erhalten nun die Desktop-Ansicht dargestellt.
• Klicken Sie auf das Stift-Symbol hinter der Auswahl Mobil/Desktop
• Hier sehen Sie eine Auswahl von 6 vorgefertigen Layouts für Ihren Konfigurator. Sie können eine wählen.
• Klicken Sie zum Schluss auf Anwenden und dann auch Speichern

Individuelles Layout erstellen

Falls Sie vor etwas HTML nicht zurückschrecken, können Sie hier auch ein individuelles Layout erstellen.

• Öffnen Sie dazu wieder die Layout-Auswahl
• Wechseln Sie dazu auf Layout erstellen.
• Wenn Sie möchten, können Sie das aktuell gewählten Layout hier importieren: Gewähltes Theme kopieren.
• Nun können Sie Ihr Layout mit etwas HTML und CSS anpassen.
• Klicken Sie zum Schluss auf Anwenden und dann auch Speichern

Welche Elemente stehen hier zur Verfügung?

Sie können im Layout fast alle HTML- und CSS-Konstrukte verwenden. Zusätzlich stehen Tags für spezifische Aufgaben bereit:

Name	Funktion
GroupsNavigation	Der Header mit den Konfigurationsschritten
VariablesNavigation	Variablen-Ebene für mobil
GroupsView	Die komplette Seitenleiste, design: accordion, topmenu oder onlysidebar
GroupOutlet	Zeigt das Layout des aktuellen Schrittes an (s.u.)
StandaloneVariable	Zeigt eine einzelne Variable an variableKey: key der Variable. sticky="true", wenn die Variable unabhängig von der aktiven Gruppe angezeigt werden soll.
StandaloneGroupWrapper	zeigt einen einzelnen Schritt an. groupKey: key der Gruppe
ValuesView	Anzeige der aktuellen Variable (mobil)
ComponentBreadcrumbs	Anzeige der Navigation bei Produktkomponenten
SceneView	3D- oder Bild-Anzeige
SocialShareButtons	Teilen-Knöpfe
SceneButtons	AR- und weitere Knöpfe
EditScene	Knopf für verschieben von Modellen
Price	Preis-Darstellung
ExitButtons	Darstellung der Aktions-Knöpfe
Logo	Das Logo
FullScreenButton	Knopf für Vollbilddarstellung
NavigationButtons	Weiter und Zurück
OcBranding	Die Branding-Komponente. Muss jederzeit sichtbar positioniert werden, auch wenn keine Sidebar verwendet wird.
LabelActionsDisplay	Anzeige von per Regel zugesteuerten Texten
TopLeft	Grid-Position, auch MidCenter, BotRight und alle Kombinationen davon

Verschiedene Layouts in verschiedenen Schritten

Wenn im Layout die Komponente GroupOutletverwendet wird, dann blendet sie den Inhalt des Layouts aus dem aktiven Konfiurationsschritt ein. Im Extremfall enthält das Layout nur diese Komponente, dann werden ausschliesslich die Layouts der Schritte angezeigt.

So fügen Sie einem Schritt ein Layout hinzu:

• Wechseln Sie zu dem Schritt
• klicken Sie auf das Stift-Symbol hinter dem Namen des Reiters
• Schalten Sie in der Seitenleiste Individuelles Gruppen-Design an
• Erfassen Sie das Layout in dem nun erschienen Eingabefeld.

Mobile Layouts

Ebenso wie das Desktop-Layout können Sie auch das Layout bestimmen, dass Ihr Konfigurator auf einem mobilen Gerät zeigt. Wählen Sie dazu einfach die mobile Ansicht im Editor und öffnen Sie dann die Layout-Auswahl

info

Derzeit stellen wir nur ein mobiles Standard-Layout zur Verfügung. Sie können aber bereits individuelle mobile Layouts erstellen.

Anpassen der Farben

• Gehen Sie zur Vorschau Ihres Konfigurators
• Wählen Sie in der Menüleiste oben den Punkt Design
• Klicken Sie auf Farben
• Hier können Sie zunächst wählen, ob Sie ein Helles Theme oder ein dunkes bevorzugen.
• Danach können Sie die vier Hauptfarben einstellen.
• Darunter können dann noch sehr feingranular weitere Farbwerte eingestellt werden.
• Klicken Sie auf Speichern

CSS nutzen

Wenn Sie sich mit CSS auskennen und das Design Ihres Konfigurators damit noch genauer bestimmen wollen, können Sie eine CSS-Datei angeben.

• Gehen Sie zur Vorschau Ihres Konfigurators
• Wählen Sie in der Menüleiste oben den Punkt Design
• Klicken Sie auf CSS
• Geben Sie die Adresse einer CSS-Datei an oder laden Sie ein hoch.
• Klicken Sie auf Speichern

tip

Weiterführende technische Erläuterungen lassen sich in der Entwickler-Dokumentation finden.