The canvas is the part of the web page that contains all of the content, visual, and navigation elements. The canvas is usually the main outer container within which everything else sits. However, the canvas is not always the full width or height of your web browser window: sometimes, template designers leave borders around the edges of the canvas to allow a background image, color, or pattern to show behind the canvas.

Most templates have a header at the top of the page that contains the main site navigation and the logo or site title. In the web industry, we often refer to the main navigation area as a navigation bar—or navbar for short. Many templates separate the navbar from the rest of the header using a visual separator, such as a horizontal line or a different background color. The header may also contain a header image, also known as a banner image. Depending on the template, the header may also display the site's tagline or other short text.

Header shown on the Five template

In certain templates, there is no header at the top of the page; instead, the logo and navigation appear vertically along the left-hand side of the page, as shown in this example:

The Supply template with a vertical navbar instead of a header

The body contains all of the main content and functions of the page, usually comprising text, images, and video. In Squarespace, each chunk of content is referred to as a content block. Content blocks can be arranged within the page body in many different ways—for example, in multiple columns or with text wrapping around images. This is how you control the page layout. We will learn a lot more about content blocks in the next chapters.

The body usually sits below the header and above the footer.

The footer sits along the bottom of the page and usually contains general information such as a copyright notice or link to social media profiles. The footer can also contain nearly any other type of content block, such as a short description of the site or a newsletter signup form.

A template may include one or more sidebars, which are narrow columns that sit next to the body. Sidebars often contain short content blocks, such as testimonial quotes or a list of blog post categories, and they can sometimes be separated from the body by a dividing line or a different background color. It's easy to confuse a sidebar with a column of content within the page body, but remember that sidebars are structural, not layout, elements. This means that a sidebar appears in the same place with the same contents on multiple pages, like headers or footers. However, unlike headers or footers, which usually appear on every single page, some templates specify that the sidebars only be shown on certain page types, such as blog pages. Most blogs on the Web use sidebars, as do many news sites. The following screenshot displays a sidebar:

Example of a sidebar, shown here on the Galapagos template

Some templates have a different page structure and visual style for the home page than the rest of the site. This often takes the form of a large, fullscreen image that occupies all of the homepage canvas and is useful for creative businesses.

Homepage in the Frontrow template

Some templates are geared toward sites with lots of pages. These templates often include a secondary navigation area—or even a secondary and tertiary navigation. Sometimes, this appears as a navigation area within the footer for things such as terms and conditions or return policies. In other templates, the secondary navigation only appears when you set up a folder with subpages in your site's main navigation. A folder is a navigational container that is used to group a collection of pages together under one main navigation item. Normally, navigation to pages in folders only shows as a drop-down menu as part of the main navbar. In templates with a special secondary navigation setup, the secondary navigation appears as a second navbar or sidebar when you go to a page in the folder to allow visitors to easily navigate between pages within that folder. A good use for this is different categories of products. A secondary navigation area is shown in the following screenshot:

Secondary navigation on the Adirondack template

Some templates take the idea of the folder and secondary navigation even further, choosing to display the different pages within the folder visually on a special type of page called an Index page. An Index page is really just a special kind of folder: a collection of pages grouped together. There are two types of Index pages:

Here's an example of a grid Index:

Index page in the Avenue template

The following screenshot depicts a scrolling Index:

Index page in the Pacific template

In some templates, you can only have an Index collection of photo galleries; this is useful for photographers or designers with lots of projects to show. In other templates, you can only have an Index collection of normal pages; this kind of Index is useful for businesses with lots of case studies, for example. And in others, you can have an Index collection that contains either galleries or pages (or both).

In some templates, you can vary the header image on a page-by-page basis or turn it off entirely on certain pages within your site. Using variable header images is a good way to visually highlight an important concept on that specific page. Turning the header image off entirely is useful for pages such as contact forms, where you may want to remove distractions and keep the page clean.

Some templates have a special feature designed for blogs, events, or news pages with strong visual content, such as photo or video blogs. This feature is called a Promoted Block, and it allows you to put a large image, gallery, or video at the very top of your blog post. Some templates also apply special styling to the Promoted Block, such as showing it in full width to make it stand out even more. This is useful for drawing the eye in or making certain important posts stand out from the rest:

Promoted Block shown in the Boutique template

Some templates make the navbar fixed, which means that the navigation area will be visible even after you scroll. Normally, scrolling down on the page will also scroll the navigation, so it disappears off the top. With fixed navigation, the navbar sticks in place, and the rest of the page content scrolls. This is useful for sites with lots of text or images per page, such as long blog articles, or for sites that use a scrolling Index.