Where to find this: Services → Website → Website Editor
The website editor is designed to be intuitive, but knowing what each area is for will help you work more quickly. This guide walks through every part of the screen.
The editor needs a screen at least 768 pixels wide to open. On a narrower phone you'll see a Larger Screen Required notice instead of the editor — switch to a tablet, laptop or desktop to continue.
The Three Areas
Above all three runs the header bar.
The Header Bar
The header bar sits across the top. On the left is the WebsiteBuilder name — shortened to WB on a small screen — and on a wide screen a small badge next to it reads Edit or Preview to tell you which mode you're in.
In the middle are the buttons you'll use most:
As the editor gets narrower, the device icons move into the ⋮ menu, and on a narrower screen still the Undo and Redo buttons join them there. The Preview / Edit button and the ⋮ button are always on show.
Below roughly 1200 pixels — most tablets, and a smaller laptop window — the Components and Properties panels stop sitting permanently on screen, and two extra buttons appear in the header instead: a Components button next to the mode badge, and a Properties button next to the ⋮ menu. Click either to slide that panel out over your page; close it again with the ✕ in its corner or by tapping outside it.
Undo and Redo are buttons only — there's no keyboard shortcut for them. There's a second Undo button at the bottom of the right-hand panel if that's closer to hand.
Nothing in the editor header saves your page, because nothing needs to — your work is saved for you every 10 seconds. The only Save Changes button in the editor is inside the Page Settings window.
Left Panel: Five Tabs
Down the left edge is a strip of icons. Click one to open its panel; the panel's name shows across the top of it. At the bottom of the strip, a ? button opens our support site in a new tab.
AI
The sparkle icon. Describe the page you want — or the change you want making to the page you're on — and the assistant builds it on the canvas in front of you. See Building Pages with the AI Assistant.
Components
Your building blocks, grouped into sections you can open and close:
- Basic Elements – Text, Button, Image, Icon, Video, Carousel, Accordion, Alert, Badge, Card, Feature List, Google Map
- Marketing – Product Hero, Service Card, Overview Card, Process Steps, Call to Action, Testimonials, HubSpot Form
- Layout – Container, Row, Column, Configurable Grid
- Calendar – Booking Calendar, Timetable
- Platform – Account Content
- Commerce – Stripe Plans, One-Off Services, Product Grid
- Navigation – Navbar, Footer
To add one: drag it from the panel onto your page. See Adding Components to Your Page.
Pages
Every page on your website, one to a row. Click a row to open that page in the editor, or click Add Page to create a new one.
Each row carries three small buttons on the right: a gear icon (Page Settings), a copy icon (Duplicate Page) and a bin icon (Delete Page). There's no three-dot menu — the buttons are always on show. If your permissions are view-only, they're greyed out and show "View-only access" when you hover over them.
Renaming happens in Page Settings: click the gear icon and edit the Page Name field. Below the page list sits a Templates section with a Browse Templates button. See Managing Your Pages and Using Launch Packs.
Navigator
An outline of everything on the page you have open, nested like a folder tree. It's the easiest way to reach something you can't easily click on the page itself.
- Click a row to select that element on the canvas.
- Chevron at the start of a row opens or closes its contents.
- Grip handle drags a row to a new position.
- Eye icon hides an element or shows it again.
- Bin icon deletes it, after asking you to confirm.
The row of buttons at the top decides how much of the tree is open. The first All, with a right-pointing arrow, collapses everything back to the top level. 2, 3 and 4 open the tree that many levels deep. The last All, with a downward arrow, opens everything.
Anything that came from a layout page carries a small L next to its name, and its handle shows a padlock reading "Layout element (locked)". Those parts can't be dragged or deleted here — you edit them on the layout page itself. See Understanding Page Layouts.
Theme
The palette icon, and the last of the five. Your colours, fonts and spacing for the whole website, under three sub-tabs: Colors, Type and More. See Customising Styles and Themes.
Centre Canvas: Your Design Area
The canvas is where you build your page.
Selecting and editing
Click any element to select it. A blue tag appears above it — or just inside its top edge when the element sits right at the top of the page, so it never disappears behind the editor's own header. The tag shows the element's name and three controls:
- Grip handle – press and drag to move the element.
- Up arrow – selects the box around this one, which is often what you actually want to style.
- Cross (✕) – deletes the selected element.
The grip and the cross are hidden on parts that can't be moved or deleted, such as the built-in pieces of a larger block.
Blocks that are hard to click
Some full-width blocks have something sitting on top of them, so a click lands on the wrong thing. Those carry their own small labelled button — a Product Hero with a slideshow background, for example, shows a Product Hero button in its bottom-right corner while you're editing. Click it to select the whole block. Failing that, use the Navigator tab.
Dropping things in place
While you drag, a green line shows where the element will land. A red line means it can't go there — try a different spot, or drop it into a container first.
Nested elements
Some blocks hold other blocks. A Row holds Columns, and a Column holds text, images, buttons and so on. Use the up arrow on the blue tag to step out to the box around whatever you've selected, or pick the level you want straight from the Navigator.
Right Panel: The Properties Panel
The right panel is headed Properties, and it fills with the settings for whatever you've selected. Select nothing and it reads "Select an element to edit its properties".
Which sections appear depends on the element, but they're much the same everywhere: Size & Layout, Content Layout, Spacing, Typography, Colors, Background, Border, Effects, Animation and Position & Layer. Each is a heading you click to open or close.
Animation is worth knowing about. Turn on Enable Animation and you get three controls: Type, offering Fade, Up, Left, Right and Scale; Trigger Point, for how much of the element has to be on screen before it moves; and Delay (ms). There's a small preview with a play button so you can try an effect before you settle on it.
At the very bottom of the panel are two buttons — Clear Selection and Undo — with a Quick Tip box beneath them.
For a plain-English tour of every control, see The Settings Panel Controls Explained.
Preview Mode
Click Preview in the header to see your page as visitors will:
- Both side panels disappear, along with the selection tags on the canvas.
- The device icons still work, so you can check how the page reads on a phone.
- Booking calendars and the buy buttons on plans and services are switched off. They're still there to look at, but clicking one won't take a booking or start a payment. That's deliberate — that's why those controls are switched off. To try the whole thing end to end, open your live site instead.
Click Edit to go back to editing. Nothing is saved while you're in preview mode — there's nothing to save, since you can't change anything there.
Auto-Save
The editor saves your work for you:
- Your page is saved every 10 seconds, quietly. There's no "Saved" message and no save button to press.
- Switching to another page saves the page you're leaving first.
Everything up to the last automatic save is kept, so you can come back and carry on. The last few seconds of work may not have been saved yet, so give the editor a moment before you close the tab.
Because saving is automatic, a change you regret is stored along with everything else. Take a snapshot before a big redesign.
Snapshots
A snapshot is a saved copy of one page, taken when you ask for it.
- Open the page you want to save.
- Click the ⋮ button at the right-hand end of the header.
- Click Create Snapshot.
The snapshot is taken straight away — there's no name box and nothing to confirm. Every snapshot is labelled Manual snapshot, so tell them apart by the time shown underneath: Just now, 20m ago, 3h ago, 3d ago, and a full date once it's more than a week old.
Your snapshots for that page are listed in the same ⋮ menu. Click a row to restore it.
There is no confirmation step and no undo. The page is replaced by the snapshot's content, and your undo history is cleared at the same time. If you might want the current version back, take a snapshot of it first.
For retention periods and troubleshooting, see Using Snapshots.