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. Every change shows on the page as you make it, and saves quietly behind you.

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. The builder follows you as you click through: switch to Edit from a blog post and it is that post you edit.
• Edit — the same page, with its sections outlined as you move over them. Links on the page go nowhere here: clicking one selects the section it sits in, so you can reach for a button's words without being carried off to another page. To move between pages, use the page menu at the top of the preview. The builder gets each page ready in the other mode while you look at it, so switching between Preview and Edit is usually instant. If a switch, or a new page, takes a moment, the page stays on screen, dims, and a small Opening in Edit Mode… or Loading the page… note shows at the top until the new one is ready — the canvas never goes blank or flashes white, and clicks wait until it has arrived.
• 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.

A link to a page that is no longer on your website — one you deleted or renamed since — opens the builder on your website's own page not found page, the one a visitor would see at that address. Pick another page from the page menu or the Pages panel.

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. A small toolbar appears in the section's top-right corner — just outside a short section such as a header, where the section stays yours while you reach for it. Selecting a section does not open anything else: its words, pictures and list items are edited right on the page (see below). Hold the cursor over any button on the toolbar and its name appears under it. The Edit button (the pencil) opens the inspector — a panel on the right of the canvas with every field of the section — and the same button closes it again; it stays lit while the panel is open. The sparkle hands the section to Max as the context of your next message. The ⋯ button at the end opens the section's menu, with everything else you can do to it (see Reordering, duplicating, and deleting below); once developer mode is on, that menu also holds Edit code, which opens the same panel on the section's code.

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.

The fields open straight away. If they take a moment, the panel shows their outline while they arrive — it only says a section has nothing to edit once it knows that for certain. Clicking the section you already have selected again, or selecting some of its text, leaves the panel exactly as it is, including anything you are typing. Selecting another section while the inspector is open shows that section's fields in the same panel.

Press Esc to close the inspector, and Esc again (or a click on empty space on the page) to deselect. The panel's edge can be dragged to make it wider or narrower.

Editing right on the page

Most of what you see in Edit mode can be changed where it is, without looking for its field:

• Text — click a heading, a paragraph, a button's words or a name in a list and type. The words change in place; nothing else opens. If the section's panel is already open beside the canvas it follows along with that field highlighted, and both always show the same thing. A small note under the words reminds you of the keys: Enter (or a click somewhere else) when you are done, Esc to put the words back as they were, and Tab to move on to the next piece of text in the same section. Where a field can hold several lines, Shift+Enter starts a new one. Pasting brings in the words only, never formatting.
• Pictures — click a picture and your media library opens; pick a picture or upload one. Hovering shows the same Replace button on the picture, with Alt text beside it to edit the description people using a screen reader hear. A picture behind a section's words (a background) keeps to the Replace button, so a click there selects the section instead. A picture that fails to load is shown as a dashed placeholder filling the space it belongs in, so you can point anywhere on it and replace it. The library shows each image whole inside its tile, on a dotted backing, so a wide logo or a tall badge is seen as it is. Upload from there and the new picture appears among the tiles at once, where it will sit, with a bar that fills as it goes up; when it has landed, its tile is ringed and scrolled into view — click it to choose it.
• Links — hover a button or link whose destination you can change and an Edit link button appears above it. Type a page of your website (/menu) or a full address.
• Lists — hover one item of a list (a review, a team member, a service) and a toolbar appears on it: Move earlier, Move later, Duplicate, Edit list and Delete. On a tall item the toolbar sits in its top corner; on a short one, just above it. When the item is a picture, or you are over the picture inside it — a badge in a row of badges, a photo in a gallery — Replace and Alt text join the same toolbar, and the item's link, when it has one, joins it as Link: one toolbar holds everything you can do there, so nothing covers the Delete button. A round + on the last item adds a new one, made to look like the others. When the item is a picture — a photo in a gallery — your media library opens straight away to choose it (close the library without choosing and nothing is added); otherwise its first line is ready for you to type. Either way the page scrolls to the new item and rings it. Edit list opens the whole list in a small window — the same list the side panel shows: open any item to see and change its values, drag items into place or use the arrows beside each one, remove or add one; the page shows each change behind it. A deleted item can be brought back with Undo on the note that appears, or with Discard.

Everything you change on the page is an ordinary unsaved change: it counts in the bar at the bottom of the panel, and nothing reaches your website until you press Save (see Saving your changes).

It doesn't matter where the words come from. A section's own fields, details the whole website shares (your phone number, address, the main button's words), and text written straight into a section all edit the same way. The panel groups them so you can tell which is which:

• This section — the section's own fields.
• Shared across the website — details every page can use. Change the phone number here and it changes in the header, the footer and everywhere else it appears; the canvas shows every place at once.
• Other text and images — words and pictures written into the section itself. On a section that is part of the layout, or one reused on several pages, these change on every page that uses it.

Some text still can't be changed on the page — words the section works out for itself, such as a shortened preview of a longer description. Clicking it opens the section in the panel instead. A field that is empty shows nothing on the page to click; fill it in from the panel. Logos and icons are set on the Branding page, not here.

The first time you open Edit mode, a small note at the bottom of the page says Click any text or picture to change it. It goes away after your first edit (or its ×), and doesn't come back once you've seen it.

Editing content in the panel

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.

• Clicking a field in the panel briefly outlines what it changes on the page, so you can see which heading or picture a field belongs to.
• Every change shows on the page as you make it. Words you type into a text field change on the canvas as you type them, and a moment after you pause the section is redrawn exactly as the saved page will show it — a new picture, a reordered list, a switched option included. The page never goes blank or reloads in front of you, and it stays scrolled where you were. Nothing is saved yet — see Saving your changes.
• 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.
• Written content — a story, a policy, a page of paragraphs carried over from your old website — opens as one Content box you edit like a document, instead of a separate field for every sentence. Type straight into it, and use the toolbar for bold, italic, headings, bulleted and numbered lists, quotes, links, and pictures from your media library. To change where a link goes, click inside it and press the link button. The look of the page — its fonts, sizes, colors, and spacing — stays exactly as it was; you are changing the words. A page with a photograph or a table in the middle of its copy shows one Content box for the writing above it and another for the writing below. A picture you add to the writing that the page has never shown before appears on the canvas once you save.
• Lists — a menu, a set of features, the team, sponsor logos — are rows you can open, reorder, and remove, with an Add button underneath. Drag a row by its grip handle to move it: the row lifts and a dashed outline shows where it will land. You can also focus the handle, press Space, move with the arrow keys, and press Space again to drop it — or use the up and down arrows on each row. Some lists are shared: a small note beside the list name says so — Shared list for one the whole website shares (every section showing it changes together, on the canvas too), or the name of the collection it comes from, such as Blog collection. A long list — a blog of hundreds of posts — shows ten rows at a time: Show 10 more at the bottom reveals the next ten, and a row you add, or one you click on the page, is always brought into view. For a collection, the note is also a link: it opens that collection in the Content place, where every entry can be searched, sorted and edited.

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

Parts of a section

Some sections are built from smaller pieces — a blog page's archive has a year list, a heading and the list of posts inside it. You do not have to know that. Clicking anywhere in the section selects the whole section, and its panel shows everything in it: the section's own fields first, then one group per part, named for what it is ("Page heading", "Browse by year"), with the words and pictures written into that part. A part's words are shared by every page that uses the same part, and the group says so. Clicking a word or a picture inside a part still edits it in place.

While you are in Edit mode, the page's own buttons, menus and filters do nothing — a click selects what you clicked instead of running it. Switch to Preview to try them.

Saving your changes

Changes you make in a section's fields are yours to try out before you keep them. The page on the canvas shows them as you type, but your website — including your free address — does not change, and no new version is made, until you press Save.

As soon as you change something, a bar appears with how many changes you have not saved yet — at the bottom of the inspector while it is open, at the bottom of the left panel otherwise, and floating over the page when the left panel is collapsed, so it is never out of reach:

• Save (or ⌘S / Ctrl+S) keeps every change at once, in one step — one save, however many fields you touched. It then becomes part of your draft like any other edit.
• Discard throws them all away and puts the page back to what it was.

A save that lands says Saved in the corner; the bar goes away with it.

Your unsaved changes stay with you while you move between sections and pages, so you can change a heading, a button and a list and save them together. A few things save what you have first, because they change the page around your edits: moving, adding, duplicating or deleting a section, saving page settings, duplicating a page, opening a section's code, and Publish. Switching to Preview or Code asks whether to save or discard, and closing the tab or leaving the builder with unsaved changes asks before going.

A save lands in about a second or two, however large the website is. On a website with many pages, saving brings the page you are working on up to date first — together with every other page your change touches, up to a few dozen — and the rest of the website is finished in the background a few seconds after you stop saving: the bar above the page says the website is compiling while that happens. You can keep editing and saving the whole time, and Publish is never held for it.

The bar says Saving… until a save lands. If the connection drops or the website is still finishing an earlier change, the builder tries again by itself. If it still does not get through, you'll see why, and every change stays in the panel, unsaved, so you can press Save again.

Reordering, duplicating, and deleting

The toolbar on a selected section has move up, move down, ask Max (the sparkle), Edit (the pencil) and ⋯ (more). Each names itself when the cursor rests on it. The ⋯ button opens the section's menu: Duplicate, Edit code (developer mode only), a Widgets group (below), and Delete at the bottom. Delete always asks first, in a dialog naming the section — Cancel keeps it, Delete section removes it — so a stray click never removes anything; a section in the shared header or footer says that it leaves every page that uses it. The inspector's header repeats duplicate and delete beside its Fields and Code switch, and its delete asks the same way.

While a section is being deleted, duplicated or moved, it is washed out on the page under a small Deleting…, Duplicating… or Moving… label, and takes no more clicks until the page comes back with the change.

The same menu opens on a right-click anywhere on a section, with the toolbar's own actions and Add section above / below listed too. The keyboard works while a section is selected: ⌘↑ and ⌘↓ move it, ⌘D duplicates it, ⌫ deletes it (after the same dialog).

Turning a section into a widget

The Widgets group of the section menu lists what a section can be turned into. Today that is Turn photos into a gallery: pick it on a section that shows two or more photos — a row of pictures that open as plain image files, a hand-made grid on a page that was copied from an older website, a property's or a room's pictures — and the pictures become the platform's photo gallery, right where they were: the same photos in the same order and the same place, with the lightbox, arrows and keyboard control a gallery should have. Nothing else in the section changes. The heading, the text, the main picture above the album, the columns beside the photos, a form or a button under them — every word and every control stays exactly as it was; only the pictures' own markup is replaced by the gallery.

Most of the time the change is instant and costs nothing: the platform reads the section itself, finds the run of pictures — a row of them written into the page, a loop that draws them from your data, or a section of your own that holds nothing but them — and puts the gallery there. The gallery starts out looking the way the pictures did (as many to a row, the same shape), and a note tells you what moved ("14 photos from Rental unit photos"). A section that shows the same pictures on several pages changes once, for every page. The section stays selected, and its panel now shows the gallery as a folded group under the section's own fields — open it for its photos, template and options — so galleries can live on their own or inside a larger section.

When the platform cannot tell where the pictures are — each one carries its own words, or they are shown under a rule it does not read — it hands the same request to Max, with what it found, and tells you so. Max then places the gallery the same way, and is held to the same rule: a change that would drop a word of the section is refused and corrected before anything lands. That conversion is a normal message to Max and appears in the conversation.

The item is always there to find, and disabled with a short note when a section does not fit: a section with fewer than two photos, or one that is a gallery already. Either way, the section's previous version is in the page's History.

Asking Max about one thing

The sparkle on a section's toolbar, and on a list item's, puts that element into the assistant as the context of what you say next: a chip above the message box names it, and Max is shown its markup along with your request — "make this heading shorter", "give this card a photo". It is the same chip the assistant's element picker makes; the × on the chip or sending the message lets it go.

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; on a page made from a collection, the sections drawn from the entry carry an ENTRY badge.

Pages made from a collection

A blog post, a product, a team member's page: these are made from one template and one entry of a collection, so Edit mode treats them a little differently.

• The page rings like any other, and the header and footer edit as they do everywhere.
• A section drawn from the entry — the post's heading, its body — shows the ENTRY tab (the inspector's header carries the same badge), and its pencil reads Edit entry. Clicking it opens the entry itself, the same editor the Content place uses, headed with the entry's name and showing only the fields' names, with the field that section shows already in focus — its written content when it shows any. Save changes saves the entry and the page reloads with your change (if you changed the entry's address, the builder follows it to the new page); Delete entry removes the page and takes you to the collection's index page. The panel for such a section says the same and offers Edit entry.
• A section that is part of the template but not drawn from the entry — a "Back to the blog" link, a call to action under every post — still edits in the panel, with a note that the change lands on every entry of that collection, because it does.

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.
• "… comes from …" above a nested section's fields — a headline or a list it is handed (a blog page's title, its posts) belongs to the section around it, so it is changed there rather than here. Edit opens that section. You will rarely see this: a part nested inside a section is not a section of its own on the canvas — clicking it selects the section around it, and the part's own words appear in that section's panel under the part's name (see Parts of a section above).
• "Set 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.
• "Nothing to edit yet" — the section's template doesn't declare any fields. Press Make editable, right there in the panel or on the section's toolbar, and Max adds them (below).

Edit code (the section menu's Edit code, shown only in developer mode; the inspector's Code switch; and the button beside the message) opens the section's code in the inspector when developer mode is on; otherwise the builder offers to turn it on. See developer mode for what the code view holds.

Make editable

A section with nothing to edit shows Make editable — a pencil with a spark — on its toolbar and in its menu, where other sections show Edit. One click sends Max a message about exactly that section, with its code attached, and Max makes it editable the proper way: words, links and pictures become fields; a list of things becomes data you can add to and reorder; a section that lists a collection gets a proper form for its entries in the Content place. The page keeps its look — nothing moves or changes colour — and the reply says what you can now edit. Once Max is done the canvas reloads, and the section's pencil reads Edit like any other.

Some sections have nothing in them to edit — a spacer, a form that already has its own designer, the text of a blog post that is edited from the Content place. Max says so in a sentence and changes nothing. And if the connection to Max is lost partway through, the builder sends the same request again for you, about the same section, exactly as described in Chatting with the assistant.

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.