Spacers gonna space

UPDATED FEBRUARY 2021

Let’s start with the obvious question that may be on some of your lips: what actually is a Spacer? Put simply, it’s a way to add... erm... space into your Squarespace pages or break up your content, and we’ll look at why this is useful shortly.

But before we dive in any further, I’ll signpost you to Squarespace’s own guide on using Spacers which is especially handy for the videos on how to add and move them around.

So why would you need to add space?

To understand the role Spacers play, it helps to know the different reasons for using them in the first place.

To vertically space out content

If you’ve ever read anything about design you may have come across the term “white space”. This doesn’t literally have to be white, but it refers to the idea of giving content on a web page room to breathe.

With text you can press Enter to create some space when writing in paragraphs, but you may want a larger gap, or to add space between other types of content, and that’s where a Spacer comes in handy.

To break up content

This is subtly different to adding vertical space, which you’re probably doing more for design reasons. In this instance, you can temporarily use Spacers to break up content in order to move it around. Let’s use text content as an example. Say you’ve written some text, but you’ve decided it would look better in two columns instead of in one box.

If this happens, you can add a Spacer at the point where you want to break apart that text box, and it will split the text into two separate boxes. Once you’ve got the two boxes, you can move one of them so it sits next to the other, and then delete the Spacer.

To make content less wide

By default, whenever you add content like text, images or videos, that block of content will take up the whole width of the page or section you’re editing. A lot of the time this is fine, but a common issue is it can make images huuuuge. So how can you make them less wide?

Because Squarespace always wants to fill the whole width of the page or section, you can’t just click and drag at the side of the image (like you would in a Word document or PowerPoint for example) as there would be nothing to take up the remaining space.

Perhaps you can see where this is going... if only there was a way to add some extra space to the side of the image. Oh wait, our friend the Spacer is here to save us!

Let’s have a look at this with a photo of a dog in sunglasses, because the internet. In the first picture, the pup is mahooosive because he’s taking up the full width.

Whereas in this second picture, there’s a Spacer to the right hand side so now the little dude is taking up half the width.

Squarespace also cleverly ignores the Spacer on mobile phones, when that would generally make the image too small or create too large a gap.

Working with Spacers

Now you understand why they can be useful, let’s look at how to add, resize and move a Spacer. The best way to learn with this is by doing, so I’d encourage you to have a play around. If you’re worried about messing up your existing content, create a new page in the Not Linked section that you can use for testing. Just remember to disable the page so it doesn’t show up to anyone but you!

Adding a Spacer

1. Go into edit mode, and hover over the content on the page

2. You’ll see some blue lines and a + symbol. These are called “insert points” by Squarespace

3. Click on one of the + symbols and you’ll see a list of the different types of content you can add (if you haven’t come across this before I’ll just pause whilst you have your mind blown)

4. There, in the top section, you will see Spacer as one of the types of content you can add

5. Click on Spacer and you will see it add a block of blank space to your page

Resizing a Spacer vertically

1. Click anywhere in the Spacer

2. Look for the little grey circle in the middle along the bottom

3. If you hover over that, you’ll see a two way arrow

4. Click and drag the arrow to make the Spacer bigger or (a little bit) smaller

Resizing a Spacer horizontally

1. Move the Spacer next to another content block (see below)

2. Hover anywhere along the side that is touching another content block

3. Click and drag the two way arrow to change the width of the Spacer

Moving a Spacer

1. Shit is about to get real... this is probably one of the fiddliest bits of Squarespace but I have faith in you

2. Seriously though, do this on a test page or at least make sure you’ve saved your work before you start moving Spacers about

3. Okay, now you’re ready

4. Click and drag a Spacer next to another content block BUT before you let go, look out for a blue vertical line at the side

5. That blue line tells you which content is going to be resized when you drop the Spacer in so you need to make sure it’s only aligned to the content you want to move, otherwise it’s easy to accidentally move everything within that page or section

6. Experiment with hovering the Spacer in different places on the page before you let go, and see what happens to the blue line

7. The sweet spot is normally when you hover over the other content block about an inch from the top or bottom, and an inch from the side; it is really fiddly but you will start to get a feel for it

8. Don’t panic if you let go in the wrong place, just delete the Spacer and start again

9. When the blue vertical line is aligned to the relevant content block, let go and you will now see them side by side

10. Celebrate with a glass of wine or your favourite tipple

The principles behind this also apply to moving other blocks of content, for example putting two images or two text boxes next to each other. If you’re still struggling, Squarespace have a guide to moving content blocks.

Blimey, who knew there was so much to say about Spacers, eh? Not me when I started writing this, before my dinner went cold 😬 If there’s anything here that doesn’t quite make sense, or you have questions on something else to do with Squarespace, get in touch or ask me on Insta @sqspqueen.