Editing pages

Preview

The preview shows the page live, inside your theme layout, while you edit it.

How the preview works

• The preview takes the right part of the page tab.
• It uses the Layout chosen in the page header: your styles, scripts and fonts are loaded.
• It updates when you edit a block.
• Click a block in the preview to open its form. On hover, the matching block is highlighted in the list.
• The links of the page are disabled in the preview: clicking a link does not open another page. If the preview leaves the page anyway, it is reloaded.
• Hidden blocks (Displayed? unchecked) stay visible in the preview, but not on the website.

Editing in the preview

Since 2.4, the preview is also used to edit:

• Block toolbar: on hover, a toolbar lets you Move this block up, Move this block down, Select the block that contains this one (for a block placed in a Section or a grid) and Edit this block (opens its form).
• Texts in place: the texts of the built-in blocks (titles, texts, buttons, captions) are edited by clicking them. Enter confirms, Esc cancels; in a text on several lines, Shift+Enter adds a line break.

The same tools are available directly on the website: see Editing on the website.

Screen sizes

On the right of the block toolbar, three buttons change the width of the preview:

• mobile (phone icon);
• tablet (tablet icon);
• desktop (monitor icon).

The next button expands the block editor and the preview to the whole window; click it again to return to the normal view.

Open the preview in a window

You can detach the preview into a separate window, for example to place it on a second screen.

1. Click the Open the preview in a window button, the last one on the right of the block toolbar.
2. A window opens, at the width of the selected screen size. The block list takes the full width of the tab.
3. Keep editing: the window updates.
4. To attach it again, click Bring the preview back into the editor (same button) or close the window.

A single preview window is shared by all open tabs: it shows the page of the visible tab.

Preview or published page?

The preview shows the state being edited, even unsaved and even if the page is not published. To see the page as it is served, save, then click Open page in the document toolbar. An inactive, unpublished or scheduled page returns a 404 error to visitors; signed in to the back-office, you see it with a banner that shows its status (see Editing on the website).

The preview stays empty

Check that the selected layout renders correctly on its own, then look at the log (Settings → Event Log, or storage/logs/system.log). See Troubleshooting.