deckle Docs

Preview

How the View module shows your website with all saved changes, on desktop and mobile width, and how to jump from an element to its place in the preview.

The preview shows your website as your visitors will see it after the next publish, with every change you have saved. It lives in the View module, so you can check each page calmly before it goes online.

The View module with three numbered markers: 1 the buttons Desktop and Mobile, 2 the language switch, 3 the page tree; on the right the Hiking page of the demo website
The View module with the Hiking page selected.

Open the preview

Click View (the eye icon) in the module bar. The preview opens on the page you had selected; click another page in the page tree to see that one instead.

  1. Desktop and Mobile switch between the full width and the width of a smartphone.
  2. The language switch shows the page in another language, if your website has more than one.
  3. The page tree works as in the Page module.
The View module in Mobile mode: the Hiking page in a narrow, phone-sized column with the Menu button in its header
Mobile shows the page at the width of a smartphone.

What the preview shows

  • Saved changes, published or not. The preview updates by itself a moment after each save. Edits in a form that you have not saved yet do not appear.
  • Disabled pages. You can open a disabled page in the preview and check it before you enable it. Visitors of your live website cannot reach it, and lists such as page teasers leave it out, in the preview too.
  • No disabled elements. An element you have switched off is hidden in the preview, just as on your live website.

If a red strip starting with Build error appears above the preview, your website cannot be built with the latest change. Take the change back with Undo, or contact the person who looks after your website.

The preview works like your website

Links, buttons and accordions in the preview work exactly as on your live website: a click on a link opens the linked page, a click on a question opens its answer. The page tree stays where it is while you click around in the preview. To get back to a page, click it in the page tree, even if it is still selected.

The preview is for looking, not for editing: clicking an element there does not open its form. To change something you see, click Page in the module bar, which keeps the selected page open, and click the element’s card on the Content tab.

Two more ways to open the preview

The View button of a page

In the Page module, the toolbar of every page has a View button. It opens the page’s preview in a new browser tab, without the editor around it. Keep that tab next to the editor: it updates by itself when you save.

The buttons Undo and View in the toolbar of a page, View is highlighted

The Preview button of an element

In an element’s form, Preview switches to the View module and scrolls the page to that element. If the form has unsaved changes, the editor asks first whether to save them.

The buttons Close, Save, Save & close and Preview at the top of an element form, Preview is highlighted
The View module with the Hiking page scrolled down to its image grid, which now sits at the top of the preview
After Preview, the page is scrolled to the element you came from.