Live preview
Check a page beside the editor, try different screen widths, and compare drafts with the published site.
On this page
You'll check how a page looks before making its changes public. Live Preview opens the website beside the editor. Preview opens a separate preview page.
Preview while you editLink to this section
- Open a page in Pages. For a new page, give it a Page title and URL path and choose Save Draft first.
- Choose Live Preview, the eye icon beside the save controls.
- Edit a field and watch the preview. Allow it time to update. If your site updates preview after saving, choose Save Draft to refresh the saved content.
- Use Responsive to select a screen size. You can also adjust the width and height values and the zoom control.
- Choose Open in new window if you want more room. Choose Live Preview again to return to the wider editor.
| Control | What it does | Tip |
|---|---|---|
| Live Preview | Opens the website beside the editor. | Useful for checking text wrapping and block order as you edit. |
| Responsive | Changes the preview screen size. | Check a phone-sized view as well as desktop. |
| Width and height fields | Set the preview dimensions. | Use a narrower width to catch long headings or crowded layouts. |
| Zoom control | Changes how large the preview appears in your workspace. | Zoom changes your view, not the page's design. |
| Open in new window | Opens the preview in another window or tab. | Useful for a wider view. |
| Live Preview again | Closes the preview beside the editor. | Gives the editor more space. |
| Preview | Opens a separate preview of the page. | Keep it separate from an ordinary public-page check. |
Check the right thingsLink to this section
Read your headings and paragraphs. Check image crops, button labels, links, and the order of content. At a smaller width, check that text stays readable and essential content is easy to find.
Preview shows your working content. It does not publish it. Use Publish changes when you are ready for visitors to see it.
Compare with the published pageLink to this section
Open the ordinary page address in a separate tab. A saved draft on an already published page can differ from what visitors see. Preview links may show draft content, so use the ordinary address for this comparison.
If the website shows a preview bar, choose Exit preview mode before checking what visitors see. An active preview session can also affect another tab in the same browser.
After publishing, refresh the ordinary page and check it again. See Drafts and versions for which saved version is public.
If preview looks wrongLink to this section
Check that your new page has an address and a saved draft. Wait for loading to finish, then save again if needed. If an image or related item is missing, confirm that you selected it in the field. Contact your agency with the page address and a screenshot if preview remains blank or differs from the published page.
Check afterwardsLink to this section
Check the page at desktop and phone widths. Confirm that you are viewing the draft while reviewing, and use Exit preview mode before comparing it with the public page. Previewing alone does not publish your changes.
Related pagesLink to this section
Your first edit, Editing content, Blocks, Drafts and versions.