Quick Start Beginner Tutorial

Template Overview What is JSON? View JSON Data Templating Basics

Template Configuration Layouts & Regions Template Partials Menus & Navigation Folders & Indexes Collections Static Pages

What is JSON-T? JSON-T Directives JSON-T Predicates JSON-T Formatters JSON-T Helpers JSON-T System Variables

Open Block Field Navigation Tag Category Tag Custom Query Tag

Custom JavaScript Image Loader

Local Development Custom Post Types Template Annotations Style Editor Error Reporting URL Queries

Layouts & Regions

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

Single Layout Sites

At its 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>
    <title>My Squarespace Site</title>
  </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>

    <main id="canvas">
      <section id="page" role="main" data-content-field="main-content">
        {squarespace.main-content}
      </section>
      <aside id="sidebar">
        <squarespace:block-field id="sidebarBlocks" label="Sidebar Content" />
      </aside>
    </main>

    <footer id="footer">
      <squarespace:block-field id="footer-blocks" columns="12" label="Footer Content" />
    </footer>

  </body>
</html>

Example layout definition in template.conf:

...

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

...

Multiple Layouts

While single layout sites are the norm and work perfectly well for most sites, some more advanced sites may require different thinking - that's why you can enable multiple layouts in a Squarespace template.

Consider the 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 (only code from the site header)
footer.region (only code from the site footer)

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

full-width.region (no sidebar in the markup)
sidebar.region (contains sidebar markup)

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:

Site-wide default layout – the layout called "default" in template.conf will be the site-wide default template.
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.
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.