Editing in Freeform
The Freeform editor has two parts: a floating toolbar along the top for adding and arranging, and a panel on the right with Properties (settings for what's selected) and Layers (every item on the page, as a list).
The toolbar
| Button | What it does |
|---|---|
| Text, Image, Frame, Button, 3D scene | Add that item below your existing content. |
| ⋯ More blocks | Divider, Quote, Callout, Embed (video or page), Equation. |
| Components | Save the selected item as a reusable component, or insert one you saved. |
| Undo / Redo | Step back or forward through your changes. |
| Duplicate / Delete | Act on the current selection. |
| Snap on / off | Snap to a grid and to other items’ edges and centres while dragging. |
| Desktop / Phone | Preview the page as phones will see it (see Phone layout). |
| ⌨ | Open the keyboard shortcuts list (same as pressing ?). |
| Freeform ▾ | Undo last conversion, or re-import from blocks. |
Selecting
Moving, resizing and layering
Properties → Layout shows where an item sits in the stack, for example Layer 4 of 11(1 is the back). Type a number to move it there. The Layers panel lists items front to back.
Locking an item
Lock an item when you don't want to grab it by accident - for example a large background image that other items sit on. A locked item ignores clicks and drags on the canvas: they go straight through to whatever is underneath. Select all and the arrow keys skip it too, and locking a frame locks everything inside it.
Editing text
Double-click a text item to type in it. A formatting bar appears with bold, italic, strikethrough, alignment, size, font, colour, text effects and a link button (select some words, click the link button, paste an address). Click outside the text when you're done.
The Properties panel
| Section | What you can set |
|---|---|
| Layout | Position, size and rotation; the item’s frame; layer order; Lock; Hide on phone; phone order. |
| Content | Depends on the item - image address and description, button label and link, frame arrangement and role, and so on. |
| Text | Colour, size, weight, alignment, line height, letter spacing, capitals, gradient letters, outline, the text’s type (paragraph or heading) and an optional link for the whole item. See Looks & effects. |
| Appearance | Padding, fill (colour, gradient or image), corners, borders, opacity and the glass effect. |
| Effects | Shadow, blur, frosted background blur, shapes and faded edges. |
| Advanced | Any other CSS, and phone-only styles. See Custom CSS. |
| Animate tab | Scroll effects, load intros, entrance effects and loops. See Animation. |
| Interact tab | What happens when a visitor clicks the item, and text or colours that change with it. |
| 3D tab | For 3D items: models, objects, lights and 3D motion. See 3D scenes. |
With nothing selected, Properties shows the page settings: page height, page background (a colour or a gradient) and the phone layout switch.
Reusable components
Select an item (a frame works well - it saves everything inside it) and use Components on the toolbar to save it. Inserting a component always adds an independent copy: editing the copy never changes the saved original or other copies.