Like, way more.
More than the Text Block. More than any of the Image Blocks. More than even the Instagram Block (blasphemy, I know).
This is the block that will help make your website look less like everyone else’s sites and more like a personal online home that contains all your interests, services, and products and personifies who you really are.
It’s the block that allows you to take any one of the pre-made Squarespace templates and turn it into the a website that stands apart from all the other cookie cutter sites out there.
It’s the block that lets you put your superstar design skills onto center stage and wow every one of your visitors.
The Squarespace block you should be using a whole lot more is (drumroll please 🥁)...
The Spacer Block!
With all that Squarespace gives you, it can be hard to pick a favorite thing. Do you praise them for their SEO capabilities? Do you celebrate them for their great support? Do you make more use of their excellent commerce abilities because they’re just top notch?
I think the answer to all of those questions is a resounding “yes.” What can I say? Squarespace is pretty awesome.
However, what I think stands out from all those excellent features is the Spacer Block. It’s a tool that's far more subtle in what it does for you. It doesn’t have the whizz-bang sexiness of something like a Gallery Block or the eye candy seen in some of their templates. What it does is give you complete control over the appearance and layout of your website.
Perhaps you’re wondering why layout is such an important thing when it comes to your site. “Sean, as long as I can sell my things on there, that’s all that matters to me.” This is a totally valid feeling to have, but I can tell you that you’ll be missing out on something that could rocket your website’s appearance into the stratosphere.
Who doesn’t want a stellar looking website?
I know I do. That’s why I try to make significant use of the Spacer Block in every website I create, including my own. It’s the secret sauce that can help set your website apart from all the rest. You can go from this:
To something more like this:
Give things some space
There are a few excellent uses for the Spacer Block. Each one is something you can take advantage of right away. These suggestions depend on what your vision for your website is like in your head, but they may all come in handy.
One of the most common uses for the Spacer is moving other blocks away from each other. When you add a Spacer between blocks, an expanse of white space is created between them. What was once a seamless flow of content is now broken up into pieces.
Think of it as a way to create a separation of content or subjects. When you stick a Spacer between two blocks of text, for example, you’re giving a visual clue that the text in the first block has little or no relation to the second block.
Likewise, we can break the connection between images, videos, chunks of code, charts, and any other block Squarespace gives you. The beauty of the Spacer lies in how well it can adapt to any situation you may have.
Like many other blocks, you can adjust the height of the Spacer Block, either by increasing or decreasing the size of it. Doing so pushes the content above and below the Spacer away from each other or pulls it all closer together, depending on how you move things.
I’ve used this trick to create more space above and below a block of headline text in an Index Page with a background image in it. When I want to feature more of the image than the text box is allowing me to, then throwing a couple Spacer Blocks in there and making them bigger is a quick and easy solution.
Using the Spacer Block this way may feel like you’re hacking away at your website to get it to behave the way you want it to and I would agree with that. Given the way websites work behind the scenes, though, this is the best way to achieve your vision. Maybe it feels unusual, but you’re doing things the right way.
Get it up close and personal
Let’s talk about the more artistic methods of using the Spacer Block. I want you to think of a website as a blank page that’s made up of 12 separate vertical blocks spaced evenly apart. As a crude example, picture it like this:
This is pretty much the starting point for all modern websites. You’re given space within a grid of twelve columns to place and design all your content. You can use any variation of those twelve blocks for your site:
- 12 pieces of content spread horizontally across the page.
- 2 pieces of content, each taking up 6 columns (or 4 and 8 columns or any other ratio) of the page.
- 4 pieces of content, each taking up 3 columns.
- 3 pieces of content, one piece taking up 6 columns and the other two taking up 3 columns.
There are any number of ways to create the look of a website using this column layout. The results depend entirely on your imagination.
With that in mind, we can see how the Spacer Block can be used to create wonderfully even spacing on the sides of other content blocks. For instance, say you want a block of text to exist only on the left half of a page instead of stretching all the way across.
This is a piece of cake with a Spacer Block. When the Text Block is placed and full of all its content, the only other thing left to do is add a Spacer Block underneath the Text Block and then drag it over to the right side of the text. Drop it there and watch the Text Block scoot on over to the left side of the page.
You can also drag the sides of the Spacer Block left or right to increase or decrease the width of the Spacer as you see fit.
At this point, the world of website layout becomes pretty infinite. You’re only going to be constrained by your imagination. Try not to worry if this feels daunting. Just give some experimentation a shot. Try placing Spacer Blocks on the sides of other blocks and see what you can come up with. Chances are it’ll be something neat.
Stack it up
I wrote about vertical spacing a couple steps above this one, but that was in the sense of separation. Now I want to show how you can use vertical spacing in a way that's more about design and less about disconnection.
I’ve used Spacer Blocks to give visual flair to content that need to stay connected because of its subject matter. For example, instead of showing a completely horizontal row of text or images, you can create a stair step appearance to those blocks.
This way the information in this section of the website stays connected, but there’s an undeniable improvement to how these numbers are shown. There’s no reason why you can’t give stuffy old data a fresh new style.
You can stack as many Spacer Blocks on top of each other as you need. I recommend not going overboard on the Spacers in cases like these, though. Doing so can make things look pretty wonky on mobile devices. Don’t be afraid to give it a try and test out how things look on different screens, though. You may like the results.
Adding vertical space to blocks can also help you give certain elements on your website some extra visual weight. A good example of this is showing the hierarchy of job positions on a business’s website.
By adding a Spacer above the two people on either side of the CEO in the image above, we’re giving extra importance to the person in the middle. This is a subtle visual clue that the CEO is sitting on top of the job pyramid at this company. Plus, it makes this page of the website look pretty awesome.
As with everything else when it comes to making a website, experimenting with tools and different looks is what’s going to help elevate your website. You’ll earn more creative freedom which may result in a site that stands well above the rest.
The Spacer Block is one of those tools that will help you get to that point. For such a seemingly simple block, it sure has a heck of a lot of power behind it. That’s the reason why I believe you should be using it a lot more than you may already be.
It may not have the instant appeal of, say, the Image Block, but it can do way more than any other block once you start playing around with it.
Give yourself some space, cats.