Live Preview

[cedarworth]

The Preview icon which a mobile device represents on the top right corner of the page creation section. This allows the user to check the layout of the live site even before publishing the site. The documentation of this section is a very vital feature and provides a great heads-up.

@thibaudcolas

[cedarworth]

LIVE PREVIEW THE SITE

At the top right hand corner of the page editing interface, click on the mobile device icon.

This in turn toggle-opens other devices options underneath it.

When you click on any preferred device, the site then opens a simulation of the live site just as shown below.

#outreachy

[thibaudcolas]

@cedarworth thanks! Could you spend more time refining this to:

• Make it clearer which page you would suggest this information lives on – either a new page or an existing one.
• Rewrite the content to require less screenshots. One at most.
• Use the same terminology as the CMS. I don’t think this toggle is referred to as "Mobile device" in the UI.

[cedarworth]

Thanks for the feedback @thibaudcolas , I will update that immediately

[cedarworth]

The Live Preview does not require a new page. We should include it on Manage pages after the Edit existing pages section as:

Preview the edited page

The Live preview icon (mobile device icon) is at the top right corner of the edit page interface. The Live Preview works by rendering the frontend of your site. This allows you to preview the layout of the live site on different devices before publishing the page. Meanwhile, the live site preview is updated every time a change is made to the page. At the top right corner of the page editing interface, click... the mobile device icon. This in turn opens other devices icons as view options underneath it. When you click any preferred device icon, it opens a simulation of the Live site. Click the arrow preceding the devices' icons to collapse the section.