WebSite X5 Preview

Introduction >

WebSite X5 Preview

Previous pageReturn to chapter overviewNext page

When you are working on a project, you need to be able to check the final result and how the website will be displayed once it has been published. To do this, WebSite X5 provides a Preview button, that is always available (see The work environment), which gives you a preview of the website on your computer. It is constantly updated (see Update Preview while editing the Project in the Preferences window).

To display the preview, WebSite X5 uses its built-in browser, based on Chromium (http://www.chromium.org/), the open source browser that gives its name to Google Chrome™. This browser has the following commands:

Back

Return to the last page visited.

Next

Go forward to a previously-visited page.

Home Page

Go to the website's Home page.

Address bar

This shows the path of the page on display and/or lets you enter the path of the page you want to display. You just need to click on the SEND button to confirm the inserted address.

Edit this Page

This goes back to the Program, opening the page displayed as a preview by the browser in the Page Creation window, so it can be edited. If the page is part of the Blog, the Members' Area or the Shopping Cart, this button takes you back to the relative section in Step 1 - Website Settings | Advanced.

Object Edit Mode

Enables/disables the editing mode of the Objects on the Page opened in preview. When the editing mode is enabled, as the mouse hovers over the Objects, they highlight. Clicking on an Object automatically returns you to the Program, directly to the setting window of the Object itself, so you can proceed to edit it. If, instead of clicking on an Object, you click on the Header, Footer, or Sidebar of the Page, the click will take you to the Template Content window on Step 2.

You can also activate the Object editing mode by holding down the CTRL+SHIFT keys.

Device Buttons

Device Buttons are available only if the Responsive Website option is active. They are displayed according to the number of breakpoints you set for the Project: for example, if you set 4 breakpoints or more, the Desktop, Smartphone and Tablet buttons are displayed, the latter showing a sub-menu for all the intermediate breakpoints.

By clicking on a Device Button, the window where the page contents are displayed is automatically resized according to the corresponding resolution. At the default settings, the Desktop Button is active, and the contents adapt to the Preview window width, using all the available space.

Show object display order

This function is available only if the Responsive WebSite option is active. The number set for the Object during the Display Order procedure is superimposed on the Page contents.

Mobile Preview

This opens a window that displays a QR Code and a URL address. When you have connected your mobile device to the PC, you can either scan the QR Code or go to the URL to display a preview of the website and check its behavior.

Preview the WebSite on another Browser

You can Preview the site using one of the Browsers installed on your computer. By clicking on the arrow placed next to the button, a drop-down menu is displayed, where you can choose among the reported Browsers. Finally, the Browser of your choice is saved as favourite and it will be used as default Browser until a new choice is made.

You can activate the Responsive Website with the Responsive Site option available in the Resolutions and Responsive Design window. If the Responsive Website option is active, a Resolutions Bar is displayed in the WebSite X5 ’s built-in Browser. This bar shows the active breakpoints for the Project.

When the browser window is open to show the preview of the page you are working on, the page that is displayed changes automatically according to the page displayed in the main browser window.

Using a built-in browser to display a preview of the website under construction has the following advantages:

the preview does not replace the website page  displayed in the browser window;
the preview of the website under construction is updated in the built-in browser's window and new windows in the default browser are not opened.