# Color-Input-Feld erstellen: Farbe änderbar machen

> Lass Nutzer im Design-Generator die Farbe einer Form oder eines Texts ändern, frei oder aus deiner Farbpalette.

Source: https://bluepic.io/de/help/input-fields/make-color-changeable  
Language: de  
Category: input-fields  
Last updated: 2026-10-22

Im Template-Editor legst du mit einem Color-Input-Feld fest, dass Nutzer im Design-Generator eine Farbe in deinem Design ändern können, zum Beispiel die Füllung einer Form oder die Farbe eines Texts. Du entscheidest, ob sie jede Farbe wählen dürfen oder nur Farben aus deiner Palette.

Das geht in drei Schritten:

1. Erstelle das Color-Input-Feld im Template-Editor.
2. Konfiguriere das Input-Feld im Input Fields View.
3. Teste das Input-Feld im Design-Generator.


## Color-Input-Feld erstellen

Rechtecke und Kreise haben zuerst keinen Rahmen. Soll der Rahmen änderbar sein, schalte ihn zuerst im Properties-Panel unter **Appearance** mit **Stroke Color** ein.

1. Klicke in der Toolbar oben auf das Quadrat mit dem Plus. Das ist das Werkzeug **Create Input Field**.

   ![Toolbar mit markiertem Werkzeug Create Input Field.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-create-input-field-01/public){width="894"}

2. Klicke auf die Form oder den Text, dessen Farbe Nutzer ändern sollen. Das geht auf dem Canvas oder im Layers-Panel. Ein Popup öffnet sich.

   > **Es öffnet sich kein Popup?** Liegt das Element in einer Gruppe oder Maske, wählt ein Klick auf dem Canvas die ganze Gruppe aus. Gruppen haben kein Popup. Auch gesperrte Elemente kannst du auf dem Canvas nicht anklicken. Drücke **Esc** und beginne wieder bei Schritt 1. Klicke dann im Layers-Panel auf das Element selbst.

3. Je nach Element geht es im Popup so weiter:

   - Für eine Form (Rechteck, Kreis oder Pfad): Wähle links im Popup aus, wie Nutzer die Farbe ändern dürfen.
     - **Fill Color**: Nutzer wählen jede Farbe für die Füllung.
     - **Stroke Color**: Nutzer wählen jede Farbe für den Rahmen.
     - **Select Fill Color**: Nutzer wählen die Füllung aus deiner Farbpalette.
     - **Select Stroke Color**: Nutzer wählen den Rahmen aus deiner Farbpalette.

     > **Die Form ist jetzt rot statt mit Farbverlauf?** **Fill Color** und **Select Fill Color** ersetzen einen Farbverlauf durch eine einzelne Farbe. Mach den Schritt rückgängig (Cmd + Z, unter Windows Strg + Z). Verbinde stattdessen die Farben der einzelnen Verlaufspunkte über **Select Custom Property**, so wie in Schritt 4 für Texte beschrieben.

     ![Popup für ein Rechteck mit Fill Color, Select Fill Color, Stroke Color und Select Stroke Color, rechts eine Vorschau des Input-Felds.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-color-input-fields-01/public){width="664"}

   - Für einen Text: Klicke links im Popup auf **Select Custom Property**. Für Texte schlägt das Popup keine Farbe vor. Du verbindest die Farbe im nächsten Schritt im Properties-Panel.

     ![Popup für einen Text mit markiertem Button Select Custom Property, rechts eine Vorschau des Input-Felds.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-select-custom-property-01/public?v=e3e9ae14){width="894"}

4. Je nach Element geht es so weiter:

   - Für eine Form: Klicke auf **Add Field**.
   - Für einen Text: Klicke im Properties-Panel im Abschnitt **Appearance** unter **Fill Color** bei **Color** auf den Farbwert. Das Popup **Create Field** öffnet sich. Wähle darin **Color** für jede Farbe oder **Color Selection** für deine Farbpalette.

     ![Abschnitt Appearance eines Texts: unter Fill Color ist der Farbwert bei Color markiert.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-make-color-changeable-02/public?v=30cdeb0e){width="894"}

   Das Color-Input-Feld ist jetzt erstellt und mit der Farbe verbunden.

## Input-Feld konfigurieren

Im Input Fields View siehst du alle Input-Felder deines Templates und konfigurierst sie.

1. Klicke oben rechts in der Toolbar auf **Input Fields**. Der Input Fields View öffnet sich.

   ![Toolbar oben rechts mit markiertem Button Input Fields.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-create-input-field-02/public){width="894"}

2. Schau ganz unten in der Liste nach deinem neuen Input-Feld. Es heißt **Pick Color** (bei Color) oder **Select Color** (bei Color Selection) und zeigt schon die Farbe, die vorher im Element war. Das ist der Standardwert.
3. Klicke auf den Namen des Input-Felds und tippe eine Überschrift ein, die sagt, welche Farbe Nutzer ändern, zum Beispiel „Hintergrundfarbe“.
4. Je nach Feldtyp geht es so weiter:

   - Für Color:
     - Es gibt nichts weiter einzustellen. Mach mit Schritt 11 weiter.
   - Für Color Selection:
     - Klicke auf das Zahnrad rechts im Input-Feld. Unter **Color options** steht deine Palette: die bisherige Farbe, Weiß und Schwarz.

   ![Einstellungen eines Color-Selection-Input-Felds: Color options, Add option, Type und Size.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-make-color-changeable-01/public?v=c973454f){width="342"}

5. Klicke auf **Add option**. Eine neue Farbe erscheint. Sie ist eine Kopie der letzten Farbe.
6. Klicke auf die neue Farbe und wähle deine Farbe aus. Wiederhole Schritt 5 und 6 für jede Farbe deiner Palette.
7. Klicke bei Farben, die du nicht brauchst, auf den Papierkorb in ihrer Zeile. Eine Farbe muss immer bleiben.
8. Wähle bei **Type**, wie Nutzer die Palette sehen: **Dropdown**, **Button Grid** oder **Carousel**.
9. Wähle bei **Size** die Größe der Farbfelder: **Small**, **Medium** oder **Large**.
10. Klicke auf **Done**. Die Einstellungen schließen sich.
11. Klicke oben rechts auf ×, um den Input Fields View zu schließen.

> **Achtung:** Der Input Fields View ist keine Vorschau. Wählst du hier eine andere Farbe, ändert das dein Template dauerhaft. Teste Input-Felder im Design-Generator.

## Input-Feld im Design-Generator testen

Der Design-Generator ist die Seite, auf der Nutzer dein Template ausfüllen und ihr Design exportieren können. Hier kannst du das Input-Feld gefahrlos testen: Was du dort auswählst, ändert dein Template nicht dauerhaft.

1. Wenn du mit deinen Input-Feldern fertig bist, klicke oben rechts auf **Share** und dann auf **Publish Template Link**. Hast du das Template schon veröffentlicht, heißt der Menüpunkt **Open Template Campaign**. Ein Popup mit den Share-Einstellungen öffnet sich. Dein Template ist jetzt über einen Link erreichbar.
2. Klicke auf **Copy URL** und öffne den Link in einem neuen Browser-Tab. Der Design-Generator öffnet sich.
3. Wähle in deinem Input-Feld eine andere Farbe. Prüfe, ob sich das Design so ändert, wie du es willst.

## Mehr dazu

- [Wie Elemente, Eigenschaften und Input-Felder zusammenhängen](https://bluepic.io/de/help/input-fields/elements-properties-input-fields)
- [Farben und Verläufe einstellen](https://bluepic.io/de/help/design-elements-and-tools/colors-and-gradients)
- [Color-Input-Felder](https://bluepic.io/de/help/input-fields/color-input-fields)
- [Auswahl anbieten: Nutzer aus festen Texten oder Bildern wählen lassen](https://bluepic.io/de/help/input-fields/offer-a-selection)