Website Editor Overview

Tip: It runs in the order you meet the editor: how the screen is laid out, then the top bar, then your pages and what sits on them, from the header down to a single component, with Site Design and Preview at the end.

1.

2. The editor opens with two things on screen: the bar across the top, and your page below it.

When you click Pages or Add Content in the top bar, a panel opens on the left, holding that list.

Clicking anything on your page opens a panel on the right that displays the settings for what you clicked.

The picture below has both open at once, so all three areas can be seen together.

3. The top bar is the same on every page, and it does three different jobs:

• Pages, Add Content, and Site Design open the other editor areas.
• The three device icons, the undo and redo arrows, and Preview are how you check your work as you go.
• Publish, at the far right, applies your changes to the live site.

Until you click Publish, everything you have done stays in the editor.

Tip: Undo and redo still work after you leave the editor and come back.

• They step back structural changes: adding or removing a section, moving a block, changing a setting.
• What they do not step back is the words inside a text block, which is why the arrows can look unresponsive right after you type.
• For your own typing, or a word you made bold, use Ctrl+Z on Windows or Cmd+Z on a Mac. Add Shift to either one to redo.

4. The header is a global area and the footer a global section, the only two parts of your site that appear on every page.

Edit either one, and the change shows everywhere, which is why your logo and menu live in the header rather than on each page separately.

The header has a panel of its own, grouped by what it holds, and it opens from the header background.

Tip: The footer is built like an ordinary section instead. You fill it with the components you want, and its panel carries the same groups as any section on a page.

5. Pages hold the structure of your site:

Which pages exist, which of them appear in the menu, and in what order?

It is also how you move from one page to another while you work.

The list is also the menu, so where a row sits is where visitors find it.

6. In the Pages panel, click the row of the page you want to change. The list provides everything for that page in one place: its name, whether it appears in the menu, and its Settings, including how it appears in search results.

Tip: Two settings in that panel are easy to miss:

• Template switches the page to a different template, and it only appears on themes that include templates.
• Hide Header and Hide Footer drop either one from this page, and leave every other page alone.

7. The middle of the screen is your actual page, where you edit it.

While you build, the page does not behave the way it will for a visitor, which is what Preview at the end of this guide is for.

A page is a stack of sections, and your text and images sit inside them. Click anything, and it stays selected, with a toolbar beside it for quick edits and its full settings in the panel on the right.

8. The plus opens Choose Layout, where you can use an empty section or a ready-made layout and add your own words and pictures.

9. Add Content is where everything new on a page comes from.

The search box at the top is the quickest way in once you know a component by name.

Tip: Click something on the page, and its settings open in the panel on the right (Rich Text is the one exception). What you clicked decides what the panel holds, so the settings in front of you are only ever for that one thing, and they come in two kinds.

10. Click a section, the band running across the page, and you get the settings for the band itself: its Layout, its Design, and Content, which holds an Add Content button for putting something into the section.

That button adds the same components as the one in the top bar.

11. Click a component, image, or button within that band, and the panel displays the settings for that item.

What you get changes with the kind of component, since an image has settings that a button does not.

Rich Text is the one exception. Clicking it puts you into the text to type.

The name at the top of the panel tells you which of the two you are looking at.

12. Site Design is the widest area in the editor. What you set here applies to every page at once, so changing a link or button color affects them all.

Your theme sits at the top, and everything below it changes the look within that theme rather than swapping it.

Under it come Styles for each kind of text and control, your site colors and background, and Shape, which sets how rounded corners are.

Tip: Where you make a change decides how far it reaches.

Tip: At the bottom, you can add a font of your own, and Site CSS under Advanced is where you write CSS by hand for anything the settings do not cover.

13. Preview opens your site in a new tab with the editor removed, so you see what a visitor sees. A line along the bottom marks it as a preview.

Tip: Links do not respond while you build, and anything that moves or plays sits still on the canvas so that it stays editable.

If a setting looks like it is doing nothing, check it in Preview before deciding it is broken.