Arrange and style layers

This page shows how to select and place layers on a page, and how to change the settings that every kind of layer shares: position, size, rotation, opacity, borders and shadows.

Select layers

• Click a layer on the canvas, or its row in the Layers panel.
• To add a layer to the selection, or take one out, hold Shift, Ctrl or Cmd while you click.
• To select several layers at once, drag a box on an empty part of the page. Every layer the box touches is selected. Hold Shift, Ctrl or Cmd to add them to the layers already selected.
• To select every layer on the page, press Ctrl + A (Cmd + A on a Mac). To select nothing, press Esc.

Hidden layers are left out when you drag a box or select all.

Move, resize and rotate

• Drag a layer to move it. Drag the handles on its edges and corners to resize it. Drag the round handle to rotate it.
• Press the arrow keys to move the selected layers by 1 pixel, or by 10 pixels with Shift.
• Use the rotation control in the toolbar: drag the slider from -180° to 180°, or click the minus or plus button to turn by 1° (hold to repeat). Double-click the slider to set it back to 0°.

A text box that grows with its text only has handles on its sides. See Text and fonts.

Snapping

While you drag, a layer snaps to the edges and center of the page and to the edges and centers of other layers, and a guide line shows where it lines up. To place layers freely, select nothing and untick Snap to guides and elements in the left panel. This is set for each page.

Align and distribute

Select two or more layers, and the toolbar shows align buttons: Align lefts, Align horizontal centers, Align rights, Align tops, Align vertical centers and Align bottoms. They line the layers up with the edges or center of the whole selection.

Select three or more, and the toolbar also shows Distribute horizontally and Distribute vertically. They space the layers out with equal gaps.

You can also align in Advanced settings, under Align & Distribute. With one layer selected, it lines up with the page, for example in the center of the page. With several, choose whether they line up with the Selection or the Page.

Position and size

Click Advanced settings in the toolbar. Under Position & Size, type X and Y (the top-left corner, in pixels from the top-left of the page) and W and H (width and height).

To keep the shape while you change the size, click the lock button next to W and H. Then W and H change together. The lock only applies while you type here, and isn’t saved with the template.

X, Y, W and H are also in the Element section of the properties panel.

Appearance

In Advanced settings, Appearance has:

Setting	What it does
Opacity	How see-through the layer is, from 0% to 100%. For images.
Blend mode	How the layer mixes with the layers under it.
Rotation	The angle, from -180° to 180°.
Radius	Rounds the corners, in pixels. For images and rectangles.

Text and shapes have no opacity setting of their own. Set the opacity in % next to their color instead.

The blend modes are Normal, Multiply, Screen, Overlay, Darken, Lighten, Color dodge, Color burn, Hard light, Soft light, Difference, Exclusion, Hue, Saturation, Color and Luminosity. For example, Multiply makes the layer darken what’s under it, and Screen makes it lighten.

Border

Text, images and QR codes can have a border, drawn inside the edge of the box (or along the mask of a masked image).

1. Select the layer and click Advanced settings.
2. Next to Border, click +.
3. Set the Color and its opacity, the Width in pixels, and the style: Solid, Dashed or Dotted.

Click − to remove the border. For a shape, the border is its outline: use Border (or Line, for a line) in the same place. See Shapes.

Shadow

1. Select the layer and click Advanced settings.
2. Next to Shadow, click +.
3. Set X and Y (how far the shadow moves right and down), the blur, and the Color and its opacity.

A new shadow starts 8 pixels down with a blur of 16 and black at 35% opacity. On text, the shadow falls on the letters. On other layers it follows the layer’s shape. Click − to remove it.

Layer order

Layers in front cover the layers behind them. In the Layers panel, the top row is the front.

• Drag a row up or down to move the layer.
• Or click … on the row and pick Bring forward, Send backward, Bring to front or Send to back.

Lock, hide, duplicate and delete

You find these at the right end of the toolbar. Lock, Duplicate and Delete are also in the … menu of each row in the Layers panel, and the eye on the row hides or shows the layer.

Action	What it does
Lock	The layer can’t be moved, resized or rotated on the canvas. You can still select it and change it in the panels. Click Unlock to undo it.
Hide	The layer disappears from the canvas and from renders. Click Show to bring it back.
Duplicate	Makes a copy. Shortcut: Ctrl + D (Cmd + D on a Mac).
Delete	Removes the layer. Shortcut: Delete or Backspace.

A render can show a hidden layer, or hide a visible one, if the layer is a dynamic field. See Modifications.

The Layers panel

The Layers card floats at the right of the canvas. Its header shows how many layers the page on screen has. Click the header to fold the card away or open it again.

Each row shows the layer’s name. An API badge means the layer is a dynamic field: point at it to see its key. On each row:

• click the name to select the layer (with Shift, Ctrl or Cmd to add it to the selection);
• click the eye to hide or show the layer;
• click … for Lock, the four order actions, Duplicate and Delete;
• drag the row to change the order.

To rename a layer, select it and type a new Name in the properties panel. Clear names help when you read the API parameters later.

What next

• Learn every shortcut: Keyboard shortcuts.
• Style text: Text and fonts.
• Mask, crop and color pictures: Images, shapes and QR codes.