Before you start
Bring the facts, not more tabs.
- An existing project open in the editor.
- A desktop or laptop browser wide enough to show the canvas and inspector together.
You will learn to
- Understand the top bar, left rail, canvas, inspector, and status bar.
- Select blocks reliably with the canvas or Layers.
- Know when to use Preview, Demo, Review, Go live, and Export.
- Keep editor interface styles separate from customer-facing website themes.
Read the top bar before you edit
The top bar identifies the project and current page, reports save state, changes the working breakpoint and zoom, and holds review and delivery actions.
- Confirm the project name and current page beside the page switcher.
- Watch Saved, Saving…, or Unsaved changes before leaving the page.
- Use Desktop, Tablet, and Mobile to change the canvas breakpoint. Use Fit to keep the canvas inside the available space.
- Use Undo and Redo for document edits; do not treat browser Back as an editor undo command.
Done when: You can identify the active page and wait for Saved before navigating away or starting a review.
Use the left rail as a task map
Each rail item owns one kind of work. Opening the correct panel keeps edits predictable and makes handoff instructions easy to follow.
- Launch guide tells you what still blocks a confident launch.
- Components adds blocks and manages reusable media; Layers shows the exact nested structure.
- Pages controls page names, order, visibility, duplication, and deletion.
- Theme changes the customer-facing website system; Modules changes business capabilities; Site holds business details and settings.
- AI assistant is for assisted changes when configured. Treat its result as a draft and review it in the same editor.
Done when: Given a task such as “change the phone number,” “hide a page,” or “turn on reservations,” you can open Site, Pages, or Modules without searching the whole interface.
Select the exact block before changing it
A polished section is usually a tree of nested blocks. Selection determines what the inspector edits, so verify the selection label before changing content or layout.
- Click a visible element on the canvas for the fastest selection.
- When elements overlap or are deeply nested, open Layers and select the named block there.
- Use Components to search, click, or drag a new block near the current selection. Navigation bars are placed at the top automatically.
- After insertion, confirm the new block is selected before editing its properties.
Done when: The inspector heading matches the block you intended to edit, and no neighboring section changes unexpectedly.
Use the inspector in the order Content → Style → Actions
Separating meaning, appearance, and behavior reduces accidental rework and makes responsive overrides easier to reason about.
- Use Content for copy, labels, images, prices, and component-specific data.
- Use Style for layout, size, spacing, typography, background, border, and effects.
- Use Actions for navigation and business behavior triggered by a click.
- Use Page when the selection or page-level configuration calls for metadata rather than a block change.
Done when: The block says the right thing, looks correct at the active breakpoint, and every interactive control has the intended behavior.
Keep editor interface style separate from website Theme
The interface-style switcher near Settings changes the editing environment. It is safe to choose a different editor look without changing the site customers see.
- Use the top-right interface switcher for editor styles such as Singular or Ignition.
- Use Theme in the left rail for the site’s color tokens, fonts, and design presets.
- When reviewing a screenshot, check whether it shows editor chrome or the actual customer canvas before approving colors.
Done when: You can switch the editor from Singular to Ignition and the customer-facing website remains unchanged.
Choose the correct review or delivery action
The top-right actions are intentionally different stages. Using the wrong one can turn an internal check into a client handoff or a live change.
- Preview opens the interactive Storefront and Backoffice with device controls.
- Demo presents a clean client-facing view that can return to editing.
- Review creates the review handoff and handles imported feedback.
- Go live begins the publishing workflow when cloud publishing is available for the workspace.
- Export creates a portable output; it does not by itself prove that a public deployment exists.
- Open ? for shortcuts and editor help when you want to work without hunting through controls.
Done when: You can explain which action produced the artifact or URL you are sharing and whether it is draft, review, exported, or live.
Final check
Do not call it done until these are true.
- You can identify the active page, breakpoint, zoom, and save state.
- You know which left-rail panel owns each common task.
- You verify block selection before editing the inspector.
- You know the difference between the website Theme and editor interface style.
- You use Preview, Demo, Review, Go live, and Export for distinct stages.