Title: Navigating the Editor Interface
Category: website-editor
Where to find this
Services → Website Editor tab
The website editor is designed to be intuitive, but understanding each area will help you work more efficiently. This guide covers every part of the interface.
The Header Bar
The header bar runs across the top of the editor and contains essential controls:
Press Ctrl+Z (or Cmd+Z on Mac) to undo, and Ctrl+Y (or Cmd+Shift+Z) to redo.
Left Panel: Components & Pages
The left panel has two main tabs:
Components Tab
This is your toolbox of building blocks. Components are organized into categories:
- Basic – Text, Button, Image, Icon, Video
- Layout – Container, Row, Column, Grid
- Marketing – Hero, CTA, Testimonials, Feature List
- Commerce – Subscription Plans, Booking Calendar
- Forms – HubSpot Contact Form
- Navigation – Navbar, Footer
To add a component: Drag it from the panel onto your page canvas.
Pages Tab
Manage all pages on your website:
- Click a page to load it into the editor
- Add Page creates a new blank page
- Page menu (three dots) offers rename, duplicate, delete, and settings
Centre Canvas: Your Design Area
The canvas is where you build your page visually.
Selection & Editing
- Click any element to select it
- Blue border indicates the selected element
- Selection badge shows the component name (e.g., "Text", "Button")
- Move handle (grip icon) lets you drag elements to new positions
- Delete button (X) removes the selected element
Drop Zones
When dragging a component, you'll see highlighted areas showing where you can drop it. The editor will guide you to valid positions.
Nested Elements
Some components contain other components. For example:
- A Row contains Columns
- A Column can contain Text, Images, Buttons, etc.
Use the "Select Parent" option to navigate up the hierarchy.
Right Panel: Properties & Settings
The right panel changes based on what you have selected.
Properties Tab
When you select an element, this tab shows its configurable settings:
Content Settings
- Text content, image sources, button labels
- Links and actions
Layout Settings
- Width, height, padding, margin
- Alignment and positioning
Style Settings
- Colours, backgrounds, borders
- Shadows and rounded corners
Animation Settings
- Entrance animations (fade, slide, zoom)
- Animation delay and trigger point
Layers Tab
A hierarchical view of all elements on your page, like a folder structure:
- Expand/collapse sections to navigate complex pages
- Click an element in the Layers panel to select it on the canvas
- Drag elements to reorder them
- Eye icon toggles element visibility
- Double-click to rename elements for easier identification
Theme Tab
Global styling that applies across your entire website:
- Colours – Primary, secondary, background, and text colours
- Typography – Font families and sizes
- Advanced – Gradients, shadows, border radius
Preview Mode
Click Preview in the header to see your page as visitors will see it:
- All editing controls are hidden
- Interactive elements work (buttons, forms, calendars)
- Switch between device sizes to check responsiveness
Click Edit to return to editing mode.
Auto-Save
The editor automatically saves your work:
- Changes are saved every 10 seconds
- A "Saved" indicator appears in the header
- Switching pages also triggers a save
If you accidentally close the browser, your recent changes are preserved. Simply return to the editor to continue where you left off.
Snapshots: Version Control
Before making significant changes, create a snapshot:
- Click the Snapshots icon in the header
- Click Create Snapshot
- Give it a descriptive name (e.g., "Before redesign")
To restore a previous version:
- Open the Snapshots panel
- Find the snapshot you want
- Click Restore
This is particularly useful when experimenting with different layouts or designs.