Elements

Every template is built from elements placed on the canvas. This article covers the six element types, the canvas toolbar you use to add them, and how to select, arrange, and organize them once they exist. To connect an element to product data, see Placeholders.

The six element types#

Frames: containers and "shapes with content"#

Frames are the general-purpose layout primitive. Use a frame in two ways:

1. As a layout container. Give a frame an auto-layout flow (Column, Row, or Grid), alignment, gap, and padding, and drop other elements inside it — they'll arrange themselves automatically as the frame or its content changes. See Frame layouts for how each mode works, visual examples, and when to use which.
2. As a colored box with content. A price badge, a rounded tag, or any "shape with text on top" is a frame with a text child, not a shape with text overlaid separately. Give the frame a fill, border radius, and padding, then place a text element inside it. This keeps the background and the text as a single, moveable unit and lets you use the frame's auto-layout to keep the text centered as its content changes length.

When in doubt, reach for a frame instead of a plain shape whenever you need a background and content together.

Adding elements#

Click a tool in the canvas toolbar (or press its shortcut key), then click or drag on the canvas to place the element. After placing an element, the toolbar automatically switches back to the Select tool.

Adding images#

The Image tool has its own menu of ways to get an image onto the canvas:

• Upload — pick a file from your computer.
• Drag-and-drop — drag an image file from your computer straight onto the canvas.
• Clip Art — search a built-in icon and graphic library and drop a result straight onto the canvas at a sensible default size.

Selecting, moving, and transforming#

With the Select tool active:

• Click an element to select it; shift-click to add to the selection; drag on empty canvas to marquee-select multiple elements.
• Drag a selected element to move it — it snaps to alignment guides against sibling elements.
• Drag a handle on the selection box to resize; drag the rotate handle to rotate.
• Arrow keys nudge the selection by 1px; Shift+Arrow nudges by 10px.
• Double-click a text element to edit its content inline.

Common actions, available from the right-click context menu and as keyboard shortcuts:

To group elements together, drag them into a frame — either drop them onto an existing frame on the canvas, or reparent them in the Elements tree (see below). There's no separate "group" command; a frame is the grouping mechanism.

The Elements panel#

The Elements panel (docked on the right by default) shows every element in the current size as a tree, reflecting the parent/child (frame) hierarchy.

• Click a row to select that element on the canvas (and vice versa).
• The eye icon toggles visibility.
• The lock icon prevents the element from being selected, moved, or deleted on the canvas until unlocked.
• Drag a row to reorder it among its siblings, or drop it onto another row to reparent it into a frame.
• Double-click a row's name to rename the element.

Next steps#

• Frame layouts — arrange elements automatically with Column, Row, and Grid layouts
• Placeholders — bind text, image, video, and audio elements to product data
• Custom fonts — pick a Google Font or upload your own for a text element
• Sizes and formats — how layout differs per size while elements stay shared
• Effects and animation overview — add shadows, blur, and (on video templates) motion to any element