I thought it was time for some short but sweet technical posts, so over the coming weeks I’m going to highlighting some of my favourite Squarespace blocks. Starting this week with the spacer block. 

The spacer is undoubtedly my number 1 most used, most useful block in Squarespace. I’ve been doing quite a lot of consultancy and support work recently and many of the authors I’ve been working with haven’t even heard of this block, let alone made use of it.

So, without further ado, let me sing the praises of… the Squarespace spacer block! 

Set up your own Squarespace website but never heard of it? You are not alone. And you’re in for a treat, as this block is going to change your life. Or, at least, your website….

The spacer block is exactly what it sounds like – a block that adds space to your website.

So why is this so useful? Let me explain…

I’ve done a little video demo of this in case you find visual instructions more helpful, but keep scrolling for more info!

1 It allows your content to breathe

Using the spacer block helps you to spread out elements on your site (which you should do) to help things breathe and help draw attention to the content you want.

In 2020, we don’t want our website to look cluttered and we certainly don’t want wall-to-wall text or images (that stretch the entire width of our website).

Remember: less is more when it comes to website design. People tend to skim read pages, so lots of white space around select images and short, to-the-point text helps the eye find it.

There are two ways to use a spacer block to add space around your content.

Either by putting them above and below it to space out the different sections on your site, or by popping spacer blocks either side of image and text blocks, to make those blocks narrower.

2 It allows you to create grid layouts super easily

This is a real game-changer, and a trick my website clients love when I show them on our training calls.

You can add spacer blocks side by side one another to help you organise content on your website in a ‘grid’ effect.

All you need to do is add spacer blocks and then drag and drop them side by side one another, so that you create a row of columns.

Then all you need to do is drop the content underneath each column to organise it side-by-side.

This is how I created this effect for my resource library:

You can have as many columns as you like (within reason). This is a REALLY easy way to organise the content on your site.

Best of all, if you don’t want the spacer blocks above your new content grid, once you’re done with the design, you can simply delete this one-by-one, and the grid underneath remains intact.

This is SO useful and something I use in every single website I design. 

3 It allows you to increase the height of banner images

Last but not least, a nifty trick that’s especially useful if you have a Squarespace website on a template like Bedford, that uses full-width banner images for headers.

Adding spacer blocks on top of your banner images makes them appear deeper, and is really useful for creating striking header images on the main pages of your website.

I use them for my homepage and all the main landing pages – and I have a ton of spacer blocks on top of each image to make sure the header image is displayed to best effect.

All you need to do is click an insert point on top of your banner image, then select the spacer block. Add as many as you like, until you’re happy with the size the image is appearing.

Hope that made sense and was helpful! If you have any questions, just let me know. 😊

Looking for help with your Squarespace author website? Check out my website support services here>>