[{"data":1,"prerenderedAt":148},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fdesign-elements-and-tools\u002Ftemplate-editor-basics":3},{"id":4,"title":5,"body":6,"category":136,"description":137,"extension":138,"keywords":139,"meta":140,"navigation":141,"order":142,"path":143,"seo":144,"stem":145,"updated":146,"__hash__":147},"help\u002Fhelp\u002Fdesign-elements-and-tools\u002Ftemplate-editor-basics.md","Template editor (basics)",{"type":7,"value":8,"toc":130},"minimark",[9,13,62,69,74,90,95,99,110,115,119],[10,11,12],"p",{},"The template editor is made up of four main regions.",[14,15,16,44,50,56],"ul",{},[17,18,19,23,24,29,30,34,35,39,40,43],"li",{},[20,21,22],"strong",{},"Toolbar",": the bar across the top. It holds your tools for adding elements, the ",[25,26,28],"a",{"href":27},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-tools","design tools"," for positioning them, the ",[25,31,33],{"href":32},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Flayout-grid","layout grid",", ",[25,36,38],{"href":37},"\u002Fhelp\u002Finput-fields","input fields",", undo and redo, your save status, and ",[20,41,42],{},"Publish",".",[17,45,46,49],{},[20,47,48],{},"Canvas",": the area in the middle where your design lives and where you arrange elements.",[17,51,52,55],{},[20,53,54],{},"Property Panel",": on the left. Select an element to edit its properties here. It stays empty until you select something.",[17,57,58,61],{},[20,59,60],{},"Layer Panel",": on the right. The stacked list of every element in your design.",[10,63,64],{},[65,66],"img",{"alt":67,"src":68},"","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Faf56a551-c2e8-4f09-fc9f-cd6314d37e00\u002Fmax",[70,71,73],"h2",{"id":72},"create-design-elements","Create design elements",[10,75,76,77,79,80,82,83,85,86,43],{},"Pick a tool from the ",[20,78,22],{}," (image, text, shape, or path), then draw it on the ",[20,81,48],{},". With an element selected, its options appear in the ",[20,84,54],{},". For what each type can do, see ",[25,87,89],{"href":88},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements","Design elements",[10,91,92],{},[65,93],{"alt":67,"src":94},"https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F2f22842b-9584-49e2-1eef-f5c872091b00\u002Fmax",[70,96,98],{"id":97},"add-input-fields","Add input fields",[10,100,101,102,105,106,43],{},"Input fields are the controls your end-users see in the published design generator. To create one, expose an element's property with ",[20,103,104],{},"Add Input Field"," in the Toolbar. See ",[25,107,109],{"href":108},"\u002Fhelp\u002Finput-fields\u002Fadding-input-fields","Adding input fields",[10,111,112],{},[65,113],{"alt":67,"src":114},"https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F09b7db0b-4e8b-4cac-a840-8f10a288c900\u002Fpublic",[70,116,118],{"id":117},"manage-input-fields","Manage input fields",[10,120,121,122,125,126,129],{},"Click ",[20,123,124],{},"Show Input Fields"," in the Toolbar to open the list of all your input fields, where you can reorder, edit, and remove them. See the ",[25,127,128],{"href":37},"Input fields"," section for details.",{"title":67,"searchDepth":131,"depth":131,"links":132},2,[133,134,135],{"id":72,"depth":131,"text":73},{"id":97,"depth":131,"text":98},{"id":117,"depth":131,"text":118},"design-elements-and-tools","Get oriented in the template editor and learn the basics: the four regions, creating design elements, and adding input fields.","md",[],{},true,10,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Ftemplate-editor-basics",{"title":5,"description":137},"help\u002Fdesign-elements-and-tools\u002Ftemplate-editor-basics","2026-06-10","BOO3wuerc9FsEoYe5vrrlHj-mXqaIGSHfOeekaEL3QA",1787923688650]