[{"data":1,"prerenderedAt":534},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Finput-fields\u002Fmake-color-changeable":3},{"id":4,"title":5,"body":6,"category":516,"description":517,"extension":518,"keywords":519,"meta":524,"navigation":525,"order":526,"path":527,"published":528,"rawbody":529,"seo":530,"stem":531,"updated":532,"__hash__":533},"help\u002Fhelp\u002Finput-fields\u002Fmake-color-changeable.md","Create a color input field: make a color changeable",{"type":7,"value":8,"toc":509},"minimark",[9,22,25,38,43,59,262,266,273,426,436,440,445,479],[10,11,12,13,17,18,21],"p",{},"In the ",[14,15,16],"place",{},"template editor",", a color input field lets users change a color in your design in the ",[14,19,20],{},"design generator",", for example the fill of a shape or the color of a text. You decide whether they may pick any color or only colors from your palette.",[10,23,24],{},"This takes three steps:",[26,27,28,32,35],"ol",{},[29,30,31],"li",{},"Create the color input field in the template editor.",[29,33,34],{},"Configure the input field in the Input Fields view.",[29,36,37],{},"Test the input field in the design generator.",[39,40,42],"h2",{"id":41},"create-the-color-input-field","Create the color input field",[10,44,45,46,50,51,54,55,58],{},"Rectangles and circles start without a stroke. If the stroke should be changeable, turn it on first with ",[47,48,49],"strong",{},"Stroke Color"," under ",[47,52,53],{},"Appearance"," in the ",[14,56,57],{},"properties panel",".",[26,60,61,85,125,207],{},[29,62,63,67,68,71,72,75,76,79],{},[64,65,66],"click",{},"Click"," the square with the plus in the ",[14,69,70],{},"toolbar"," at the top. This is the ",[47,73,74],{},"Create Input Field"," tool.",[77,78],"br",{},[80,81],"img",{"alt":82,"src":83,"width":84},"Toolbar with the Create Input Field tool highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-01\u002Fpublic",894,[29,86,87,89,90,93,94,97,98],{},[64,88,66],{}," the shape or text whose color users should change. You can click it on the ",[14,91,92],{},"canvas"," or in the ",[14,95,96],{},"layers panel",". A popup opens.",[99,100,102],"trouble",{"symptom":101},"No popup opens?",[10,103,104,105,107,108,110,111,115,116,119,120,122,123,58],{},"If the element sits inside a group or mask, a click on the ",[14,106,92],{}," selects the whole group. Groups have no popup. Locked elements can't be clicked on the ",[14,109,92],{}," either. ",[112,113,114],"press",{},"Press"," ",[47,117,118],{},"Esc"," and start again at step 1. Then ",[64,121,64],{}," the element itself in the ",[14,124,96],{},[29,126,127,128],{},"Depending on the element, go on in the popup like this:",[129,130,131,188],"ul",{},[29,132,133,136,137,140,141,166,181,183],{},[134,135],"right",{}," For a shape (rectangle, circle or path): ",[64,138,139],{},"Choose"," on the left of the popup how users may change the color.",[129,142,143,149,154,160],{},[29,144,145,148],{},[47,146,147],{},"Fill Color",": users pick any color for the fill.",[29,150,151,153],{},[47,152,49],{},": users pick any color for the stroke.",[29,155,156,159],{},[47,157,158],{},"Select Fill Color",": users pick the fill from your color palette.",[29,161,162,165],{},[47,163,164],{},"Select Stroke Color",": users pick the stroke from your color palette.",[99,167,169],{"symptom":168},"The shape is red now instead of a gradient?",[10,170,171,173,174,176,177,180],{},[47,172,147],{}," and ",[47,175,158],{}," replace a gradient with a single color. Undo the step (Cmd + Z, on Windows Ctrl + Z). Connect the colors of the single gradient stops with ",[47,178,179],{},"Select Custom Property"," instead, as described in step 4 for texts.",[77,182],{},[80,184],{"alt":185,"src":186,"width":187},"Popup for a rectangle with Fill Color, Select Fill Color, Stroke Color and Select Stroke Color, and a preview of the input field on the right.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-color-input-fields-01\u002Fpublic",664,[29,189,190,192,193,115,195,197,198,200,201,203],{},[134,191],{}," For a text: ",[64,194,66],{},[47,196,179],{}," on the left of the popup. For texts, the popup doesn't suggest a color. You connect the color in the ",[14,199,57],{}," in the next step.",[77,202],{},[80,204],{"alt":205,"src":206,"width":84},"Popup for a text with the Select Custom Property button highlighted, and a preview of the input field on the right.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-select-custom-property-01\u002Fpublic?v=e3e9ae14",[29,208,209,210,259,261],{},"Depending on the element, go on like this:",[129,211,212,222],{},[29,213,214,216,217,115,219,58],{},[134,215],{}," For a shape: ",[64,218,66],{},[47,220,221],{},"Add Field",[29,223,224,192,226,228,229,50,232,54,234,236,237,239,240,243,244,115,246,248,249,252,253,255],{},[134,225],{},[64,227,66],{}," the color value next to ",[47,230,231],{},"Color",[47,233,147],{},[47,235,53],{}," section of the ",[14,238,57],{},". The ",[47,241,242],{},"Create Field"," popup opens. ",[64,245,139],{},[47,247,231],{}," for any color or ",[47,250,251],{},"Color Selection"," for your color palette.",[77,254],{},[80,256],{"alt":257,"src":258,"width":84},"Appearance section of a text: the color value at Color under Fill Color is highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-make-color-changeable-02\u002Fpublic?v=30cdeb0e",[77,260],{},"The color input field is now created and connected to the color.",[39,263,265],{"id":264},"configure-the-input-field","Configure the input field",[10,267,268,269,272],{},"The ",[14,270,271],{},"Input Fields view"," shows all input fields of your template, and you configure them there.",[26,274,275,294,309,314,352,360,365,370,389,407,415],{},[29,276,277,115,279,282,283,239,285,287,288,290],{},[64,278,66],{},[47,280,281],{},"Input Fields"," at the top right of the ",[14,284,70],{},[14,286,271],{}," opens.",[77,289],{},[80,291],{"alt":292,"src":293,"width":84},"Top right of the toolbar with the Input Fields button highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-02\u002Fpublic",[29,295,296,300,301,304,305,308],{},[297,298,299],"look",{},"Look"," at the bottom of the list for your new input field. It is called ",[47,302,303],{},"Pick Color"," (for Color) or ",[47,306,307],{},"Select Color"," (for Color Selection) and already shows the color that was in the element. That is the default value.",[29,310,311,313],{},[64,312,66],{}," the input field's name and type a heading that says which color users change, for example \"Background color\".",[29,315,316,317,345,347],{},"Depending on the field type, go on like this:",[129,318,319,329],{},[29,320,321,323,324],{},[134,322],{}," For Color:\n",[129,325,326],{},[29,327,328],{},"There is nothing more to set. Go on with step 11.",[29,330,331,333,334],{},[134,332],{}," For Color Selection:\n",[129,335,336],{},[29,337,338,340,341,344],{},[64,339,66],{}," the gear on the right of the input field. Your palette is under ",[47,342,343],{},"Color options",": the previous color, white and black.",[77,346],{},[80,348],{"alt":349,"src":350,"width":351},"Settings of a Color Selection input field: Color options, Add option, Type and Size.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-make-color-changeable-01\u002Fpublic?v=c973454f",342,[29,353,354,115,356,359],{},[64,355,66],{},[47,357,358],{},"Add option",". A new color appears. It is a copy of the last color.",[29,361,362,364],{},[64,363,66],{}," the new color and pick your color. Repeat steps 5 and 6 for every color of your palette.",[29,366,367,369],{},[64,368,66],{}," the trash can in the row of every color you don't need. One color always has to stay.",[29,371,372,50,374,377,378,381,382,385,386,58],{},[64,373,139],{},[47,375,376],{},"Type"," how users see the palette: ",[47,379,380],{},"Dropdown",", ",[47,383,384],{},"Button Grid"," or ",[47,387,388],{},"Carousel",[29,390,391,393,394,397,398,381,401,385,404,58],{},[64,392,139],{}," the size of the swatches under ",[47,395,396],{},"Size",": ",[47,399,400],{},"Small",[47,402,403],{},"Medium",[47,405,406],{},"Large",[29,408,409,115,411,414],{},[64,410,66],{},[47,412,413],{},"Done",". The settings close.",[29,416,417,115,419,423,424,58],{},[64,418,66],{},[420,421,422],"close",{},"×"," at the top right to close the ",[14,425,271],{},[427,428,429],"warning",{},[10,430,268,431,433,434,58],{},[14,432,271],{}," is not a preview. Picking another color here changes your template for good. Test input fields in the ",[14,435,20],{},[39,437,439],{"id":438},"test-the-input-field-in-the-design-generator","Test the input field in the design generator",[10,441,268,442,444],{},[14,443,20],{}," is the page where users fill in your template and export their design. You can test the input field there safely: whatever you select doesn't change your template for good.",[26,446,447,464,474],{},[29,448,449,450,115,452,455,456,459,460,463],{},"When you are done with your input fields, ",[64,451,64],{},[47,453,454],{},"Share"," at the top right and then ",[47,457,458],{},"Publish Template Link",". If you have published the template before, the menu item is called ",[47,461,462],{},"Open Template Campaign",". A popup with the share settings opens. Your template can now be reached through a link.",[29,465,466,115,468,471,472,287],{},[64,467,66],{},[47,469,470],{},"Copy URL"," and open the link in a new browser tab. The ",[14,473,20],{},[29,475,476,478],{},[64,477,139],{}," a different color in your input field. Check that the design changes the way you want.",[480,481,482],"related",{},[129,483,484,491,497,503],{},[29,485,486],{},[487,488,490],"a",{"href":489},"\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields","How elements, properties and input fields fit together",[29,492,493],{},[487,494,496],{"href":495},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients","Set colors and gradients",[29,498,499],{},[487,500,502],{"href":501},"\u002Fhelp\u002Finput-fields\u002Fcolor-input-fields","Color input fields",[29,504,505],{},[487,506,508],{"href":507},"\u002Fhelp\u002Finput-fields\u002Foffer-a-selection","Offer a selection: let users choose from set texts or images",{"title":510,"searchDepth":511,"depth":511,"links":512},"",2,[513,514,515],{"id":41,"depth":511,"text":42},{"id":264,"depth":511,"text":265},{"id":438,"depth":511,"text":439},"input-fields","Let users of your design generator change the color of a shape or a text, freely or from your color palette.","md",[231,251,520,521,147,49,158,164,522,523,343],"color","palette","text color","brand colors",{},true,15,"\u002Fhelp\u002Finput-fields\u002Fmake-color-changeable","2026-10-13","---\ntitle: \"Create a color input field: make a color changeable\"\ndescription: \"Let users of your design generator change the color of a shape or a text, freely or from your color palette.\"\ncategory: input-fields\norder: 15\nkeywords: [\"Color\", \"Color Selection\", \"color\", \"palette\", \"Fill Color\", \"Stroke Color\", \"Select Fill Color\", \"Select Stroke Color\", \"text color\", \"brand colors\", \"Color options\"]\n---\n\nIn the :place[template editor], a color input field lets users change a color in your design in the :place[design generator], for example the fill of a shape or the color of a text. You decide whether they may pick any color or only colors from your palette.\n\nThis takes three steps:\n\n1. Create the color input field in the template editor.\n2. Configure the input field in the Input Fields view.\n3. Test the input field in the design generator.\n\n\n## Create the color input field\n\nRectangles and circles start without a stroke. If the stroke should be changeable, turn it on first with **Stroke Color** under **Appearance** in the :place[properties panel].\n\n1. :click[Click] the square with the plus in the :place[toolbar] at the top. This is the **Create Input Field** tool.\n\n   ![Toolbar with the Create Input Field tool highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-01\u002Fpublic){width=\"894\"}\n\n2. :click[Click] the shape or text whose color users should change. You can click it on the :place[canvas] or in the :place[layers panel]. A popup opens.\n\n   ::trouble{symptom=\"No popup opens?\"}\n   If the element sits inside a group or mask, a click on the :place[canvas] selects the whole group. Groups have no popup. Locked elements can't be clicked on the :place[canvas] either. :press[Press] **Esc** and start again at step 1. Then :click[click] the element itself in the :place[layers panel].\n   ::\n\n3. Depending on the element, go on in the popup like this:\n\n   - :right For a shape (rectangle, circle or path): :click[Choose] on the left of the popup how users may change the color.\n     - **Fill Color**: users pick any color for the fill.\n     - **Stroke Color**: users pick any color for the stroke.\n     - **Select Fill Color**: users pick the fill from your color palette.\n     - **Select Stroke Color**: users pick the stroke from your color palette.\n\n     ::trouble{symptom=\"The shape is red now instead of a gradient?\"}\n     **Fill Color** and **Select Fill Color** replace a gradient with a single color. Undo the step (Cmd + Z, on Windows Ctrl + Z). Connect the colors of the single gradient stops with **Select Custom Property** instead, as described in step 4 for texts.\n     ::\n\n     ![Popup for a rectangle with Fill Color, Select Fill Color, Stroke Color and Select Stroke Color, and a preview of the input field on the right.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-color-input-fields-01\u002Fpublic){width=\"664\"}\n\n   - :right For a text: :click[Click] **Select Custom Property** on the left of the popup. For texts, the popup doesn't suggest a color. You connect the color in the :place[properties panel] in the next step.\n\n     ![Popup for a text with the Select Custom Property button highlighted, and a preview of the input field on the right.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-select-custom-property-01\u002Fpublic?v=e3e9ae14){width=\"894\"}\n\n4. Depending on the element, go on like this:\n\n   - :right For a shape: :click[Click] **Add Field**.\n   - :right For a text: :click[Click] the color value next to **Color** under **Fill Color** in the **Appearance** section of the :place[properties panel]. The **Create Field** popup opens. :click[Choose] **Color** for any color or **Color Selection** for your color palette.\n\n     ![Appearance section of a text: the color value at Color under Fill Color is highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-make-color-changeable-02\u002Fpublic?v=30cdeb0e){width=\"894\"}\n\n   The color input field is now created and connected to the color.\n\n## Configure the input field\n\nThe :place[Input Fields view] shows all input fields of your template, and you configure them there.\n\n1. :click[Click] **Input Fields** at the top right of the :place[toolbar]. The :place[Input Fields view] opens.\n\n   ![Top right of the toolbar with the Input Fields button highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-02\u002Fpublic){width=\"894\"}\n\n2. :look[Look] at the bottom of the list for your new input field. It is called **Pick Color** (for Color) or **Select Color** (for Color Selection) and already shows the color that was in the element. That is the default value.\n3. :click[Click] the input field's name and type a heading that says which color users change, for example \"Background color\".\n4. Depending on the field type, go on like this:\n\n   - :right For Color:\n     - There is nothing more to set. Go on with step 11.\n   - :right For Color Selection:\n     - :click[Click] the gear on the right of the input field. Your palette is under **Color options**: the previous color, white and black.\n\n   ![Settings of a Color Selection input field: Color options, Add option, Type and Size.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-make-color-changeable-01\u002Fpublic?v=c973454f){width=\"342\"}\n\n5. :click[Click] **Add option**. A new color appears. It is a copy of the last color.\n6. :click[Click] the new color and pick your color. Repeat steps 5 and 6 for every color of your palette.\n7. :click[Click] the trash can in the row of every color you don't need. One color always has to stay.\n8. :click[Choose] under **Type** how users see the palette: **Dropdown**, **Button Grid** or **Carousel**.\n9. :click[Choose] the size of the swatches under **Size**: **Small**, **Medium** or **Large**.\n10. :click[Click] **Done**. The settings close.\n11. :click[Click] :close[×] at the top right to close the :place[Input Fields view].\n\n::warning\nThe :place[Input Fields view] is not a preview. Picking another color here changes your template for good. Test input fields in the :place[design generator].\n::\n\n## Test the input field in the design generator\n\nThe :place[design generator] is the page where users fill in your template and export their design. You can test the input field there safely: whatever you select doesn't change your template for good.\n\n1. When you are done with your input fields, :click[click] **Share** at the top right and then **Publish Template Link**. If you have published the template before, the menu item is called **Open Template Campaign**. A popup with the share settings opens. Your template can now be reached through a link.\n2. :click[Click] **Copy URL** and open the link in a new browser tab. The :place[design generator] opens.\n3. :click[Choose] a different color in your input field. Check that the design changes the way you want.\n\n::related\n- [How elements, properties and input fields fit together](\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields)\n- [Set colors and gradients](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients)\n- [Color input fields](\u002Fhelp\u002Finput-fields\u002Fcolor-input-fields)\n- [Offer a selection: let users choose from set texts or images](\u002Fhelp\u002Finput-fields\u002Foffer-a-selection)\n::\n",{"title":5,"description":517},"help\u002Finput-fields\u002Fmake-color-changeable","2026-10-22","v2UUoqzXj9Z7I3bjl89xOXnHtcjZB7ObP959v2Jq3UA",1792680560680]