When writing a new blog post or creating a new page layout in Squarespace, you may want a quick fullscreen view of the layout.

Well, there’s a button for that … but it’s easy to miss if you don’t know where to look.

With responsive layouts built into all Squarespace templates, the way your layout looks in a smaller (or larger) screen can differ, depending on the viewport size. The site preview button is a super useful option that lets you do just that – quickly view your site full width.

The Site Preview Button

While viewing a content page in your site, hover your mouse over the top left corner of the site frame and you will see this arrow appear, pointing up and to the left. As soon as you click it, the site frame expands, hiding the main menu of the Squarespace administration area and giving you a full width preview of your site.

Along with stretching the site frame to the edges of your browser window, Squarespace will also update the URL in your address bar to the page being viewed. This is very useful if you want to share the URL with a colleague. Because if you just copy the URL of a page while editing it, you’ll be sharing a URL that will require the person viewing it to login. Usually, that’s not what you want. For example, while logged in, the URL of a page in your Squarespace site would look something like this:

But, after you hit the site preview button, it’s more like this:

In this example, the first URL would prompt a login, whereas the second would just display the About page. Keep in mind, both of these URL’s are using the built-in domain … before sharing on social media, always view your site in a new tab by using your custom domain and browsing to the page you want to share.

Bonus tip: You can also toggle the site preview by hitting the esc key on your keyboard.

Device View

The preview button is useful to see a larger preview of your site, but there’s also a way to view your site in a smaller viewport. When viewing any content page in your Squarespace website, hover over the top center edge of the site frame where you see something that resembles an em dash (—). As soon as you hover, that dash morphs into a downward facing arrow … and clicking on it will expose three device icons: a phone, tablet, and desktop (Fig. 2). Now you can click these three icons and easily resize the site frame to resemble the representative device. This is truly indispensable when testing page layouts for mobile devices.