Blocks and the Inspector
Pages are built from blocks: ready-made sections such as a hero, a feature grid, a pricing table or an FAQ. Each block has its own content and layout options, and takes its styling from your theme. You manage a page's blocks in the page workbench in Design, and edit them in the Inspector.
The block list
Below Page settings, Blocks lists the selected page's blocks from top to bottom. The badge shows how many there are.
- Select a block to open it in the Inspector. You can also click it on the artboard.
- Reorder blocks by dragging them, or by focusing a block and pressing the up and down arrow keys.
- Remove a block with its remove button. Qanvas asks you to confirm.
- A dot beside a block's name means it has unsaved changes.
Adding a block
Choose Add block at the bottom of the list and pick a block. It is added to the end of the page with ready-to-edit default content. See the Block reference for what each block is for.
You can also ask the AI, for example "Add a stats section after the hero showing our three key numbers".
The header and footer
The Header sits at the top of the block list and the Footer at the bottom, both tagged GLOBAL. They are shared by every page, so a change made on one page appears on all of them. You can hide either one on a specific page in that page's settings.
The Inspector
Selecting a block replaces the page outline with the Inspector for that block. The block's name is shown at the top.
- Back to page outline (the arrow on the left, or
Esc) returns to the block list. - Close inspector (the cross on the right) deselects the block.
Every change appears on the artboard as you make it and goes into your unsaved draft. The Inspector is locked while the AI is working.
Direct visual control alongside conversational AI
The Inspector works alongside the conversational AI as part of Qanvas's dual-modality workflow. While the project-aware AI is ideal for exploring layout variations, writing copy, and restructuring sections across multiple pages, typing prompts for every minor styling tweak introduces unnecessary delay and burns API tokens.
Use the Inspector for direct, zero-latency visual adjustments: toggling layout variants, tuning vertical padding, switching card surface styles, or swapping color tokens. Routine tweaks happen immediately with point-and-click certainty and zero API cost.
Each block has its own fields, organised into sections. Many blocks share the sections below.
Section anchor
At the top of the Inspector for most blocks. Give the block an anchor, such
as pricing, and you can link straight to it with #pricing or
/page#pricing. Anchors start with a lowercase letter and use only
lowercase letters, digits and hyphens, and each must be unique on its page.
Headline & copy
| Field | What it is |
|---|---|
| Eyebrow | A short label above the heading |
| Heading | The section's main heading |
| Subheading | A supporting line below the heading |
Collections
Blocks with repeating content, such as features, pricing tiers, steps or questions, show them as a list of items. Add an item, expand one to edit its fields, reorder items, or remove one. Each block sets how many items it allows.
Images and media
Image fields open your project's assets. Choose an image, or upload one, and add Alt text for screen readers and search engines. Some blocks also take a Caption. Blocks that support video can use an uploaded video file or a link. See Project settings for the asset library.
Section actions
Content blocks such as Feature grid, Bento grid, Spotlight feature, Stats matrix, FAQ accordion and Process flow can end with up to two buttons:
- Primary action and Secondary action, each with a label and a link.
- Open in: Automatic (new tab for external links), New tab or Same tab.
Leave both empty and no buttons are shown. Hero, CTA Banner and Pricing matrix have their own call-to-action fields instead.
Appearance & container
The common layout options. Each block shows only the rows it supports.
| Option | What it does |
|---|---|
| Layout | The block's layout variant, such as Split editorial or Card grid |
| Surface | How cards and panels inside the block look: Elevated, Bordered or Seamless |
| Background band | A full-width background behind the block: None, Canvas, Surface or Elevated |
| Max width | How wide the content runs: Editorial, Standard, Wide or Full |
| Alignment | Left or Center |
| Vertical padding | Space above and below: None, Compact, Normal or Spacious |
| Container background | A custom background colour, with separate light and dark values |
Below the common rows, some blocks add their own toggles, such as Framed panel or Reverse column order.
For the header and footer this section is called Appearance & chrome.
Colour pickers
Colour fields open a picker with your theme's palette, a hex field, and an eyedropper (Sample color from screen). Colours that support both modes show a split swatch: one half for light mode, one for dark.