Editor X: Previewing Your Site
3 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
Use Preview mode to view your site as though it was live, across all breakpoints.
By default, the preview is adjusted to your current screen size, but you can change the width and height to see your site in other viewports. This is especially useful when testing the responsiveness of different elements on your page.
In this article, learn how to preview your site:
Previewing your site inside Editor X
There are two ways to get a preview of your site from inside the Editor, whether it's already published or still work in progress:
Dragging the handles on the Canvas
Using Editor X, you can preview your site in different screen sizes as you're working. This makes the process much more efficient since you can make the necessary adjustments on the spot.
Drag the handles on the sides of the page to increase or decrease the width and see how your elements are arranged. This is especially useful when you need to check elements with fluid measurements (e.g., vh, vw, %).
Tip:
You can also add custom breakpoints to edit your site for a specific screen size.
Clicking the Preview button
You can always access your site's Preview Mode by clicking the Preview button at the top right. See how your site looks in different breakpoints to ensure the elements look good in every screen size.
You can select a specific device (e.g., Laptop, iPad, Galaxy S7) from the drop-down menu at the top, or enter custom width and height values if your breakpoint isn't on the list.
To access Preview Mode:
- Click Preview at the top right of the Editor.
- View your site in different screen sizes by doing the following:
- Click the drop-down menu at the top to select a device.
- Drag the handles to increase or decrease the width.
- Define the width and height of the screen in pixels.
- Click Edit Site to continue editing, or Publish to make your changes live.
Want to view your site in landscape mode?
"Landscape mode" is the horizontal orientation of your page, meaning that the screen has more width to accommodate your content. Simply drag the handles to increase the width of the page and see how it looks like in landscape orientation.
Previewing your site in your browser
If needed, you can see how a site looks in your browser without having to access the Editor at all. The "All Sites" area of your account offers this quick action, among many others.
Tip:
This option is always available, regardless of whether you've published your site or not.
To preview from your account:
- Go to the All Sites page in your account.
- Hover over the site you want to preview and click Site Actions.
- Click Preview Site / View Live Site.
Note: The specific option you see depends on if your site is published or not.
Did this help?
|