Layouts & Regions

Site layouts define the HTML 'wrapper' for your site... everything from <!doctype html> to </html>.

Single Layout Sites

At it's simplest, a layout is one file (typically named site.region). This is used as the main template (like index.php in Wordpress).

Example simple layout file (site.region):

<!doctype html>
<html>

<head>
  {squarespace-headers}
</head>

<body class="{squarespace.page-classes}" id="{squarespace.page-id}">

  <header id="header">
    <h1><a href="/">{website.siteTitle}</a></h1>
    <squarespace:navigation navigationId="mainNav" template="navigation" />
  </header>

  <div id="canvas">

    <section id="page" role="main">
      {squarespace.main-content}
    </section>

    <aside id="sidebar">
      <squarespace:block-field id="sidebarBlocks" />
    </aside>

  </div>

</body>

</html>

Example layout definition in template.conf:

...

"layouts"  : {
    "default" : {
        "name" : "default"
        "regions" : [ "site.region"]
    }
}

...

Multiple Layouts

Single layout sites are great and all... but cool kids like to mix it up with multiple layouts.

Consider the common case where the homepage has a different layout than the sub pages. Let's say that the homepage is full-width and the sub pages have a sidebar... so the header and footer regions are the same, but the middle content section is different.

Step 1: Create Multiple Region Files

First, create the shared layouts:

  • header.region
    footer.region

Then create the two different regions for the middle content section:

  • full-width.region
    sidebar.region

Step 2: Configure Layouts

Set up the multiple layouts in your template configuration file (template.conf):

...

"layouts" : {
  "default" : {
    "name" : "Sidebar",
    "regions" : [ "header", "sidebar", "footer" ]
  },
  "homepage" : {
    "name" : "Full Width",
    "regions" : [ "header", "full-width", "footer" ]
  }
},

...

Step 3: Set Default Layouts

Layouts can be set per page (via Page Settings in the interface), but you can make things easier for the user by setting the default layouts for specific types of pages.

There are three options for setting default layouts:

  1. Site-wide default layout – the layout called "default" in template.conf will be the site-wide default template.
  2. Collection-specific default layouts – you can specify a default layout for each type of collection in the collection configuration file (collectionName.conf) using the "layout" variable.
  3. Folder-specific default layouts – you can specify a default layout for pages/collections within a folder in the folder configuration file using the "layout" variable. Folder defaults override collection defaults.

You can also specify the default homepage layout. If you add a layout variable named "homepage". See example above. The homepage default layout overrides all other default layouts.