> ## Documentation Index > Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt > Use this file to discover all available pages before exploring further. # Ein Theme erstellen > Erstellen Sie ein standardisiertes Designsystem im Theme Builder, indem Sie Markenfarben, Schriftarten und wiederverwendbare Komponenten für die Widgets Ihres Teams definieren. Durch das Erstellen eines Themes können Sie ein standardisiertes Designsystem für Ihr Team definieren. Sie können bestimmte Farben festlegen, Markenschriftarten hochladen und Komponenten direkt im Theme Builder vorab erstellen. ## 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 betreffen wird. 4. (Optional) Fügen Sie eine Beschreibung und Tags hinzu. 5. Klicken Sie auf **Weiter**, um den **Theme Builder** zu öffnen. ### Farben definieren ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/colors.png) 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, werden die Standardfarben dieser Komponente automatisch zu Ihrer Liste der Theme-Farben hinzugefügt. Die hier hinzugefügten Farben sind im Widget Studio unter **Theme-Farben** verfügbar. #### Gesperrte Farben ändern Wenn eine Farbe derzeit von einer Komponente in Ihrem Theme verwendet wird, 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 ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/fonts.png) 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. Sie müssen mindestens eine Schriftart auswählen, um Ihrem Theme Komponenten hinzuzufügen. Wenn Sie eine Schriftart entfernen, die derzeit verwendet wird, verwendet das System standardmäßig die erste Schriftart in Ihrer Liste. So fügen Sie eine Schriftart hinzu: ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/add-a-font.png) 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 im Theme erlaubt sind. 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 ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/add-components.png) 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 Sobald eine Komponente zu Ihrer Liste hinzugefügt wurde, klicken Sie auf das Menü **Sekundäre Aktionen** (drei Punkte), um sie zu verwalten: ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/secondary-actions.png) * **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](../widgets/create-a-widget-with-the-widget-studio/edit-your-widgets) 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/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.