TimberCloudDocs

The Page Editor

The page editor is where you actually build each page of your hosted website. It's a modern, Notion-style block editor: you type, you press / to drop in a block, you select text to format it, and everything saves automatically as you go. This page walks through the editor layout, how to insert and configure blocks, the built-in templates and quality checks, the search and social previews, keyboard shortcuts, and how autosave keeps your work safe.

Availability: The hosted website is a Commerce plan and up feature. On Free the Website area is blocked. For the bigger picture of how pages fit together, see Creating & Managing Pages and the Website Overview.

To open the editor, go to Website → Pages and click any page row.

First-run onboarding

The very first time you open the editor, a short onboarding strip greets you at the top of the canvas with a few starter tips — how to add a block, where settings live, and how to publish. It's dismissible; once you close it, it stays out of your way. If you're brand new, read it before diving in.

The editor layout

The editor has three panes:

PaneWhat it isNotes
Pages rail (left)A list of all your site pages, so you can jump between them without leaving the editor.Collapsible — hide it from the topbar to give the canvas more room.
Canvas (center)The live page you're building. This is where you type, insert blocks, and arrange content.This is the main working area.
Inspector (right)Settings for whatever you currently have selected — the page itself, or the block your cursor is in.Collapsible and resizable — drag its left edge to make it wider or narrower.

Click a block on the canvas to select it; the Inspector updates to show that block's options. Click an empty part of the page (or the page header) to see page-level settings like the SEO title and description, editorial status, and the search/social previews.

Adding blocks with the slash menu

Anywhere you can type, press / to open the slash menu — a searchable list of everything you can insert. Start typing to filter (for example, /hero, /gallery, /faq), then press Enter or click to drop the block in.

Blocks are organized into groups:

  • AI — let AI write or rewrite the section for you (see AI actions below).
  • Text — Heading, Subheading, plain Text, bulleted and numbered lists, Quote, Code, a Divider, an inline Photo, and an inline Button (a call-to-action that sits between paragraphs).
  • Layout — structural and content blocks: Section break, Templates…, Hero, FAQ, Comparison table, CTA strip, Testimonials, Process / steps, Team, and Icon list.
  • Storefront — blocks that pull live from your real catalog: Featured products, Category grid, and a full Storefront embed.
  • Media — Gallery, a Section image (the section's feature or background image), and a Map.
  • Embeds — a video Embed (YouTube, Vimeo, Loom, Supademo), the Embed code block for raw HTML/widgets, and a Contact form.

For a full reference of every block and what it does, see Content Blocks.

Tip: Storefront blocks (Featured products, Category grid, Storefront embed) always show your current catalog, so they stay up to date automatically as you add or change products — no need to re-edit the page.

Starting from a template

You don't have to build every page from a blank canvas. Type / → Layout → Templates… to open the Templates gallery — a set of pre-designed, ready-to-edit starter layouts. Pick one and its sections drop straight onto the page for you to customize.

Five starters ship today:

TemplateBest for
Homepage — minimal portfolioA clean, understated home page that leads with your craft and work.
Homepage — bold catalogA high-impact home page that puts products front and center.
About — craft storyTelling your shop's story — your history, materials, and approach.
FAQ + ContactA support page with a starter FAQ accordion, a contact form, and a map.
Services landingA page built around a single service, product line, or campaign.

Each template is just a starting arrangement of ordinary blocks — swap the copy, replace images, add or remove sections, and it's yours.

Formatting text

Select any text and a small formatting menu pops up just above your selection. From it you can apply:

  • Bold (Cmd/Ctrl+B)
  • Italic (Cmd/Ctrl+I)
  • Strikethrough
  • Code (inline monospace)
  • Link — click the link button, paste or type a URL, and confirm; the same control lets you edit or remove an existing link.

The formatting menu also includes a per-block alignment control (left / center / right) for the text you're working in.

Inline photos and buttons

You can drop media and calls-to-action right into the flow of your text, between paragraphs:

  • Inline Photo — type /photo to upload an image into the body, or simply paste or drag-and-drop an image into the editor and it uploads in place.
  • Inline Button — type /button to add a call-to-action button between paragraphs. A floating toolbar lets you set the button's label and link. (This is separate from the full-width CTA strip block in the Layout group.)

The Inspector: per-block settings

When a block is selected, the Inspector (right pane) shows its settings. Most content sections share a common set of layout controls, presented as visual tile pickers with a live preview:

ControlOptionsWhat it does
WidthNarrow, Default, Wide, Full-bleedHow wide the section's content stretches across the page.
BackgroundCard, Tinted, Dark, NoneThe section's background treatment (a white card, a subtle tint, a dark band, or none).
PaddingNone, Compact, Default, SpaciousHow much vertical breathing room sits above and below the section.
AlignmentLeft, Center, RightHow the content is aligned within the section.

Beyond these shared controls, each block type adds its own settings — for example, a Hero has a headline, image, and CTA; Featured products has a product picker; a Gallery has an image list; an FAQ has its question/answer pairs. See Content Blocks for the per-block details.

Note: A section can also have a Section image used as a feature or background image (type / → Section image, or use the Media group). When a section uses a full-bleed image background, the Background control sets the readability overlay (None, a light Tinted scrim, or a strong Dark vignette).

Page-level settings

Click the page header (or an empty area of the canvas) to put page-level settings in the Inspector. These include:

  • The page's SEO title and SEO description.
  • The page's navigation label.
  • The editorial status (Draft / In review / Approved) — an internal workflow marker, independent of whether the page is published. See Navigation & Publishing.
  • On the home page, the Regenerate from my catalog action.
  • The search and social previews and the Quality panel (below).

Several of these have one-click Generate buttons that use AI; see the AI Website Assistant for details.

Search & social previews

When page-level settings are showing, the Inspector renders two live previews so you can see how the page will look outside your site before you publish:

  • Search (Google) preview — a mock Google search result showing your page's title and description exactly as searchers would see them. If your SEO title is too long or the description is empty, you'll notice immediately.
  • Social-share card preview — how the page looks when its link is pasted into a chat, a text, or a social post (the title, description, and image that unfurl).

These update as you edit the page's SEO fields, so you can tune the wording until both previews read the way you want. Use the AI Generate buttons to fill an empty SEO title or description in one click.

The Quality panel (content audit)

The Inspector includes a Quality panel that continuously audits the page and flags issues by severity, so you catch problems before visitors (or search engines) do. Each finding links straight to the section that needs attention — click it to jump to the offending spot.

It checks for:

CheckWhat it catches
Broken internal linksLinks pointing to a page on your site that doesn't exist (e.g. after a rename).
External link healthOutside links that return an error, can't be reached, or point to a private/local address that won't work for the public. Links still being checked are marked "unverified," never "broken."
SEO completenessA missing or empty SEO title or description.
Missing alt textImages without descriptive alt text (bad for accessibility and search).
Heading structureHeading levels that skip or are out of order.
Thin copySections with too little text to be useful.
Deleted catalog referencesFeatured-product or category blocks that point to a product or category you've since removed from your catalog.

Work down the list, fix each issue, and the finding clears. It's the fastest way to ship a clean, accessible, well-optimized page.

Autosave and the save-status pill

You don't need to press save — the editor autosaves continuously, about one second after you stop typing. A small save-status pill in the top bar tells you exactly where things stand:

PillMeaning
Saving…Your latest change is being written to the server.
Saved · just now / Ns agoEverything is saved; the timestamp keeps you reassured at a glance.
Offline — saved locallyYou've lost your connection, so changes are kept in a local backup on your device and will sync when you're back online.
Conflict — review changesThe page was also edited somewhere else (e.g. another tab or teammate). See below.
Save failed — retryingA save didn't go through; the editor keeps retrying. If it persists, check your connection.

To force an immediate save at any time, press Cmd/Ctrl+S. (The pill gives a quick pulse to confirm.)

Offline backup

If your connection drops mid-edit, the editor doesn't lose your work — it keeps a local backup in your browser and shows Offline — saved locally. When the connection returns, your changes sync automatically.

Conflict banner

If someone else (or you, in another tab) saves the same page after you opened it, autosave pauses and a banner appears above the canvas: "This page was edited elsewhere…" You choose how to resolve it:

  • Reload latest — discard your local pending edits and load the newest saved version.
  • Keep mine — overwrite the other edit with your current version.

Autosave stays paused until you pick one, so two people can't silently clobber each other's work.

The command palette

Press Cmd/Ctrl+K to open the command palette — a fast, keyboard-first way to jump to another page or run an action (publish, open revision history, duplicate, and more) without hunting through menus. Start typing what you want and press Enter. The palette is available both in the editor and on the Pages list.

Keyboard shortcuts

Press ? at any time in the editor to open the shortcuts cheatsheet. The full set:

ShortcutAction
Cmd/Ctrl+KOpen the command palette (jump to a page, run an action).
?Show the keyboard-shortcuts cheatsheet.
EscDismiss the current menu or clear your selection.
/Insert a block (inside a text block).
Cmd/Ctrl+SSave now (flush autosave immediately).
Cmd/Ctrl+Shift+HOpen revision history to view or restore an earlier version.
Cmd/Ctrl+JRun the AI assistant on the current text selection.
Cmd/Ctrl+B / Cmd/Ctrl+IBold / Italic the selected text.

On Windows/Linux the modifier is Ctrl; on Mac it's ⌘. The cheatsheet shows whichever applies to your machine.

AI actions in the slash menu

The AI group in the slash menu lets you write and improve copy without leaving the editor. Type / and pick an AI action to run it on the current section. The available actions are: Write with AI, Rewrite, Shorten, Lengthen, Plain English, Fix grammar, More formal, More casual, More punchy, and Make a list.

You can run the same actions on just a highlighted passage by selecting text and pressing Cmd/Ctrl+J. Every AI suggestion lands in an accept/reject review — nothing changes until you approve it, and nothing publishes automatically. AI is available on Commerce and up with a monthly usage allowance and is off on the Free plan.

For the complete guide to AI in the website builder — including generating a full starter site, drafting a page from a one-line prompt, the Inspector Generate buttons (SEO, FAQ, expand About, polish a review into a testimonial), and the per-plan quotas — see the AI Website Assistant.

Next Steps

PreviousPagesNextContent Blocks