[{"data":1,"prerenderedAt":547},["ShallowReactive",2],{"help-article-\u002Fde\u002Fhelp\u002Finput-fields\u002Fmake-color-changeable":3},{"id":4,"title":5,"body":6,"category":529,"description":530,"extension":531,"keywords":532,"meta":537,"navigation":538,"order":539,"path":540,"published":541,"rawbody":542,"seo":543,"stem":544,"updated":545,"__hash__":546},"helpDe\u002Fhelp\u002Finput-fields\u002Fmake-color-changeable.de.md","Color-Input-Feld erstellen: Farbe änderbar machen",{"type":7,"value":8,"toc":522},"minimark",[9,22,25,46,51,67,273,277,282,437,448,452,457,492],[10,11,12,13,17,18,21],"p",{},"Im ",[14,15,16],"place",{},"Template-Editor"," legst du mit einem Color-Input-Feld fest, dass Nutzer im ",[14,19,20],{},"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.",[10,23,24],{},"Das geht in drei Schritten:",[26,27,28,35,41],"ol",{},[29,30,31,32,34],"li",{},"Erstelle das Color-Input-Feld im ",[14,33,16],{},".",[29,36,37,38,34],{},"Konfiguriere das Input-Feld im ",[14,39,40],{},"Input Fields View",[29,42,43,44,34],{},"Teste das Input-Feld im ",[14,45,20],{},[47,48,50],"h2",{"id":49},"color-input-feld-erstellen","Color-Input-Feld erstellen",[10,52,53,54,57,58,62,63,66],{},"Rechtecke und Kreise haben zuerst keinen Rahmen. Soll der Rahmen änderbar sein, schalte ihn zuerst im ",[14,55,56],{},"Properties-Panel"," unter ",[59,60,61],"strong",{},"Appearance"," mit ",[59,64,65],{},"Stroke Color"," ein.",[26,68,69,92,133,215],{},[29,70,71,75,76,79,80,34,83,86],{},[72,73,74],"click",{},"Klicke"," in der ",[14,77,78],{},"Toolbar"," oben auf das Quadrat mit dem Plus. Das ist das Werkzeug ",[59,81,82],{},"Create Input Field",[84,85],"br",{},[87,88],"img",{"alt":89,"src":90,"width":91},"Toolbar mit markiertem Werkzeug Create Input Field.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-01\u002Fpublic",894,[29,93,94,96,97,100,101,104,105],{},[72,95,74],{}," auf die Form oder den Text, dessen Farbe Nutzer ändern sollen. Das geht auf dem ",[14,98,99],{},"Canvas"," oder im ",[14,102,103],{},"Layers-Panel",". Ein Popup öffnet sich.",[106,107,109],"trouble",{"symptom":108},"Es öffnet sich kein Popup?",[10,110,111,112,114,115,117,118,122,123,126,127,129,130,132],{},"Liegt das Element in einer Gruppe oder Maske, wählt ein Klick auf dem ",[14,113,99],{}," die ganze Gruppe aus. Gruppen haben kein Popup. Auch gesperrte Elemente kannst du auf dem ",[14,116,99],{}," nicht anklicken. ",[119,120,121],"press",{},"Drücke"," ",[59,124,125],{},"Esc"," und beginne wieder bei Schritt 1. ",[72,128,74],{}," dann im ",[14,131,103],{}," auf das Element selbst.",[29,134,135,136],{},"Je nach Element geht es im Popup so weiter:",[137,138,139,196],"ul",{},[29,140,141,144,145,148,149,174,189,191],{},[142,143],"right",{}," Für eine Form (Rechteck, Kreis oder Pfad): ",[72,146,147],{},"Wähle"," links im Popup aus, wie Nutzer die Farbe ändern dürfen.",[137,150,151,157,162,168],{},[29,152,153,156],{},[59,154,155],{},"Fill Color",": Nutzer wählen jede Farbe für die Füllung.",[29,158,159,161],{},[59,160,65],{},": Nutzer wählen jede Farbe für den Rahmen.",[29,163,164,167],{},[59,165,166],{},"Select Fill Color",": Nutzer wählen die Füllung aus deiner Farbpalette.",[29,169,170,173],{},[59,171,172],{},"Select Stroke Color",": Nutzer wählen den Rahmen aus deiner Farbpalette.",[106,175,177],{"symptom":176},"Die Form ist jetzt rot statt mit Farbverlauf?",[10,178,179,181,182,184,185,188],{},[59,180,155],{}," und ",[59,183,166],{}," 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 ",[59,186,187],{},"Select Custom Property",", so wie in Schritt 4 für Texte beschrieben.",[84,190],{},[87,192],{"alt":193,"src":194,"width":195},"Popup für ein Rechteck mit Fill Color, Select Fill Color, Stroke Color und Select Stroke Color, rechts eine Vorschau des Input-Felds.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-color-input-fields-01\u002Fpublic",664,[29,197,198,200,201,203,204,206,207,34,209,211],{},[142,199],{}," Für einen Text: ",[72,202,74],{}," links im Popup auf ",[59,205,187],{},". Für Texte schlägt das Popup keine Farbe vor. Du verbindest die Farbe im nächsten Schritt im ",[14,208,56],{},[84,210],{},[87,212],{"alt":213,"src":214,"width":91},"Popup für einen Text mit markiertem Button Select Custom Property, rechts eine Vorschau des Input-Felds.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-select-custom-property-01\u002Fpublic?v=e3e9ae14",[29,216,217,218,270,272],{},"Je nach Element geht es so weiter:",[137,219,220,231],{},[29,221,222,224,225,227,228,34],{},[142,223],{}," Für eine Form: ",[72,226,74],{}," auf ",[59,229,230],{},"Add Field",[29,232,233,200,235,237,238,240,241,57,243,245,246,249,250,253,254,256,257,259,260,263,264,266],{},[142,234],{},[72,236,74],{}," im ",[14,239,56],{}," im Abschnitt ",[59,242,61],{},[59,244,155],{}," bei ",[59,247,248],{},"Color"," auf den Farbwert. Das Popup ",[59,251,252],{},"Create Field"," öffnet sich. ",[72,255,147],{}," darin ",[59,258,248],{}," für jede Farbe oder ",[59,261,262],{},"Color Selection"," für deine Farbpalette.",[84,265],{},[87,267],{"alt":268,"src":269,"width":91},"Abschnitt Appearance eines Texts: unter Fill Color ist der Farbwert bei Color markiert.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-make-color-changeable-02\u002Fpublic?v=30cdeb0e",[84,271],{},"Das Color-Input-Feld ist jetzt erstellt und mit der Farbe verbunden.",[47,274,276],{"id":275},"input-feld-konfigurieren","Input-Feld konfigurieren",[10,278,12,279,281],{},[14,280,40],{}," siehst du alle Input-Felder deines Templates und konfigurierst sie.",[26,283,284,304,319,324,362,370,375,380,399,416,424],{},[29,285,286,288,289,227,291,294,295,297,298,300],{},[72,287,74],{}," oben rechts in der ",[14,290,78],{},[59,292,293],{},"Input Fields",". Der ",[14,296,40],{}," öffnet sich.",[84,299],{},[87,301],{"alt":302,"src":303,"width":91},"Toolbar oben rechts mit markiertem Button Input Fields.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-02\u002Fpublic",[29,305,306,310,311,314,315,318],{},[307,308,309],"look",{},"Schau"," ganz unten in der Liste nach deinem neuen Input-Feld. Es heißt ",[59,312,313],{},"Pick Color"," (bei Color) oder ",[59,316,317],{},"Select Color"," (bei Color Selection) und zeigt schon die Farbe, die vorher im Element war. Das ist der Standardwert.",[29,320,321,323],{},[72,322,74],{}," auf den Namen des Input-Felds und tippe eine Überschrift ein, die sagt, welche Farbe Nutzer ändern, zum Beispiel „Hintergrundfarbe“.",[29,325,326,327,355,357],{},"Je nach Feldtyp geht es so weiter:",[137,328,329,339],{},[29,330,331,333,334],{},[142,332],{}," Für Color:\n",[137,335,336],{},[29,337,338],{},"Es gibt nichts weiter einzustellen. Mach mit Schritt 11 weiter.",[29,340,341,343,344],{},[142,342],{}," Für Color Selection:\n",[137,345,346],{},[29,347,348,350,351,354],{},[72,349,74],{}," auf das Zahnrad rechts im Input-Feld. Unter ",[59,352,353],{},"Color options"," steht deine Palette: die bisherige Farbe, Weiß und Schwarz.",[84,356],{},[87,358],{"alt":359,"src":360,"width":361},"Einstellungen eines Color-Selection-Input-Felds: Color options, Add option, Type und Size.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-make-color-changeable-01\u002Fpublic?v=c973454f",342,[29,363,364,227,366,369],{},[72,365,74],{},[59,367,368],{},"Add option",". Eine neue Farbe erscheint. Sie ist eine Kopie der letzten Farbe.",[29,371,372,374],{},[72,373,74],{}," auf die neue Farbe und wähle deine Farbe aus. Wiederhole Schritt 5 und 6 für jede Farbe deiner Palette.",[29,376,377,379],{},[72,378,74],{}," bei Farben, die du nicht brauchst, auf den Papierkorb in ihrer Zeile. Eine Farbe muss immer bleiben.",[29,381,382,245,384,387,388,391,392,395,396,34],{},[72,383,147],{},[59,385,386],{},"Type",", wie Nutzer die Palette sehen: ",[59,389,390],{},"Dropdown",", ",[59,393,394],{},"Button Grid"," oder ",[59,397,398],{},"Carousel",[29,400,401,245,403,406,407,391,410,395,413,34],{},[72,402,147],{},[59,404,405],{},"Size"," die Größe der Farbfelder: ",[59,408,409],{},"Small",[59,411,412],{},"Medium",[59,414,415],{},"Large",[29,417,418,227,420,423],{},[72,419,74],{},[59,421,422],{},"Done",". Die Einstellungen schließen sich.",[29,425,426,428,429,433,434,436],{},[72,427,74],{}," oben rechts auf ",[430,431,432],"close",{},"×",", um den ",[14,435,40],{}," zu schließen.",[438,439,440],"warning",{},[10,441,442,443,445,446,34],{},"Der ",[14,444,40],{}," ist keine Vorschau. Wählst du hier eine andere Farbe, ändert das dein Template dauerhaft. Teste Input-Felder im ",[14,447,20],{},[47,449,451],{"id":450},"input-feld-im-design-generator-testen","Input-Feld im Design-Generator testen",[10,453,442,454,456],{},[14,455,20],{}," 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.",[26,458,459,477,487],{},[29,460,461,462,428,465,468,469,472,473,476],{},"Wenn du mit deinen Input-Feldern fertig bist, ",[72,463,464],{},"klicke",[59,466,467],{},"Share"," und dann auf ",[59,470,471],{},"Publish Template Link",". Hast du das Template schon veröffentlicht, heißt der Menüpunkt ",[59,474,475],{},"Open Template Campaign",". Ein Popup mit den Share-Einstellungen öffnet sich. Dein Template ist jetzt über einen Link erreichbar.",[29,478,479,227,481,484,485,297],{},[72,480,74],{},[59,482,483],{},"Copy URL"," und öffne den Link in einem neuen Browser-Tab. Der ",[14,486,20],{},[29,488,489,491],{},[72,490,147],{}," in deinem Input-Feld eine andere Farbe. Prüfe, ob sich das Design so ändert, wie du es willst.",[493,494,495],"related",{},[137,496,497,504,510,516],{},[29,498,499],{},[500,501,503],"a",{"href":502},"\u002Fde\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields","Wie Elemente, Eigenschaften und Input-Felder zusammenhängen",[29,505,506],{},[500,507,509],{"href":508},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients","Farben und Verläufe einstellen",[29,511,512],{},[500,513,515],{"href":514},"\u002Fde\u002Fhelp\u002Finput-fields\u002Fcolor-input-fields","Color-Input-Felder",[29,517,518],{},[500,519,521],{"href":520},"\u002Fde\u002Fhelp\u002Finput-fields\u002Foffer-a-selection","Auswahl anbieten: Nutzer aus festen Texten oder Bildern wählen lassen",{"title":523,"searchDepth":524,"depth":524,"links":525},"",2,[526,527,528],{"id":49,"depth":524,"text":50},{"id":275,"depth":524,"text":276},{"id":450,"depth":524,"text":451},"input-fields","Lass Nutzer im Design-Generator die Farbe einer Form oder eines Texts ändern, frei oder aus deiner Farbpalette.","md",[248,262,533,534,155,65,166,172,535,536,353],"Farbe","Farbpalette","Textfarbe","Markenfarben",{},true,15,"\u002Fhelp\u002Finput-fields\u002Fmake-color-changeable.de","2026-10-13","---\ntitle: \"Color-Input-Feld erstellen: Farbe änderbar machen\"\ndescription: \"Lass Nutzer im Design-Generator die Farbe einer Form oder eines Texts ändern, frei oder aus deiner Farbpalette.\"\ncategory: input-fields\norder: 15\nkeywords: [\"Color\", \"Color Selection\", \"Farbe\", \"Farbpalette\", \"Fill Color\", \"Stroke Color\", \"Select Fill Color\", \"Select Stroke Color\", \"Textfarbe\", \"Markenfarben\", \"Color options\"]\n---\n\nIm :place[Template-Editor] legst du mit einem Color-Input-Feld fest, dass Nutzer im :place[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.\n\nDas geht in drei Schritten:\n\n1. Erstelle das Color-Input-Feld im :place[Template-Editor].\n2. Konfiguriere das Input-Feld im :place[Input Fields View].\n3. Teste das Input-Feld im :place[Design-Generator].\n\n\n## Color-Input-Feld erstellen\n\nRechtecke und Kreise haben zuerst keinen Rahmen. Soll der Rahmen änderbar sein, schalte ihn zuerst im :place[Properties-Panel] unter **Appearance** mit **Stroke Color** ein.\n\n1. :click[Klicke] in der :place[Toolbar] oben auf das Quadrat mit dem Plus. Das ist das Werkzeug **Create Input Field**.\n\n   ![Toolbar mit markiertem Werkzeug Create Input Field.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-01\u002Fpublic){width=\"894\"}\n\n2. :click[Klicke] auf die Form oder den Text, dessen Farbe Nutzer ändern sollen. Das geht auf dem :place[Canvas] oder im :place[Layers-Panel]. Ein Popup öffnet sich.\n\n   ::trouble{symptom=\"Es öffnet sich kein Popup?\"}\n   Liegt das Element in einer Gruppe oder Maske, wählt ein Klick auf dem :place[Canvas] die ganze Gruppe aus. Gruppen haben kein Popup. Auch gesperrte Elemente kannst du auf dem :place[Canvas] nicht anklicken. :press[Drücke] **Esc** und beginne wieder bei Schritt 1. :click[Klicke] dann im :place[Layers-Panel] auf das Element selbst.\n   ::\n\n3. Je nach Element geht es im Popup so weiter:\n\n   - :right Für eine Form (Rechteck, Kreis oder Pfad): :click[Wähle] links im Popup aus, wie Nutzer die Farbe ändern dürfen.\n     - **Fill Color**: Nutzer wählen jede Farbe für die Füllung.\n     - **Stroke Color**: Nutzer wählen jede Farbe für den Rahmen.\n     - **Select Fill Color**: Nutzer wählen die Füllung aus deiner Farbpalette.\n     - **Select Stroke Color**: Nutzer wählen den Rahmen aus deiner Farbpalette.\n\n     ::trouble{symptom=\"Die Form ist jetzt rot statt mit Farbverlauf?\"}\n     **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.\n     ::\n\n     ![Popup für ein Rechteck mit Fill Color, Select Fill Color, Stroke Color und Select Stroke Color, rechts eine Vorschau des Input-Felds.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-color-input-fields-01\u002Fpublic){width=\"664\"}\n\n   - :right Für einen Text: :click[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 :place[Properties-Panel].\n\n     ![Popup für einen Text mit markiertem Button Select Custom Property, rechts eine Vorschau des Input-Felds.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-select-custom-property-01\u002Fpublic?v=e3e9ae14){width=\"894\"}\n\n4. Je nach Element geht es so weiter:\n\n   - :right Für eine Form: :click[Klicke] auf **Add Field**.\n   - :right Für einen Text: :click[Klicke] im :place[Properties-Panel] im Abschnitt **Appearance** unter **Fill Color** bei **Color** auf den Farbwert. Das Popup **Create Field** öffnet sich. :click[Wähle] darin **Color** für jede Farbe oder **Color Selection** für deine Farbpalette.\n\n     ![Abschnitt Appearance eines Texts: unter Fill Color ist der Farbwert bei Color markiert.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-make-color-changeable-02\u002Fpublic?v=30cdeb0e){width=\"894\"}\n\n   Das Color-Input-Feld ist jetzt erstellt und mit der Farbe verbunden.\n\n## Input-Feld konfigurieren\n\nIm :place[Input Fields View] siehst du alle Input-Felder deines Templates und konfigurierst sie.\n\n1. :click[Klicke] oben rechts in der :place[Toolbar] auf **Input Fields**. Der :place[Input Fields View] öffnet sich.\n\n   ![Toolbar oben rechts mit markiertem Button Input Fields.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-02\u002Fpublic){width=\"894\"}\n\n2. :look[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.\n3. :click[Klicke] auf den Namen des Input-Felds und tippe eine Überschrift ein, die sagt, welche Farbe Nutzer ändern, zum Beispiel „Hintergrundfarbe“.\n4. Je nach Feldtyp geht es so weiter:\n\n   - :right Für Color:\n     - Es gibt nichts weiter einzustellen. Mach mit Schritt 11 weiter.\n   - :right Für Color Selection:\n     - :click[Klicke] auf das Zahnrad rechts im Input-Feld. Unter **Color options** steht deine Palette: die bisherige Farbe, Weiß und Schwarz.\n\n   ![Einstellungen eines Color-Selection-Input-Felds: Color options, Add option, Type und Size.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-make-color-changeable-01\u002Fpublic?v=c973454f){width=\"342\"}\n\n5. :click[Klicke] auf **Add option**. Eine neue Farbe erscheint. Sie ist eine Kopie der letzten Farbe.\n6. :click[Klicke] auf die neue Farbe und wähle deine Farbe aus. Wiederhole Schritt 5 und 6 für jede Farbe deiner Palette.\n7. :click[Klicke] bei Farben, die du nicht brauchst, auf den Papierkorb in ihrer Zeile. Eine Farbe muss immer bleiben.\n8. :click[Wähle] bei **Type**, wie Nutzer die Palette sehen: **Dropdown**, **Button Grid** oder **Carousel**.\n9. :click[Wähle] bei **Size** die Größe der Farbfelder: **Small**, **Medium** oder **Large**.\n10. :click[Klicke] auf **Done**. Die Einstellungen schließen sich.\n11. :click[Klicke] oben rechts auf :close[×], um den :place[Input Fields View] zu schließen.\n\n::warning\nDer :place[Input Fields View] ist keine Vorschau. Wählst du hier eine andere Farbe, ändert das dein Template dauerhaft. Teste Input-Felder im :place[Design-Generator].\n::\n\n## Input-Feld im Design-Generator testen\n\nDer :place[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.\n\n1. Wenn du mit deinen Input-Feldern fertig bist, :click[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.\n2. :click[Klicke] auf **Copy URL** und öffne den Link in einem neuen Browser-Tab. Der :place[Design-Generator] öffnet sich.\n3. :click[Wähle] in deinem Input-Feld eine andere Farbe. Prüfe, ob sich das Design so ändert, wie du es willst.\n\n::related\n- [Wie Elemente, Eigenschaften und Input-Felder zusammenhängen](\u002Fde\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields)\n- [Farben und Verläufe einstellen](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients)\n- [Color-Input-Felder](\u002Fde\u002Fhelp\u002Finput-fields\u002Fcolor-input-fields)\n- [Auswahl anbieten: Nutzer aus festen Texten oder Bildern wählen lassen](\u002Fde\u002Fhelp\u002Finput-fields\u002Foffer-a-selection)\n::\n",{"title":5,"description":530},"help\u002Finput-fields\u002Fmake-color-changeable.de","2026-10-22","gs16nXbsUC_X3CGh1Qi-Mso-Rn5Xuc94SdR-KHhAbfY",1792680564114]