Skip to main content
Wenn Ihr Team Widgets ohne ein gemeinsames Designsystem erstellt, können Farben, Schriftarten und Komponenten projektübergreifend von Ihren Markenrichtlinien abweichen. Das Erstellen eines Themes im Theme Builder gibt Ihrem Team ein standardisiertes Designsystem: Sie legen bestimmte Farben fest, laden Markenschriftarten hoch und erstellen Komponenten vorab, die jedes Widget einheitlich verwendet.

​
Ein neues Theme erstellen

  1. Gehen Sie in der linken Seitenleiste zu Studio > Themes.
  2. Klicken Sie auf Theme hinzufügen.
  3. Geben Sie einen Namen für das Theme ein und wählen Sie die Projekte aus, die es betrifft.
  4. (Optional) Fügen Sie eine Beschreibung und Tags hinzu.
  5. Klicken Sie auf Weiter, um den Theme Builder zu öffnen.

​
Farben definieren

Abschnitt Farben im Theme Builder
Verwenden Sie den Abschnitt Farben, um die für Nutzer verfügbare Palette zu definieren. Um Nutzer auf bestimmte Markenfarben zu beschränken, schalten Sie Theme-Farben definieren auf AN.
  • Eine Farbe hinzufügen: Geben Sie einen Hex-Code ein oder klicken Sie auf das +-Symbol. Sie können eine Farbe aus dem Farbverlauf auswählen, die Deckkraft anpassen oder das Pipette-Werkzeug verwenden, um eine Probe von Ihrem Bildschirm zu nehmen.
  • Farben verwalten: Ziehen Sie Farben per Drag & Drop, um sie neu anzuordnen. Klicken Sie auf das Papierkorb-Symbol, um eine Farbe zu entfernen.
Wenn Sie dem Theme eine Komponente hinzufügen, während Theme-Farben definieren auf AN steht, fügt Kameleoon die Standardfarben dieser Komponente automatisch zu Ihrer Liste der Theme-Farben hinzu.
Die hier hinzugefügten Farben sind im Widget Studio unter Theme-Farben verfügbar.

​
Gesperrte Farben ändern

Wenn eine Komponente in Ihrem Theme eine Farbe derzeit verwendet, können Sie sie nicht löschen. Sie können die Farbe jedoch bearbeiten. Wenn Sie eine Farbe ändern, wird die Änderung automatisch auf jede Komponente im Theme angewendet, die diese Farbe verwendet.

​
Schriftarten hinzufügen

Abschnitt Schriftarten im Theme Builder
Bestimmen Sie im Abschnitt Schriftarten, auf welche unterschiedlichen Typografien Nutzer zugreifen können. Aktivieren Sie eine Schriftart aus der Liste, um sie in Ihr Theme aufzunehmen. Verwenden Sie die Suchleiste, um nach einer bestimmten Schriftart zu suchen. So fügen Sie eine Schriftart hinzu:
Dialog zum Hinzufügen einer Schriftart im Theme Builder
  1. Klicken Sie auf + Schriftart hinzufügen.
  2. Wählen Sie Ihre Schriftquelle:
    • Von Ihrer Website: Geben Sie den Namen der Schriftfamilie ein.
    • Link zu einer Schriftdatei: Geben Sie den Namen der Schriftfamilie und die URL zur Datei ein.
    • Einbettungscode: Geben Sie den Namen der Schriftfamilie und den Importcode ein.
  3. Klicken Sie auf Vorschau & Hinzufügen.
  4. Wählen Sie die Schriftstärken aus, die Sie einbeziehen möchten.
  5. Klicken Sie auf Hinzufügen.

​
Komponenten hinzufügen und verwalten

Im Abschnitt Komponenten können Sie Elemente (wie Schaltflächen, Bilder oder Formulare) für Ihr Team vorkonfigurieren und definieren, welche Komponenten zum Theme gehören. Sie können denselben Komponententyp mehrmals hinzufügen, um Variationen zu erstellen, zum Beispiel eine eindeutige „Senden”-Schaltfläche und eine „Abbrechen”-Schaltfläche.

​
Eine Komponente hinzufügen

  1. Klicken Sie neben Komponenten auf + Hinzufügen.
  2. Suchen Sie nach einer Komponente oder durchsuchen Sie Kategorien in der linken Seitenleiste.
  3. Wählen Sie die Komponenten aus, die Sie einbeziehen möchten.
  4. Klicken Sie auf Komponenten hinzufügen.

​
Komponenten bearbeiten und sperren

Nachdem Sie eine Komponente zu Ihrer Liste hinzugefügt haben, klicken Sie auf das Menü Sekundäre Aktionen (drei Punkte), um sie zu verwalten:
Menü Sekundäre Aktionen für eine Theme-Komponente
  • Umbenennen: Geben Sie der Komponente einen beschreibenden Namen (zum Beispiel „Primärer CTA”).
  • Bearbeiten: Öffnen Sie den Komponenteneditor, um Stile mit den Widget Studio-Werkzeugen anzupassen.
  • Sperren: Bearbeitungsberechtigungen für diese Komponente einschränken. Alternativ können Sie auf das Sperr-Symbol neben dem Menü Sekundäre Aktionen klicken, um eine Komponente zu sperren.
    • Wenn gesperrt: Nutzer können nur den Inhalt (Text oder Bilder), die Position und die Größe ändern. Sie können keine Designelemente wie Farben oder Rahmen gestalten.
    • Wenn entsperrt: Nutzer haben die volle Kontrolle, um das Design zu ändern.

​
Aktivieren Sie Ihr Theme

Wenn Sie die Konfiguration Ihres Themes abgeschlossen haben, klicken Sie in der oberen rechten Ecke auf Aktivieren. Das Theme ist nun zur Verwendung in Ihren Experimenten und Personalisierungen verfügbar. Um ein Theme später zu deaktivieren, klicken Sie auf das Status-Dropdown (Aktiv) und wählen Sie Deaktivieren oder verwenden Sie das Themes-Dashboard.