Spandrel

Editing your site

Two ways to change anything, and you can mix them freely. Click straight into the page and type, or describe what you want in the chat. Neither is the advanced one.

The short version

  • Click any text in the preview and type. That is the whole thing.
  • Click any element to get a toolbar of the tools that fit it.
  • Describe a change in the chat when clicking would be slower.
  • Edits are held until you Save, so you can move around freely.
  • A dot marks every file you have changed and has not saved.
  • Editing by hand is free. Only the chat spends credits.

Clicking and typing

Click directly into any text and type. Enter starts a new paragraph or list item. Highlight a few words and a small toolbar appears over them for quick styling.

Click an element rather than its text and it gets outlined, with a floating toolbar of the tools that make sense for it: fonts, background, spacing, border, position. The toolbar ends with buttons to duplicate the element where it stands or remove it.

The part you want is often behind the part you clicked. A section's background sits behind its heading, and on a card the box sits behind the words. Click the same spot again and the selection steps to whatever is behind it. Click again to keep going, and it comes back around to where you started. Clicking a different spot inside text just moves the cursor instead, so stay on one spot to step through. This is the way that works on a phone, where there are no keys to hold down.

Two more selection tricks on a computer. Hold Ctrl and click to build up a selection of several elements, then apply one change to all of them at once. That is Cmd on a Mac. Hold Alt and click to select exactly what is under the cursor, even a single styled word inside a sentence, which a plain click passes over.

Double-click shortcuts

Double-click an image to swap it, from your own library, a stock photo search, or a new upload. Double-click a link to point it somewhere and choose whether it opens in a new tab. Double-click a video to change which one is embedded.

Links do not navigate while you are editing, even when they have a real destination. Select one and use Follow this link when you actually want to go there.

Asking for what you want

The chat applies to the file you have open, or to just your selection when one is active. Select a section first and ask for a change and it will only touch that section, which is usually what you want.

Ask in your own words. "Make this feel calmer", "put the hours next to the phone number", "add a section about our warranty". You do not have to know what anything is called.

The mic button listens while you talk and sends the request when you stop. Undo reverts the last applied change.

If you are wondering whether it can do something, it probably can. The what you can build guide is the full list: slideshows, forms, menus, video, maps, a shop, and more.

Files, pages and components

The Files tab lists your whole site. Pages are what visitors land on. Components are pieces reused across several pages. Click any file to open it in the preview.

Your header, footer and site-wide styles are not in that list, because they show up on every page. You edit them wherever you happen to be.

Each row has a menu with settings, clone, download, replace with an uploaded file, version history and delete. The New button adds a page or component without leaving the editor, and anything unsaved stays intact.

Changes that reach every page

Editing the header, the footer or a shared style shows up everywhere as you work. When that happens a banner says so, and offers to either keep it site-wide or pull it back to just this page.

This is the one thing in the editor worth reading before you click past it. A color change you meant for one page and a color change you meant for the whole site look identical while you are making them.

Checking your work

Mobile preview switches the preview to phone width. More than half your visitors will be on one, so it is worth a look before you save.

Links marks any link that goes nowhere and lists them, so you can click straight to each one and fix it. It can check every page at once.

Try opens things that open: a mobile menu, a drop-down. That lets you see and edit them, and it is never saved in the opened state.

Saving

Save gathers everything you changed across the whole site, lists it in plain language, and asks you to confirm. On a site you have already published, that puts it live.

Nothing is a dead end. Every page and component keeps its own version history, and you can restore an earlier version whenever you like.

Editing the code

Source opens the raw HTML, CSS and JavaScript, with a tab for the page, the header, the footer, each component on it, and your site-wide styles. You never have to go in there. It is for when you already know exactly what you want to change.