Editing your pages

Edit mode is the builder's hands-on way of working. The preview stays your real website, but every section of the page becomes something you can click: a headline you can retype, a photo you can swap, a list of services you can reorder. Changes save as you make them and the page re-renders in place.

Preview, Edit, Code

The control at the top-left of the workspace switches between the ways of looking at a page:

• Preview — the website exactly as a visitor sees it. Links work; nothing is highlighted. This is the default.
• Edit — the same page, with its sections outlined as you move over them.
• Code — the source files and a code editor. It only appears once developer mode is on.

The setting is remembered per website, in your browser.

Shareable builder links

As you move through the builder, its address follows you. Choosing a page, section, file, media folder, collection, or form adds that selection to the builder URL. You can bookmark or copy that address and return to the same place after a refresh. Your browser's Back and Forward buttons also move through those builder selections without discarding unsaved work.

Buttons that perform an action — such as Save, Publish, Upload, or Delete — do not add entries to browser history. The address records where you are working, not every action you take there.

Selecting a section

In Edit mode, hover over the page and a colored outline follows the section under your cursor, with a tab naming it — Hero, Services, Footer. Click to select it. The side panel opens to the section's fields, and a small toolbar appears in the section's top-right corner.

The outline color tells you what kind of thing you have selected:

• Blue — a section of this page.
• Violet, marked LAYOUT — part of the shared layout (the header or footer). Editing it changes every page.
• Teal, marked with a parent name — a section mounted inside another section. Editing it changes it everywhere its parent is used.

Press Esc to deselect, or click empty space on the page.

Editing content

The fields in the panel are the section's own: a short text for a heading, a longer one for a paragraph, a switch for something that can be shown or hidden, a color, a choice between a few options, an image, or a list.

• Text saves as you type, about half a second after you pause. The canvas re-renders without a flash, and the page stays scrolled where you were.
• Images show a thumbnail, the file's address, and a Choose from media… link that opens your media library. Pick a picture, or upload one from there.
• Lists — a menu, a set of features, the team — are rows you can open, reorder, and remove, with an Add button underneath. Some lists are shared: the small label beside the list name shows where it lives, and every section reading the same list changes together.

Leaving a text field empty puts the section's built-in default back.

Reordering, duplicating, and deleting

The toolbar on a selected section has move up, move down, duplicate, edit content, edit code, and delete. Delete asks once — the button turns into Delete? — so a stray click never removes anything.

The same actions live in the right-click menu on any section, and on the keyboard while a section is selected: ⌘↑ and ⌘↓ move it, ⌘D duplicates it, ⌫ deletes it (press twice).

Adding a section

Move the cursor toward the line between two sections and a + Add section pill appears. Where the page meets its header or footer you get two: one for the page, one for the layout. The pill opens a picker of the sections your website already has — a second call to action, another testimonial row — and drops the one you choose right there, with its default content, ready to edit.

To add a kind of section the website doesn't have yet, pick Ask Max to design a new section at the bottom of the picker and describe it. Max builds it in the same place, and it arrives editable.

The sections list

While you are in Edit mode, the current page's row in the Pages panel unfolds into a list of its sections. Hovering a row outlines the section on the canvas; clicking it scrolls there and opens its fields. Layout sections carry a LAYOUT badge.

When a section can't be edited here

Some sections have nothing to edit in the panel:

• "Every option on this section is handed down by …" — a nested section takes all its values from its parent. The Edit button beside the message takes you there.
• "Set dynamically in code" — the values come from an expression in the template rather than plain text. That is a Code-mode job, or a request for Max.
• "No fields yet" — the section's template doesn't declare any. Ask Max to make its text and images editable and it will add them.

Edit code (in the toolbar and the panel) opens the section's template in Code mode when developer mode is on; otherwise the builder offers to turn it on.

If nothing opens when you click

Clicking a section should always open something in the left panel, even if that something is one of the messages above. If a click seems to do nothing, look at the left panel before you clicked: if it says "This website could not be opened", the builder did not manage to load your pages, and until it does it has no way to tell which section you clicked. Press Try again. Your pages and files are untouched — this is a problem reading them, not a change to them.

Working with Max

Edit mode and the assistant edit the same files. Fix a typo by hand, then ask Max to restyle the section: it sees your change. Ask Max for a new page, then rearrange its sections yourself. Nothing you do in Edit mode is hidden from it, and every edit — yours or Max's — is recorded in the page's revision history.