The layers panel

The layers panel on the right of the 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 canvas.

What the layers panel shows

• 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.
• Order: the top row is at the very front of the design. Rows further down lie behind it.
• 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.
• 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.
• 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.
• Warning icon: a yellow warning icon next to the element ID points to a problem, usually with an expression of the element. Hover over the icon to read the message. How to fix it is explained in Expression not working?.

If your design has no elements yet, the layers panel says "Create an element to start". To make the layers panel wider or narrower, drag its left edge.

Select elements

• Click a row. The element is selected, and the properties panel shows its properties.
• Hold Shift and click another row. All rows between the first selected one and this one are now selected.
• Hold Alt (Option on a Mac) and click a row to add or remove just this one element.
• Press Cmd + A (Windows: Ctrl + A) to select all elements.
• Click an empty spot in the layers panel to clear the selection.

Hide and lock

Move the mouse over a row. An eye and a lock appear.

• Hide layer (eye): hides the element. It is then also missing from the finished design and the design generator. A click on the crossed-out eye (Show layer) shows it again.
• Lock layer (lock): you can no longer select the element by clicking it on the canvas. This stops you from moving it by accident. You can still select and change it in the layers panel. A click on the closed lock (Unlock layer) removes the lock.

Rename an element

The element ID is the name you use for the element in expressions, for example headline.bottom.

1. Double-click the element ID in the row. You can now edit the ID.
2. Type the new ID. Letters, digits, _ and $ are allowed, but no digit at the start. Other characters turn into _.
   The Update button is missing?

   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 a different ID.

   
   
3. 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.
4. Check on the canvas that elements which refer to this element still look right.

To cancel, click anywhere outside the field. The old ID stays.

Change the order

1. Drag the row to its new place. If several elements are selected, you drag them all at once.
   • Further forward or back:
     • Drag the row up or down. A dashed blue line shows where it will land.
   • Into a group or mask:
     • Drag the row onto the middle of the group or mask, or onto Drop here. In a mask, the element lands under Masked Layers.
2. Check on the canvas that the element is now in front of or behind the right elements.

Context menu

Click ⋮ on a row, or right-click the row. If the row is part of the selection, the menu works on all selected elements.

• Remove: deletes the element. Shortcut: Backspace.
• Copy and Paste: copy elements and paste them again. Shortcuts: Cmd + C (Windows: Ctrl + C) and Cmd + V (Windows: Ctrl + V).
• Duplicate: creates a copy right away. Shortcut: Cmd + D (Windows: Ctrl + D).
• 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.
• Bring up and Send down: move the element one step forward or back. It stays in its group or mask.
• Group: combines the selected elements into a group. Shortcut: Cmd + G (Windows: Ctrl + G). More in Group elements: move and arrange them together.
• 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).
• 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.
• 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.

Input fields on an element

• 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.
• Click the F in a circle if the element already has input fields. The Input Fields view opens with this element's input fields highlighted.