Hello, and welcome to Speckle’s Squarespace Template!

This template is designed to support you to get designing and building in Squarespace, faster. There’s a little bit to know when getting stuck into a site build, and it’s worth referring back to this page as you work your way through to help keep you on track and answer any niggling questions you may have.

Getting started

There’s a few key steps you’ll need to undertake to start building your site out using our template.

  • The first thing to do is make a copy of this template, so you have your own space to work from (we don’t want to accidentally override anything in the template!)

    Go to the Squarespace dashboard and locate this file. You can click on the three dots and select “Duplicate” to make your own copy!

  • Hurrah, you have your own template, and now you’re here reading this.

    The first decisions to make when you’re building out your Squarespace website are about your site dimensions (max width and site-wide padding). These will dictate how your site translates across devices (does the design stay full width forever, or cap at a certain width on larger screen sizes?)

    You’ll also want to take a moment to update the built-in domain name to the project name (Settings > Domains), and set up a password for the site, and ensure Fluid Engine is switched on (Settings > Advanced > Circle Labs).

  • The next job is to configure your colour palette (which ideally is known and signed off before you begin). Click your paintbrush and go through to set up your palette and how many variants you’ll be using. You can test out how these look on the “Playground” page.

    The next step is to go through and set up your custom CSS (you won’t be able to do it all right now, but we can get the bones started). Under Design > Custom CSS, we’ve built out the majority of the CSS elements you’re likely to need – particularly for fonts, buttons, components etc. Go through and upload your custom fonts, select your sizing / colours etc.

  • We’ve crafted a Kitchen Sink page as well as some other typical layouts you can duplicate and use as the basis for building out your pages. Remember, these are just the basic blocks to get you going, so you have more time to focus on the design and how the pages will come together.

Help, I’m stuck!

That’s okay! Happens to everyone. There are 4 escalation steps to follow:

  1. Have a think about whether there’s a lateral solution to your problem (is custom coding the only option?). Oftentimes it is, but sometimes there’s ways to work around problems, so start there. Assuming you do need some coding:

  2. Have a bit of a Google and see if there’s a clear (and quick!) answer to the question you have. Often times there’s a simple snippet right there you can use. Have a crack for 15-20 minutes – if you’re not getting anywhere (or feel like throwing your laptop at a wall), take a break and move to step 2.

  3. If that’s not working, the next step is to hit up your manager (or escalate to Ash if it feels ✨tricky✨). We’ll quickly determine if it’s something we can fix (and if yes, explain how via Loom), or move to step 4.

  4. Time to outsource. There’s a lot we can do ourselves with Squarespace, but we can’t do it all (we’re not developers, after all!) Liaise with your project manager to pop together a brief for what needs doing, and list the task on Upwork for an outsourced developer to lend us a hand.