How to See a Preview of the Site Layout in Different Devices?

In this guide, you will learn how you can see a preview of the site layout in different devices in the Advanced Editor.

To see a preview of the site layout in different devices, you must do the following steps.

  1. Go to the Advanced Editor page.

  2. There are 2 different ways to view the site layout on different devices. You can use the device icons on the upper-left corner of the page or you can also go to the "PREVIEW MODE".

  3. To use the device icons, just click the device icon you want to view the site layout with and it will show you the preview instantly. See the images below.

Large desktop view
Small desktop/tablet view
Mobile device view
  1. To go to the "PREVIEW MODE", simply click the "Preview" button on the upper-right corner just beside the "Republish" button.

  1. You will notice that there are additional icons that can now be seen on the upper-left corner. You now have the "View your site on all screens" icon which shows the layout on all 3 devices simultaneously (see Image 1) and the "Zoom drop-down" which allows you to zoom out the preview to either 100% (normal view) or 50% to see your design as a whole (see Image 2). Also, when you click the "Mobile device" icon, there 3 more additional icons added: Apple icon, Android icon and the Rotate preview icon which shows the rotated preview of the website on mobile devices. (See Images 3,4 & 5 below)

Image 1. View your site on all screens preview
Image 2. Previews zoomed at 100% and 50 %
Image 3. Added icons under Mobile devices
Image 4. Apple vs Android view
Image 5. Apple vs Android (Rotated view)

Last updated