Skip to content

Guides

Edit a page

Blocks, fields, the live preview, autosave, undo and the page settings.

How-to guide6 min read

Blocks and fields

A page is built from blocks (components), such as a hero, text or a button. The list on the left shows them in order; select one to edit its fields on the right.

  • Add a block: choose Add component. Only blocks allowed on this kind of page are offered.
  • Move a block: drag it by its handle, or use its menu to move it up or down.
  • Duplicate or remove: use the block's menu. Removing can be undone.
  • Nested blocks: some blocks hold others, such as a button inside a hero. They appear indented under their parent.

Selecting a block, in the list or in the preview, opens its section in the list and closes the others, so the list stays short on long pages. The bar at the bottom of the panel has Make shared and Copy for the selected block; see Reuse a section on many pages for both, and for pasting blocks onto another page.

Select nothing to see the page's own fields: the slug, folder, address and any fields of the content type, such as a product's description.

Some fields only appear when another field asks for them. A button's Link, for example, may only show when Goes to is a page or address. Changing that field shows or hides them straight away. A hidden field keeps what you entered, so switching back brings it back, and it is never required or shown on the website while it is hidden.

A Link field links to A page or An address. Choose A page and search by name or address: the link then follows the page if its address changes, and the field shows where it goes now. Choose An address for another website, an email address or a path. Link text and new tab sets optional link text and opens the link in a new tab.

Entries without a page

Some collections hold records that never get a page of their own, such as FAQ entries. Clicking anywhere on one opens it in a panel on the right of the list, so you stay on the list. Change its name and fields there; changes save on their own, and Save, Publish and Remove sit at the bottom of the panel. A new entry opens in the same panel as soon as it is created. Press Esc or click outside to close it.

Work on many entries at once

In any collection, tick entries to act on them together: Publish, Unpublish and Delete appear in the bar above the list. Publish all, next to the button for a new entry, publishes every entry that is not live yet, after showing you the list. Deleted entries go to the bin.

Page addresses

A page's address is made from its folder and its slug: a page with the slug hiking-boots in the Products folder lives at /products/hiking-boots, and one with no folder at /hiking-boots. Move the page to another folder and its address follows.

  • Slug: the last part of the address. It is filled in from the page name, and you can change it.
  • Folder hub page: switch this on for a page inside a folder to serve it at the folder's own address, such as /services, instead of below it.
  • URL override: type a whole address, such as /winter, to put the page at exactly that address wherever its folder is. While it is set, changing the slug or the folder does not change the address. Clear it to use the folder and slug again.

Entries in a collection with an address of its own, such as blog posts under /blog, always live at that address followed by their slug, so they have no URL override.

When a page's address changes, the change reaches the website when you publish it, and the old address is redirected to the new one, if Keep the old URL working when a page moves is on in the space settings. Promoting the page to another environment carries its address across in the same way.

In Pages, a folder also lists entries of other types that live in it, such as blog posts in the Blog folder, greyed out and labelled with their type. Open one to edit it in its collection.

The home page. A page called Home gets the address /home like any other page; the CMS does not treat a page as the home page because of its name. To make it the home page, type / in its URL override. Each address can be used by only one page in a region and language, and websites ask for / when someone opens the home page, so give / to the page that should answer there.

TEMP practice · Draft · saved

Blocks

Hero
Text
Button

+ Add component

Live preview

Glow all year

Book now

Fields

Heading

Glow all year

Image

PreviewPublish
The page editor: blocks on the left, the live preview in the middle, fields on the right.

Rich text

The rich text toolbar has headings, bold, italic, lists, quotes, tables and links. Choose the table button to insert a table with a header row; with the cursor in a table, the same menu adds or deletes rows and columns, turns the header row on or off, or deletes the table. Press Tab to move to the next cell, and at the last cell to add a row. The bar at the bottom shows where the cursor is, such as p or li, so you can tell a heading from a paragraph.

The live preview

The preview shows the real website with your draft. Click a block in the preview to select it. Above it:

Size
Does
Switches between scaled to fit and full size
Device buttons
Does
Desktop, tablet and mobile widths
Reload
Does
Loads the preview again
Open in a new tab
Does
The preview full size
Copy a link to share
Does
A preview link for someone without an account
Fill the window
Does
Hides the side panels

With the preview filling the window, clicking a block slides in a panel with the same fields as the side panel, Page tab included. Press Esc to close it. The editor remembers the larger preview when you move to another page.

Outline view and smaller windows

Outline shows the page as a list of its blocks instead of the preview, each labelled with its title or heading. Blocks inside another block stay folded until you select their parent; the arrow with N inside opens them.

On windows 1200 pixels wide or less, the editor shows the outline only and the menu on the left gets narrower. Choose Preview above the outline to see the page, and Back to outline to return. The breadcrumb in the top bar shows from 1270 pixels.

CMS Orbit needs a laptop or desktop: at 768 pixels or less, it asks for a larger window.

Saving and undo

Changes save by themselves about a second after you stop. Undo (⌘Z) and Redo (⇧⌘Z) work across fields and blocks. The status in the top bar shows Saving…, Saved or what went wrong.

If someone else saved the page while you had it open, you are asked to reload so neither of you loses work.

The API response

The { } button shows the page exactly as the website receives it from the delivery API, useful when talking to a developer.

Was this page helpful?

Read next