Build a page

You create a page, fill it with sections from the Add panel, change its words and pictures directly in the preview, and check it at phone and desktop widths. Every change saves on its own; nothing goes live until you publish.

Before you start #

• You need the Content editor role or higher on the site. A Content author can change words and images but not add sections or styles.
• The site exists and has a design system (see Your first site). Presets draw their colours and type from it, so a page looks finished as soon as you insert one.

Create the page #

1. In the site's sidebar, under Content, open Pages.
2. Choose Add page. The Create a page drawer opens.
3. Fill in Page title, for example "Studio". The URL path is filled from the title (studio); change it if you want a shorter one. You can change it later.
4. Under What are you creating?, keep Static (Plain page). Blog Home lists articles; Article lives under a Blog Home.
5. Leave Parent page on Top level, unless the page belongs under another page. A child page's address joins both paths: /studio/team.
6. If the site has more than one template, pick one under Template, or keep Use the default.
7. Under Status, choose:
   • Published: Goes online with the next site publish.
   • Draft: Stays offline until you publish the page itself.
8. Choose Create page. The toast reads Page created.
9. In the page's row, choose Open in editor.

Add sections #

A new page is empty. Layers says: This page has no sections yet. Use Add section to start it.

1. In the left sidebar, on the Layers tab, choose Add section. The Add panel opens over the preview, and its header says where the new part goes: At the end of the page.
2. Pick a category chip, or type in Search elements and presets. The search reads labels in every admin language, so "hero", "apertura" and "banner" all find the opening presets.
   • Layout presets: complete styled sections, such as Opening, media on the right, Two columns: text and media or Questions and answers.
   • Element presets: smaller styled pieces, such as Image with caption or Section title.
   • Sections: Empty section, a blank band to build in yourself.
   • Components, Primitives, Site components and Site presets hold the building blocks and the site's own saved pieces.
3. Choose an item. It is inserted, selected, and the panel closes. A preset reads in the site's main language: on an Italian site an inserted section heading reads "Titolo di sezione".
4. To add the next section, hover the preview: a + appears at the top and bottom edge of the section under the pointer, and before and after the selected element. Choose it to open the Add panel at that spot. In Layers, hovering the thin gap under a row shows the same +.

To add inside a selected element, select it and choose Insert in Layers. The panel's Where to add toggle switches between After (or Before) and Inside.

Change words and pictures #

• Text: double-click a text in the preview and type. For a single-line text, Enter or clicking away saves, Esc cancels. For rich text, Enter starts a new paragraph and ⌘ Enter (Ctrl Enter on Windows) saves. With a text selected, Enter also starts the edit.
• Image: an empty image shows a hatched box with a Choose image button (Choose video for a video); it opens the media library. For an image that already has a picture, select it and use Replace… on the inspector's Settings tab. Write the Alt text there too.
• Alignment and fit: the Settings tab starts with quick controls: Alignment (Left, Centre, Right) for text, Fit (Fill, Fit) and Proportions for images, Columns for a container.

The inspector on the right has three tabs: Settings (content and options), Styles (layout, spacing and the rest, see Layers and canvas) and Motion (see Scenes and recipes).

Check every screen size #

1. Above the preview, use the device buttons (desktop, laptop, tablet, mobile; 1440, 1280, 820 and 390 px wide) or the Width… menu, which lists widths grouped by breakpoint. You can also type any width from 320 to 2560 px.
2. The toolbar shows which breakpoint is in force at that width: Breakpoint in force at 390 px: Base.
3. Switch Preview mode between Edit (select and edit; some motion holds still) and Live (the page as a visitor sees it, all motion playing).

A preview width never changes where your styles apply. That is set in the Styles tab's scope bar.

Saving #

There is no save button for the page. The top bar's status reads Saving…, then All changes saved. If it reads Save failed, choose Retry; if the server refused an edit, the edit is undone and the reason shows at the element. ⌘ Z undoes, ⌘ Shift Z redoes.

What you see #

• The new section selected in Layers and outlined in blue in the preview.
• The Findings · N button in the top bar counting errors and warnings on the page (a missing alt text, an empty required field, low contrast). ⌘ Shift A opens the list. Items marked blocks publishing must be fixed before you can publish.
• The page in Pages with its status: Draft or Published.

Pitfalls #

• A text will not edit in place. The notice says why: The element is locked. Unlock it in Layers to edit it., or This text shows page data. Change it where the data is edited. (a title bound to the page's own title, for example).
• Editing in the wrong language. In a multilingual site, an edit goes into the language you are editing, not the one on screen. If the preview is still switching, the edit is refused with The preview is still switching language.
• Empty required fields. Some components land with an empty required field on purpose, such as a carousel's accessible name or an image's alt text. Findings lists them and publishing waits for your words.
• Paths are shared by every language. The page's URL slug is the same in all languages (Shared by all languages.).

Related #

• Layers and canvas
• Site components
• Publish and versions
• Site languages