Elements and the inspector

A page is a tree of elements: containers inside containers, with text, images and buttons inside those. You build a page by dragging elements in and editing them in the inspector on the right.

The palette

The rail's Elements entry opens the palette. It is grouped:

Group	vi	What is in it
Layout	Bố cục	Containers, rows, columns — what everything else sits inside
Basic	Cơ bản	Heading, text, button, icon, divider, list
Media	Đa phương tiện	Image, video
Navigation	Điều hướng	Menu, icon menu, navigation bar
Input	Nhập liệu	Form fields
Advanced & Embeds	Nâng cao & Nhúng	Custom code, embedded content

The rail's Store entry is a separate panel, holding elements that pull from your catalogue: Product, Collections, Blog, Blog categories, Storefront (the cart, filters and the like). See Lists that fill themselves.

The search box at the top of the palette filters by name, which beats scrolling.

Getting an element onto the page

Drag its card from the palette onto the canvas. While you drag, an indicator shows where it will land — before, after, or inside whichever container you are hovering.

Almost everything has to live inside a container. If you mean to put a few things side by side, drop a Layout container first and put them in it; that is the only way they share one gap, one background, one padding.

Selecting an element

Click it. A selection outline appears with a small toolbar, and the right-hand panel switches to its options.

When they are nested, the first click usually lands on the innermost one. Two ways back out:

• ⌘ ↑ selects the parent. Press again to keep going out. (Ctrl on Windows/Linux.)
• Open Layer on the rail and click the branch you want directly. The layer tree is the reliable way once a page gets deep.

Esc deselects.

The inspector

The right-hand panel shows what can be changed on the selected element, grouped: layout, spacing, text, background, border, shadow, plus whatever groups that element brings of its own.

A few habits worth forming:

Link / unlink sides. Padding and corner radius have a toggle between "all four the same" and "one at a time". Unlink when one side needs to differ.

"None" is not 0. For min/max width and height, None means the element decides; 0 is a number you are imposing on it. They behave differently.

Fit content, Fill container, Custom. The three ways an element decides its width. Fit content shrinks to what is inside; Fill container takes the space available; Custom is a number you type.

calc expressions. Where a value could use arithmetic, you can type a CSS calc expression. It accepts lengths, + - * /, var() and brackets only; get it wrong and the field says so rather than storing something that will not work.

An element can do something

Many elements have an actions group: what happens On click. The available list covers going to a URL, opening a page, opening or closing the cart, going to checkout, toggling a menu, changing a tab, and cart-line operations.

If you pick an action that will not work on the published page yet, the editor says so rather than letting you find out after it is live — for instance "Saved, but this element doesn't render a link yet, so the destination is never reached."

Shortcuts worth knowing

Action	Keys
Duplicate	⌘ D
Delete	Del
Move within its container	↑ ↓ ← →
Copy / Cut / Paste	⌘ C · ⌘ X · ⌘ V
Undo / Redo	⌘ Z · ⇧ ⌘ Z
Show/hide the inspector	⌘ \

The arrows move along the container's axis: ← → in a row, ↑ ↓ in a stack.

Next

Most of the properties you just adjusted are stored per screen size. That is Styling for phones, and it is worth reading before you adjust many of them.