[{"data":1,"prerenderedAt":569},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fdesign-elements-and-tools\u002Flayers-panel":3},{"id":4,"title":5,"body":6,"category":541,"description":542,"extension":543,"keywords":544,"meta":559,"navigation":560,"order":561,"path":562,"published":563,"rawbody":564,"seo":565,"stem":566,"updated":567,"__hash__":568},"help\u002Fhelp\u002Fdesign-elements-and-tools\u002Flayers-panel.md","The layers panel",{"type":7,"value":8,"toc":530},"minimark",[9,26,34,39,109,118,122,185,189,195,227,231,238,299,305,309,355,359,366,372,480,484,507],[10,11,12,13,17,18,21,22,25],"p",{},"The ",[14,15,16],"place",{},"layers panel"," on the right of the ",[14,19,20],{},"template editor"," shows every element of your design and how they sit inside each other. Here you select elements, hide them, lock them, rename them and change their order. You can also reach elements that are hidden behind others on the ",[14,23,24],{},"canvas",".",[10,27,28],{},[29,30],"img",{"alt":31,"src":32,"width":33},"Layers panel with an opened mask (Masked Layers, Masking Layers) and a hovered row showing the eye, lock, Add Input Field and ⋮ buttons.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-layers-panel-01\u002Fpublic",303,[35,36,38],"h2",{"id":37},"what-the-layers-panel-shows","What the layers panel shows",[40,41,42,50,56,62,79,93],"ul",{},[43,44,45,49],"li",{},[46,47,48],"strong",{},"Rows:"," each row is one element. On the left it shows an icon for the type of element, for example a T for a text or a small thumbnail for an image. Next to it is the element ID, which is the element's name.",[43,51,52,55],{},[46,53,54],{},"Order:"," the top row is at the very front of the design. Rows further down lie behind it.",[43,57,58,61],{},[46,59,60],{},"Groups and masks:"," they have a frame and an arrow on the left. A click on the arrow opens or closes what is inside. When you select an element inside, they open on their own.",[43,63,64,67,68,71,72,75,76,25],{},[46,65,66],{},"Masks"," have two parts: under ",[46,69,70],{},"Masked Layers"," is what shows through. Under ",[46,73,74],{},"Masking Layers"," is the shape that does the cutting. An empty part shows ",[46,77,78],{},"Drop here",[43,80,81,84,85,88,89,92],{},[46,82,83],{},"Buttons on a row:"," the square with the plus (",[46,86,87],{},"Add Input Field",") and ",[46,90,91],{},"⋮"," are always there. An F in a circle appears when the element already has input fields. The eye and the lock appear when you move the mouse over the row or the element is selected.",[43,94,95,98,99,103,104,25],{},[46,96,97],{},"Warning icon:"," a yellow warning icon next to the element ID points to a problem, usually with an expression of the element. ",[100,101,102],"hover",{},"Hover"," over the icon to read the message. How to fix it is explained in ",[105,106,108],"a",{"href":107},"\u002Fhelp\u002Fexpressions-and-logic\u002Fexpression-diagnostics","Expression not working?",[10,110,111,112,114,115,117],{},"If your design has no elements yet, the ",[14,113,16],{}," says \"Create an element to start\". To make the ",[14,116,16],{}," wider or narrower, drag its left edge.",[35,119,121],{"id":120},"select-elements","Select elements",[40,123,124,135,149,164,177],{},[43,125,126,130,131,134],{},[127,128,129],"click",{},"Click"," a row. The element is selected, and the ",[14,132,133],{},"properties panel"," shows its properties.",[43,136,137,141,142,145,146,148],{},[138,139,140],"press",{},"Hold"," ",[46,143,144],{},"Shift"," and ",[127,147,127],{}," another row. All rows between the first selected one and this one are now selected.",[43,150,151,141,153,156,157,160,161,163],{},[138,152,140],{},[46,154,155],{},"Alt"," (",[46,158,159],{},"Option"," on a Mac) and ",[127,162,127],{}," a row to add or remove just this one element.",[43,165,166,141,169,172,173,176],{},[138,167,168],{},"Press",[46,170,171],{},"Cmd + A"," (Windows: ",[46,174,175],{},"Ctrl + A",") to select all elements.",[43,178,179,181,182,184],{},[127,180,129],{}," an empty spot in the ",[14,183,16],{}," to clear the selection.",[35,186,188],{"id":187},"hide-and-lock","Hide and lock",[10,190,191,194],{},[100,192,193],{},"Move the mouse"," over a row. An eye and a lock appear.",[40,196,197,211],{},[43,198,199,202,203,206,207,210],{},[46,200,201],{},"Hide layer"," (eye): hides the element. It is then also missing from the finished design and the ",[14,204,205],{},"design generator",". A click on the crossed-out eye (",[46,208,209],{},"Show layer",") shows it again.",[43,212,213,216,217,219,220,222,223,226],{},[46,214,215],{},"Lock layer"," (lock): you can no longer select the element by clicking it on the ",[14,218,24],{},". This stops you from moving it by accident. You can still select and change it in the ",[14,221,16],{},". A click on the closed lock (",[46,224,225],{},"Unlock layer",") removes the lock.",[35,228,230],{"id":229},"rename-an-element","Rename an element",[10,232,233,234,25],{},"The element ID is the name you use for the element in expressions, for example ",[235,236,237],"code",{},"headline.bottom",[239,240,241,247,281,289],"ol",{},[43,242,243,246],{},[127,244,245],{},"Double-click"," the element ID in the row. You can now edit the ID.",[43,248,249,253,254,145,257,260,261,25,263,273,276],{},[250,251,252],"type",{},"Type"," the new ID. Letters, digits, ",[235,255,256],{},"_",[235,258,259],{},"$"," are allowed, but no digit at the start. Other characters turn into ",[235,262,256],{},[264,265,267],"trouble",{"symptom":266},"The Update button is missing?",[10,268,269,270,272],{},"The ID is not allowed or already used by another element. A red message below the ID says what is wrong, for example \"Element ID '1text' is not a valid identifier\". ",[250,271,252],{}," a different ID.",[274,275],"br",{},[29,277],{"alt":278,"src":279,"width":280},"Layers panel row in rename mode: the ID field with a new name and the Update button on its right, highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-layers-panel-03\u002Fpublic",894,[43,282,283,141,285,288],{},[127,284,129],{},[46,286,287],{},"Update"," on the right of the field. The element now has this name. Expressions in other elements that use the old ID now use the new one.",[43,290,291,295,296,298],{},[292,293,294],"look",{},"Check"," on the ",[14,297,24],{}," that elements which refer to this element still look right.",[10,300,301,302,304],{},"To cancel, ",[127,303,127],{}," anywhere outside the field. The old ID stays.",[35,306,308],{"id":307},"change-the-order","Change the order",[239,310,311,348],{},[43,312,313,314],{},"Drag the row to its new place. If several elements are selected, you drag them all at once.",[40,315,316,331],{},[43,317,318,321,322],{},[319,320],"right",{}," Further forward or back:\n",[40,323,324],{},[43,325,326,330],{},[327,328,329],"drag",{},"Drag"," the row up or down. A dashed blue line shows where it will land.",[43,332,333,335,336],{},[319,334],{}," Into a group or mask:\n",[40,337,338],{},[43,339,340,342,343,345,346,25],{},[327,341,329],{}," the row onto the middle of the group or mask, or onto ",[46,344,78],{},". In a mask, the element lands under ",[46,347,70],{},[43,349,350,295,352,354],{},[292,351,294],{},[14,353,24],{}," that the element is now in front of or behind the right elements.",[35,356,358],{"id":357},"context-menu","Context menu",[10,360,361,141,363,365],{},[127,362,129],{},[46,364,91],{}," on a row, or right-click the row. If the row is part of the selection, the menu works on all selected elements.",[10,367,368],{},[29,369],{"alt":370,"src":371,"width":33},"Layers panel with the ⋮ menu of a text open: Remove, Copy, Paste, Duplicate, Bring to front, Bring up, Send down, Send to back, Group and Mask.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-layers-panel-02\u002Fpublic",[40,373,374,383,405,417,426,435,452,464,470],{},[43,375,376,379,380,25],{},[46,377,378],{},"Remove",": deletes the element. Shortcut: ",[46,381,382],{},"Backspace",[43,384,385,145,388,391,392,172,395,88,398,172,401,404],{},[46,386,387],{},"Copy",[46,389,390],{},"Paste",": copy elements and paste them again. Shortcuts: ",[46,393,394],{},"Cmd + C",[46,396,397],{},"Ctrl + C",[46,399,400],{},"Cmd + V",[46,402,403],{},"Ctrl + V",").",[43,406,407,410,411,172,414,404],{},[46,408,409],{},"Duplicate",": creates a copy right away. Shortcut: ",[46,412,413],{},"Cmd + D",[46,415,416],{},"Ctrl + D",[43,418,419,145,422,425],{},[46,420,421],{},"Bring to front",[46,423,424],{},"Send to back",": move the element to the very front or back of the design. This also takes it out of a group or mask.",[43,427,428,145,431,434],{},[46,429,430],{},"Bring up",[46,432,433],{},"Send down",": move the element one step forward or back. It stays in its group or mask.",[43,436,437,440,441,172,444,447,448,25],{},[46,438,439],{},"Group",": combines the selected elements into a group. Shortcut: ",[46,442,443],{},"Cmd + G",[46,445,446],{},"Ctrl + G","). More in ",[105,449,451],{"href":450},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements","Group elements: move and arrange them together",[43,453,454,457,458,172,461,404],{},[46,455,456],{},"Ungroup",": appears when only groups are selected. It dissolves the groups and keeps their elements. Shortcut for one selected group: ",[46,459,460],{},"Cmd + Shift + G",[46,462,463],{},"Ctrl + Shift + G",[43,465,466,469],{},[46,467,468],{},"Leave group",": appears when a selected element is inside a group. It takes the elements out of their group. If the group is left empty, it disappears.",[43,471,472,475,476,25],{},[46,473,474],{},"Mask",": needs at least two selected elements. The element you selected first does the cutting. More in ",[105,477,479],{"href":478},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fmask-elements","Mask elements: crop an image to a shape",[35,481,483],{"id":482},"input-fields-on-an-element","Input fields on an element",[40,485,486,498],{},[43,487,488,490,491,493,494,25],{},[127,489,129],{}," the square with the plus on a row. This is ",[46,492,87],{},". A popup opens where you connect an input field to this element. The next steps are the same as in ",[105,495,497],{"href":496},"\u002Fhelp\u002Finput-fields\u002Fcreate-input-field","Create an input field: let users change a text or image",[43,499,500,502,503,506],{},[127,501,129],{}," the F in a circle if the element already has input fields. The ",[14,504,505],{},"Input Fields view"," opens with this element's input fields highlighted.",[508,509,510],"related",{},[40,511,512,518,522,526],{},[43,513,514],{},[105,515,517],{"href":516},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Ftemplate-editor-basics","Find your way around the template editor",[43,519,520],{},[105,521,451],{"href":450},[43,523,524],{},[105,525,479],{"href":478},[43,527,528],{},[105,529,108],{"href":107},{"title":531,"searchDepth":532,"depth":532,"links":533},"",2,[534,535,536,537,538,539,540],{"id":37,"depth":532,"text":38},{"id":120,"depth":532,"text":121},{"id":187,"depth":532,"text":188},{"id":229,"depth":532,"text":230},{"id":307,"depth":532,"text":308},{"id":357,"depth":532,"text":358},{"id":482,"depth":532,"text":483},"design-elements-and-tools","Select, hide, lock, rename and arrange the elements of your design in the layers panel.","md",[545,546,547,548,549,550,551,421,424,552,553,554,555,556,557,558,87,468,456],"layers","Layers panel","element ID","rename","hide layer","lock layer","reorder","context menu","Ebenen","Ebenenbereich","umbenennen","ausblenden","sperren","Reihenfolge",{},true,15,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Flayers-panel","2026-10-13","---\ntitle: \"The layers panel\"\ndescription: \"Select, hide, lock, rename and arrange the elements of your design in the layers panel.\"\ncategory: design-elements-and-tools\norder: 15\nkeywords: [\"layers\", \"Layers panel\", \"element ID\", \"rename\", \"hide layer\", \"lock layer\", \"reorder\", \"Bring to front\", \"Send to back\", \"context menu\", \"Ebenen\", \"Ebenenbereich\", \"umbenennen\", \"ausblenden\", \"sperren\", \"Reihenfolge\", \"Add Input Field\", \"Leave group\", \"Ungroup\"]\n---\n\nThe :place[layers panel] on the right of the :place[template editor] shows every element of your design and how they sit inside each other. Here you select elements, hide them, lock them, rename them and change their order. You can also reach elements that are hidden behind others on the :place[canvas].\n\n![Layers panel with an opened mask (Masked Layers, Masking Layers) and a hovered row showing the eye, lock, Add Input Field and ⋮ buttons.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-layers-panel-01\u002Fpublic){width=\"303\"}\n\n## What the layers panel shows\n\n- **Rows:** each row is one element. On the left it shows an icon for the type of element, for example a T for a text or a small thumbnail for an image. Next to it is the element ID, which is the element's name.\n- **Order:** the top row is at the very front of the design. Rows further down lie behind it.\n- **Groups and masks:** they have a frame and an arrow on the left. A click on the arrow opens or closes what is inside. When you select an element inside, they open on their own.\n- **Masks** have two parts: under **Masked Layers** is what shows through. Under **Masking Layers** is the shape that does the cutting. An empty part shows **Drop here**.\n- **Buttons on a row:** the square with the plus (**Add Input Field**) and **⋮** are always there. An F in a circle appears when the element already has input fields. The eye and the lock appear when you move the mouse over the row or the element is selected.\n- **Warning icon:** a yellow warning icon next to the element ID points to a problem, usually with an expression of the element. :hover[Hover] over the icon to read the message. How to fix it is explained in [Expression not working?](\u002Fhelp\u002Fexpressions-and-logic\u002Fexpression-diagnostics).\n\nIf your design has no elements yet, the :place[layers panel] says \"Create an element to start\". To make the :place[layers panel] wider or narrower, drag its left edge.\n\n## Select elements\n\n- :click[Click] a row. The element is selected, and the :place[properties panel] shows its properties.\n- :press[Hold] **Shift** and :click[click] another row. All rows between the first selected one and this one are now selected.\n- :press[Hold] **Alt** (**Option** on a Mac) and :click[click] a row to add or remove just this one element.\n- :press[Press] **Cmd + A** (Windows: **Ctrl + A**) to select all elements.\n- :click[Click] an empty spot in the :place[layers panel] to clear the selection.\n\n## Hide and lock\n\n:hover[Move the mouse] over a row. An eye and a lock appear.\n\n- **Hide layer** (eye): hides the element. It is then also missing from the finished design and the :place[design generator]. A click on the crossed-out eye (**Show layer**) shows it again.\n- **Lock layer** (lock): you can no longer select the element by clicking it on the :place[canvas]. This stops you from moving it by accident. You can still select and change it in the :place[layers panel]. A click on the closed lock (**Unlock layer**) removes the lock.\n\n## Rename an element\n\nThe element ID is the name you use for the element in expressions, for example `headline.bottom`.\n\n1. :click[Double-click] the element ID in the row. You can now edit the ID.\n2. :type[Type] the new ID. Letters, digits, `_` and `$` are allowed, but no digit at the start. Other characters turn into `_`.\n\n   ::trouble{symptom=\"The Update button is missing?\"}\n   The ID is not allowed or already used by another element. A red message below the ID says what is wrong, for example \"Element ID '1text' is not a valid identifier\". :type[Type] a different ID.\n   ::\n\n   ![Layers panel row in rename mode: the ID field with a new name and the Update button on its right, highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-layers-panel-03\u002Fpublic){width=\"894\"}\n\n3. :click[Click] **Update** on the right of the field. The element now has this name. Expressions in other elements that use the old ID now use the new one.\n4. :look[Check] on the :place[canvas] that elements which refer to this element still look right.\n\nTo cancel, :click[click] anywhere outside the field. The old ID stays.\n\n## Change the order\n\n1. Drag the row to its new place. If several elements are selected, you drag them all at once.\n\n   - :right Further forward or back:\n     - :drag[Drag] the row up or down. A dashed blue line shows where it will land.\n   - :right Into a group or mask:\n     - :drag[Drag] the row onto the middle of the group or mask, or onto **Drop here**. In a mask, the element lands under **Masked Layers**.\n\n2. :look[Check] on the :place[canvas] that the element is now in front of or behind the right elements.\n\n## Context menu\n\n:click[Click] **⋮** on a row, or right-click the row. If the row is part of the selection, the menu works on all selected elements.\n\n![Layers panel with the ⋮ menu of a text open: Remove, Copy, Paste, Duplicate, Bring to front, Bring up, Send down, Send to back, Group and Mask.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-layers-panel-02\u002Fpublic){width=\"303\"}\n\n- **Remove**: deletes the element. Shortcut: **Backspace**.\n- **Copy** and **Paste**: copy elements and paste them again. Shortcuts: **Cmd + C** (Windows: **Ctrl + C**) and **Cmd + V** (Windows: **Ctrl + V**).\n- **Duplicate**: creates a copy right away. Shortcut: **Cmd + D** (Windows: **Ctrl + D**).\n- **Bring to front** and **Send to back**: move the element to the very front or back of the design. This also takes it out of a group or mask.\n- **Bring up** and **Send down**: move the element one step forward or back. It stays in its group or mask.\n- **Group**: combines the selected elements into a group. Shortcut: **Cmd + G** (Windows: **Ctrl + G**). More in [Group elements: move and arrange them together](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements).\n- **Ungroup**: appears when only groups are selected. It dissolves the groups and keeps their elements. Shortcut for one selected group: **Cmd + Shift + G** (Windows: **Ctrl + Shift + G**).\n- **Leave group**: appears when a selected element is inside a group. It takes the elements out of their group. If the group is left empty, it disappears.\n- **Mask**: needs at least two selected elements. The element you selected first does the cutting. More in [Mask elements: crop an image to a shape](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fmask-elements).\n\n## Input fields on an element\n\n- :click[Click] the square with the plus on a row. This is **Add Input Field**. A popup opens where you connect an input field to this element. The next steps are the same as in [Create an input field: let users change a text or image](\u002Fhelp\u002Finput-fields\u002Fcreate-input-field).\n- :click[Click] the F in a circle if the element already has input fields. The :place[Input Fields view] opens with this element's input fields highlighted.\n\n::related\n- [Find your way around the template editor](\u002Fhelp\u002Fdesign-elements-and-tools\u002Ftemplate-editor-basics)\n- [Group elements: move and arrange them together](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements)\n- [Mask elements: crop an image to a shape](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fmask-elements)\n- [Expression not working?](\u002Fhelp\u002Fexpressions-and-logic\u002Fexpression-diagnostics)\n::\n",{"title":5,"description":542},"help\u002Fdesign-elements-and-tools\u002Flayers-panel","2026-10-22","dETgjAN1TUDNYootNr6uwIsZG-g9hna1CMzWg_a_aoc",1792680561105]