Pages and preview
Edit a page's fields and blocks in the dashboard, watch Content preview draw it as you type, and open the saved draft on your real website before anybody else can see it.
Why a page needs a form and two previews
A page is more than one block of text. It has a title, perhaps a banner shared with other pages, and a list of blocks, such as a hero, a feature grid and a call to action, each with fields of its own. Engineers describe that shape once, as a component, so that every page follows it and a save that does not fit the shape is refused. Content managers fill the shape in through a form, which is faster and safer than editing code. A form, though, does not look like a page.
That is why the dashboard offers two previews. Content preview sits beside the form and redraws the page as you type, laying it out from what each field is for. On website opens the draft on your own site, drawn by the site's own code; it is the only preview that shows your real design. Components and pages explains why the shape lives in the CMS and the design lives in the site.
What the form and each preview show
The form
A page opens on Form, with JSON beside it. JSON shows the same content as code and is there for engineers; everything a content manager needs is in Form. Each field has its name above it, and the fields that must be filled have Required beside them.
Some fields work differently from a text box:
- A block list, such as Blocks, holds blocks one under another. Each block is titled with its kind and position, such as "Hero, block 1 of 2", and has a handle for moving it from the keyboard and a button for removing it. Add block opens a menu of the kinds of block this list allows.
- A reference, such as a shared Banner, holds no content of its own. It points at another document: a component instance that several pages can use. You pick that document from a list with Search by title or key, and the ✕ beside it clears the choice. To change what the banner says, open the banner itself; every page that points at it changes when the banner is published.
- An image or file field shows the chosen file with Change and Clear. Under it, Use default description uses the file's own description; untick it to write a Description for this use. Caption adds a caption, and Decorative image tells screen readers to skip the picture, on this page only.
Content preview
On a window wider than 1024 pixels, a page opens with Content preview beside its form. On a narrower window the two become tabs, Edit and Content preview. The preview has three widths: Desktop, Tablet and Phone.
The dashboard draws this preview from the page's fields and their roles: a heading looks like a heading, a body like body text, a picture like a picture. The preview shows what the page says and in what order, not how your site styles it. Press a block in the preview and the form marks that block. Point at a block in the form and the preview marks it.
If the page has search and sharing fields, the preview adds a Google result card and a social card, both with counters. A title longer than 60 characters, or a description longer than 155, is marked "May be cut off in search results."
Preview in the page bar turns Content preview on and off. It is available for any structured document with a component, not only for pages; pages start with it on.
On website
Preview › On website opens a new browser tab on your site and gives the site a token. The token lets the site show this document's draft, in this locale, for fifteen minutes. For those same fifteen minutes it also lets the site list every draft in the environment, with its key, title and tags, so that links to new pages work. It opens no other draft's text. The site draws the page with its real design, links and navigation.
On website needs two things from the engineers: a website preview address set for the environment, and a site that knows what to do with the token. Until the address is set, On website is unavailable and says "Set a website preview URL in Settings › Environments."
How to
Edit the blocks of a page
- Open the page from Pages in the tree, or with Search content.
- Fill or change the fields in Form, and watch Content preview follow.
- To add a block, press Add block under the list and choose its kind. The new block goes at the end.
- To move a block, put the focus on its handle, or anywhere inside the block, and press Alt with the up or down arrow. Each press moves the block one place. Blocks cannot be dragged with the mouse.
- To remove a block, press its ✕, then confirm with Remove in Remove this block?.
- Press Save.
Change a shared banner or other referenced block
- In the page's form, note which document the reference points at, such as
components/banners/sale. - Open that document from Component instances in the tree.
- Change it and press Save. Used by, beside the form, lists every page that points at it.
- When you publish it, the dialog lists the live pages that change with it. See Publishing and history.
Check the page at another width
- In Content preview, press Tablet or Phone.
- Press Desktop to go back.
See the draft on your website
- Press Save. The website preview shows the last saved draft, not anything still unsaved in the form.
- Press Preview in the page bar, then On website.
- Read the page in the new tab. The token runs out after fifteen minutes; after that, open the page again from the dashboard.
Limits
- Content preview is not your site's design. It is a faithful outline of the content, drawn by the dashboard, and only On website shows the real page.
- On website shows the current draft only, never an older version. To see an old version, use History; see Publishing and history.
- One token opens one document's draft in one locale for fifteen minutes, and for the same fifteen minutes it lists every draft in the environment by key, title and tags. A token cannot be cancelled early. A second page needs a second press of On website.
- The website preview always appears in a new tab, never beside the editor.
- If an engineer has a change to the page's component still in draft, On website draws your draft under the published component, not under the drafted one.
- On website works only once an engineer has set the environment's website preview address and built the site's side of it. It needs the editor role, so viewers cannot open it.
- A block list holds only the kinds of block its component allows. Some lists also have a maximum number of blocks, and Add block says so when the list is full.