Editor basics

Open the editor from Open editor on the Sites page, or Edit next to a page on the site's page. Here's a one-minute tour:

The four areas

1. The toolbar: pages, screen sizes, saving and publishing.
2. Add, Layers and Site styles (left): sections and elements to add, an outline of the page, and your site's colours and fonts.
3. Your page, exactly as visitors will see it. Click to select, double-click text to type.
4. Design, Settings and Advanced (right): change whatever you've selected.

The toolbar

1. Your logo: back to your dashboard.
2. Add: show or hide the left-hand panel (for more room to work).
3. Page menu: switch to another page of the site.
4. ＋ Page: add a page. See Adding and managing pages.
5. Import: bring in an HTML file, a .zip, or pasted code.

1. Desktop / Tablet / Mobile: see the page at different screen sizes. See Mobile and tablet views.
2. ↶ ↷: undo and redo.
3. Save status: "All changes saved", "Unsaved changes" or "Saving…".
4. ?: opens this Help Center.
5. ⋯ More: show outlines around every element, or view the page's code.
6. Preview: the page as visitors see it, in a new tab.
7. Save: save now (it also happens automatically).
8. Publish: put your changes live.

The panels

On the left:

• Add: ready-made sections (with pictures, so you can see them first) and single elements like text, images and buttons. See Adding sections.
• Layers: an outline of everything on the page. It's handy for picking something that's hard to click, or for dragging things into a new order.
• Site styles: your site's colours and fonts, changed on every page at once. See Site colours and fonts.

On the right, for whatever you've selected:

• Design: text, colour, background, spacing, corners, shadow and links, in plain words. See Changing styles.
• Settings: details like a picture's description, a video's address, or a form's options.
• Advanced: every style setting there is, for when you need more control.

The Design panel shows what you've selected and the items around it at the top, for example Container › Row › Column › Heading. Click any of them to select it instead.

Selecting, moving and deleting

Click anything to select it. A blue outline and a small toolbar appear above it:

1. Drag handle: drag it to move the item somewhere else.
2. Its name, e.g. "Heading". Click it to select the item it sits inside (its "parent").
3. Edit text for text, Replace for a picture, or Link for a link or button.
4. Move up and Move down: swap it with the item before or after it.
5. Duplicate: put a copy just after it.
6. Delete: remove it.

Double-click text to type. A text toolbar lets you add bold, italic, underline and links.

Keyboard shortcuts