Understanding the Site Manager interface

The parts of the Site Manager interface can expand/contract depending on the type of activity you are performing. For example, the side panel will automatically expand to accommodate charts when you are viewing your site statistics (and therefore, the Preview screen will shrink accordingly). You can also hide the side panel entirely to fill the screen with your site preview. You can do this using the Expansion Arrow in the top-left corner of the Preview screen, shown here:

Clicking on the Expansion Arrow will:

When in fullscreen preview, you will notice that the Expansion Arrow is still visible in the top-left corner, but the arrow points in the opposite direction. Clicking on the arrow will collapse the Preview screen, revealing the side panel and re-enabling the editing tools. You will toggle between these views a lot when working on your website, so take a moment now to try this. Fullscreen preview is very useful for testing content or design changes, so you can see things exactly as they will appear to your visitors on desktop computers.

However, you can also preview how your website will appear to visitors who use tablets or mobile devices using Squarespace's built-in Device View. You activate Device View by simply dragging the right or left edge of your browser to shrink the width of the window. As you shrink the width, the tablet view will trigger first, and if you continue to drag, the mobile view will trigger once you reach a certain narrower width. Tablet and mobile views display an outline silhouette of the device around the outside of the Preview screen:

Using the Pages area

When you click on the Pages link in the Home Menu, you will notice that the content of the side panel changes to display a list of the pages on your website. As you have not created any real pages yet, you will see the pages that came with your demo site, along with the word Demo next to each of them. You will also notice a link and arrow at the top of the panel that you can use to return to the Home Menu. Here's an example of the Pages panel:

You will use the Pages area to control the site structure. Here, you can add or delete pages and set the type of page (for example, blog, image gallery, or standard text page). You can also control the site's menus here, including reordering pages and creating submenus (drop-down menus).

Click on the Home link at the top of the screen now to return to the Home Menu so we can continue the tour.

Using the Design area

When you click on the Design link in the Home Menu, you will see the following menu appear in the side panel:

As you can see from the Design Menu items, the Design area is where you can input a logo, switch to a different template, adjust the visual style of your website or certain pages within it, and perform other adjustments to control the appearance of your website.

Return to the Home Menu now, and then return to it again after each of the following sections to carry out the rest of our tour.

Using the Commerce area

When you first click on the Commerce link in the Home Menu, a dialog box will open to tell you some about the basic requirements of using Squarespace Commerce. Click on the Get started with Commerce button at the bottom of the box to close it and reveal the main Commerce menu, as shown in the following screenshot:

If you plan to sell goods or services, take donations, or offer paid subscriptions, the Commerce area is where you will set up and manage all commerce-related functions for your website.

You can use Commerce to do the following:

Comments

Click on the Comments link in the Home Menu to expand the side panel to show the following Comments panel:

At present, the Comments panel is empty, but if you have a blog on your site, you will use this area to approve comments, respond to them, remove them, or mark comments as spam.

Settings

The next area accessible from the Home Menu is the Settings area. When you click on Settings, you will see the following menu in the side panel:

You will mainly use the Settings area at the beginning of your project to configure your site and set things up before you start building and populating your site with content. We'll carry out many of these activities in the next part of this chapter.

You can use Settings to set up the following:

You probably won't need to use most of the more technical or advanced settings unless you later find that you want to do some complicated things with your site (usually with the help of a Squarespace developer).