Using the editor

Down the left

Four buttons. Each opens a panel over the site.

Along the bottom

Everything to do with saving and going live. On the left it tells you whether you have unsaved work.

The pencil and eye switch between editing and Live — Live hides all the editing chrome so you see exactly what a visitor sees, without leaving the editor. The two screen icons switch the canvas between desktop and phone width, so you can check both without resizing your browser.

When you click something

A small toolbar appears over it, and a panel opens on the right. The toolbar is for doing things — move it, copy it, delete it. The right panel is for settings — where a link goes, what an image says, how big the text is.

Every button on that toolbar

Left to right. Hover any of them and the tooltip tells you the same thing, along with its keyboard shortcut.

Some blocks add one more button of their own: a photo gets upload, a button or link gets a way to follow where it points, and a table gets add row and add column. A block you have positioned freely also gets a move handle to drag it around.

Text

Click the words and type. That is all. It works anywhere text appears — headings, paragraphs, buttons, menus.

Photos

Click the photo, then use the upload button on its toolbar. Pick a file and it goes straight in.

Colours and fonts

These belong to the whole site rather than to the thing you clicked, so they live in the Theme panel — see Colours & fonts.

The little icon in the browser tab

That icon is your favicon. It belongs to the site itself rather than to a version of it, so it changes the moment you save instead of waiting for you to publish. That is why it is not in the editor with the rest of the design: you set it on your dashboard, on the site’s own page, next to its web address. The Home panel in the editor has an Address & site icon button that takes you straight there.

It starts as your site’s initials on a coloured tile. Change the letters (an emoji works too), change the colour, or upload your own — PNG, JPG, WEBP, SVG or ICO. There is a reset if you want the initials back.

Spacing, size and alignment

Click the thing, then use the panel on the right. The block’s own settings come first. Finer ones are under Advanced, at the bottom. These are controls, not typing — pick a size, nudge the spacing.

When a setting seems to do nothing

The panel tells you why. If another setting wins, you’ll see Not in effect under it. Click Use this instead to switch.

Some settings only work for visitors, like autoplay or opening a link in a new tab. Those say Takes effect on the live site. A blue dot marks a setting you changed. Click the dot to put it back.

Making it look different on a phone

At the top of Advanced there are three buttons — All, Tablet, Desktop. They decide which screen size your next change applies to.

All is the starting point, and the one that matters. A size or a spacing set there is used at every width, phones included. Switch to Tablet or Desktop and your change applies from that width up, leaving smaller screens alone. So set it on All first. Reach for the other two only when a big screen needs something different.

Hover effects and scroll animations

Two more things worth knowing about, in the panel.

Hover, at the top of Advanced on buttons, links, cards and photos, sets what changes when someone points at something: a background, a text colour, a border. You also set how long the change takes. It is what makes a button feel like a button.

Animation makes a block arrive as the visitor scrolls to it. Fade in, slide up, scale up, blur into focus, and a few more. There is a play button to try it without scrolling. Used on one or two blocks, it draws the eye. Used on all of them, it makes the site feel slow. Start with the section you most want read.

Adding a block

Click something near where you want the new block. Its toolbar has two add buttons: one puts the block inside what you clicked, one puts it after. A list of blocks slides out to choose from.

Your collections are at the top of that list, by name — see showing a collection on another page.

Asking for a change instead

Open AI on the left and describe what you want. “Make the hero darker. Rewrite this in a warmer tone.” It edits the page for you, and you review it before it goes anywhere.

When a font change misses some elements

Templates often set a font directly on individual elements. When you pick a new font, elements set to the old theme font move with it. An element set to a different font keeps it, because that may be deliberate, such as a monospaced label. A font set inside rich text or a collection item stays too.

The panel counts those under each font, in amber: “30 elements use a different font.” Next to it is Apply theme font to all, which clears those individual settings so your choice takes effect everywhere.

The counts are for the whole site, not the page you happen to be on — which is why the number is often larger than you expect.

Colours can be overridden the same way

An element given its own colour in the right-hand panel keeps it, and a theme change slides underneath without touching it. Unlike fonts there’s no warning and no “apply to all” — so if one heading stubbornly stays the old colour, select it and clear the colour set on the element itself.

Reset goes back to your last save

A Reset button appears at the top of the panel once you’ve changed anything. It returns the theme to how it was when you last saved — not to the template’s original colours. Save, and it disappears: from then on the way back is ⌘Z, or Reset to published in the Home panel.

Point it at something

Shift-click elements on the page before you type. They appear as chips above the box, and the chat works on those instead of guessing — “make these bigger” lands where you meant. Remove a chip with its ×, or clear them all.

It saves as it goes

There is no “accept these changes” step. Each edit is written to your draft as it happens, and a green Changes card at the end of the reply tells you what it did — “Edited 3 items on Home · Added a Pricing section”.

What it costs

Every reply is metered against your AI credits, and the balance sits in the panel header, where you can watch it go down. Every account starts with $10 of them — once, on any plan, and they never expire. When that runs out you top up; a subscription doesn’t refill it. Working through the Claude connector instead doesn’t touch this balance — that path costs you nothing here on any plan, because your agent’s own provider bills those tokens. Only this panel spends credits.

A new page

1. 1Click New page.
2. 2Give it a name. The web address fills itself in — change it if you like.
3. 3Click Create. You land on the new page, ready to write.

Putting a page in the menu

The quickest way is to copy a link that is already there, because it already carries your menu’s styling.

1. 1Click a link in your header — About, say. The blue pill reads Nav Item.
2. 2Press ⌘D to duplicate it. A second copy appears next to it.
3. 3With the copy selected, open the right panel. Change Label to the words you want in the menu, and URL to the page’s address — /services, exactly as the Pages panel shows it.
4. 4To move it along the menu, press ⌥↑ or ⌥↓ — earlier or later among its neighbours.

Your header is shared, so the link appears on every page at once. The same works in the footer.

A new collection — a blog, a portfolio, a job board

A collection is a set of pages that share a shape. Every blog post looks like the others; so does every project. Make one and you get the listing page and the shape of an entry together. Adding the second post is then just typing.

1. 1In the Pages panel, click New collection.
2. 2Pick what it is — Blog, Portfolio, Jobs, or Custom for a plain title-and-body one you shape yourself.
3. 3Name it. The name becomes the address — “Field notes” lives at /field-notes/.
4. 4You land on its new listing page, with one example entry already in it to edit or delete.

Each kind arrives with the fields it needs. A blog post has a date, a cover image and a body. A job has a team and a location. You are not filling in a database — you are editing a page that already looks right.

A new post, project or listing

1. 1Find the collection in the Pages panel and click Add.
2. 2Give it a name — that is the only thing it asks for.
3. 3You land on its own page, laid out like the others, with the fields empty and waiting.

Empty fields show as dashed boxes so you can find them. Click one and type. Leave any of them empty for as long as you like — nothing is public until you publish it.

Editing an existing item

To change a post you already made, open it first.

1. 1In the Pages panel, click the item nested under its collection.
2. 2Or find its card wherever the collection shows on your site, and click the small open-page icon on its toolbar.
3. 3You land on the item’s own page, ready to edit.

From there, click a field and type — a title, a name, a price — the same as any other text on the page. A field that mixes your words with fixed text, like a caption, opens in the right panel instead, so typing can’t overwrite the fixed part.

Showing a collection on another page

Your posts already have their own page — the listing Sitelas made when you created the collection. To show them somewhere else too, like three recent projects on your home page:

1. 1Click whatever the list should sit under or inside, and use Add block on its toolbar.
2. 2Pick your collection from Collections, at the top of the list.
3. 3It arrives as its own section below the one you were in, showing real items, laid out like the ones on its own page.

Then click it and use the right panel to make it yours: Show at most for how many, Order for how they’re sorted — drag them yourself, newest or oldest first, or by one of your own fields — Cards across and Space between cards for the layout, and Show on each card to hide fields you don’t want here. The same collection can be a short strip on one page and the full listing on another.

To change how the cards look, Card design offers four simple arrangements and Browse designs, a library of card designs from our templates — each one previewed as your own card, in your colours and fonts. Card style adjusts the border or shadow, corners, padding, photo shape, text alignment and hover effect for every card at once. As designed always puts the original card back, and Edit card design opens the card itself for anything else.

Reordering

Drag a post by the grip on its toolbar to change the order it appears in on your site. This only works while that collection’s Order is set to manual — pick Newest first or another order instead and the cards arrange themselves.

Renaming and deleting

Every row has a ⋯ menu: page settings, duplicate, open a preview, delete.

Renaming a page moves any pages beneath it and repoints every link that pointed at the old address, so nothing breaks. The old address keeps working and forwards to the new one.

It tells you before you commit, not after

The address is checked as you type, so a name that can’t work is refused here rather than after a save. Save stays greyed out until it is happy.

What a rename actually does

Changing an address has consequences beyond the one page, so the view lists them before you agree to them.

1. 1Your sub-pages come along — but only if you let them. The tick box names every one and shows exactly where it lands. Untick it and they stay where they are.
2. 2Links are repointed — anything on your site pointing at the old address is updated for you: your menu, your footer, a button halfway down another page.
3. 3The old address keeps working — anyone arriving on it is forwarded to the new one, so a link someone saved or shared doesn’t die.
4. 4Nothing is public until you publish — the rename sits in your draft like any other change.

Putting a form on a page

1. 1Click + where you want it and pick Form.
2. 2It arrives as a working contact form — name, email, message and a send button — so it’s usable before you touch anything.
3. 3Click it, and the panel on the right lists its fields. Add, remove, rename and reorder them there, along with the button text and the thank-you message.

Look before you leap

Preview opens your saved draft at a private address. It is safe to send to anyone — it is hidden from search engines. Save first, or the preview won’t have your latest changes.

Publishing the whole site

Click Publish site the first time, and Publish changes after that. Confirm, and your draft becomes the live site. Anything unsaved is saved for you first.

This never brings back a page or post you deliberately took down — only pages that were already live, or new work, come along.

Publishing one page

Once your site is live, you can put a single page or post live on its own — from its ⋯ menu in the Pages panel, or from the item itself on the page.

You are offered exactly one action, whichever one applies:

For a post the wording follows your collection, so it reads Unpublish this project or Publish this case study.

You can see it from the canvas too. A post that isn’t on your live site is dimmed and tagged Unpublished where it appears in a list, and its own page says the same just above the bottom bar.

Switch the editor to the eye (live preview), or open your preview link, and you see your site as it will be once you publish. A post you took down is gone from both — publishing won’t bring it back. A post you just wrote is still there, because publishing will put it live, and seeing it first is the whole point.