Compatibility

WebSite X5 Evo and Pro

Any time you need while working on your website pages, you can display a local preview to check how they will look and function once they will be online. 


Displaying the preview is really easy: you just have to click on thebutton you can find on the top toolbar.



#tip - For the local preview, WebSite X5 uses its own built-in Browser based on Chromium (http://www.chromium.org/), the open source Browser from, which Google Chrome™ comes.


How the local preview looks like

Once you start the Preview, you will find the following commands on the browser window:

  • Back /Next / Home Page: Use them to browser through the pages of your website. You can go back to the page you just visited, display the following page you have already visited and directly go to the Home Page.
  • Address bar: This shows the path of the page on display and lets you enter the path of the page you want to display. 
  • Edit this Page: This goes back to the WebSite X5 work environment, 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.
  •  Object Edit Mode: by selecting this option, you activate/disable the Object edit mode. If the edit mode is active, you will see the Objects react on mouseover. By clicking on an Object, you are redirected to the WebSite X5 section where you can edit the selected Object. If, when previewing the project, you then click on the Header or the Footer instead, you are automatically redirected to the Template Content section. 
    #tip - The Object Edit mode is active even when you press CTRL + SHIFT.
  • Mobile Preview (only for the Pro edition): 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 when browsing from a mobile device. 
  • Preview the WebSite on another Browser (only for the Pro edition): 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. 


If you are working on a responsive project (see: How to create a Responsive Website), the WebSite X5 built-in Browser will report the Responsive bar as well as some commands you can use to verify and manage the page display on the different breakpoints:

  • Device Buttons: They correspond to the breakpoints you set. Use them to resize the Browser window according to the chosen breakpoint, so to check how the website looks on the different resolutions. 
  • Show object display order: By clicking on this button, you will notice that the page contents will be displayed within numbered boxes: in this way, the Preview takes on the grid display mode which you see when setting up the page with the different Objects.


#tip - For more information about this aspect, please see: How to check the correct functioning of a responsive Website using the local Preview


How to define the preferences for the preview

You can also define how to generate and manage the preview thanks to some options available on the Preferences window:

  • On the WebSite X5 Welcome Page, click on to access the Preferences window.
  • Decide whether to activate the Update the Pages while editing the Project option: in this way, every time you edit the project, the software recreates everything which has been affected by this editing. That's a good way of keeping the local preview up-to-date and to display it without having to wait for it to regenerate. 
  • If the Update the Pages while editing the Project option is active, you can also activate the Update Preview while editing the Project option: in this way, the preview will automatically be updated on the local browser.