3 Ways To Use The Spacer Block In Squarespace
New to Squarespace and wanna try it out? You can sign up for a free trial here << Yes, that’s an affiliate link - thanks for supporting my book obsession, my kindle and I thank you ;)
When you're designing a Squarespace website sometimes it's the little tricks that can make building it that much quicker and easier. So I thought I would share with you 3 of my favourite little tricks and tips about using the spacer block to help you.
Now I wouldn't call any of these tricks 'life changing' BUT they can make an immense amount of difference when you're constructing or redoing your website.
They can save you time and save your sanity so you don't want to pull your hair out because you just want it to do this 'one thing' and you can’t seem to make it happen.
So to help you all out - here we go:
1. Map Out Your Website
The spacer block's purpose is to use what it's namesake says and build 'space' in your website.
There's often times when constructing your website that visually, you need some 'white space' between design elements. So instead of having your text butt up against a photo or other content you insert a 'spacer block' to increase the white space between them to make it more visually pleasing for the eye to skim over.
That's the spacer blocks purpose in your website and it's a good one. But it's not the only thing you can use it for and that's what I want to talk about.
You can also use the spacer black in Squarespace to layout your website and it's content.
For example, say you want three columns of text all next to each other. You add 3 text blocks and then try to line them up next to each other but they either keep getting out of order. You can line up two perfectly but you can't get the third one right or perhaps you try to line them up but instead of them sitting next to each other one of the text blocks keeps wrapping around the other one.
It can sometimes be frustrating lining up all the elements exactly how you want them.
That's where the spacer block comes in handy. You can lay out your spacer blocks in the columns that you want and then after they are positioned where you need them, simply hover over the spacer block and the little teardrop icon will appear, just for that spacer's section. You can then go in and add whatever blocks you want underneath each spacer without anything becoming messy and frustrating.
Then once you're done, you can remove the spacer blocks and voila... your website is perfectly spaced with none of the stress.
I usually use this trick to lay out all of the content on a page when I’m designing it. It makes it so much easier to lay everything out and place all the blocks where I want them before I go in to add my content.
Give it a try, it’s really a handy way to use the spacer block.
2. Decrease the Size
When you add a spacer block to your website it comes pre-formatted at a certain size - which is determined by Squarespace. But what a lot of people don't realise is that you can change the size of the spacer block too.
Simply click inside the spacer block after you've added it and you'll see a little dot appear on the bottom line of the block in the centre. Click on that dot and you're able to increase or decrease your spacer sizing up and down.
It will still have some limitations but incase you need to decrease or increase the size in one section but not others - now you know how to do it.
But before you go spacer crazy and start using it willy nilly throughout your website - a word of warning.
Websites look best when there's consistency. Huge spacer gaps in one section and small spacer gaps in others is visually unappealing.
And even though your potential clients probably aren't artists, graphic designers and such they still notice these details on a subconscious level and base their opinions on a 'feeling'. You want that 'feeling' to be one of professionalism and beauty. And mismatched spacing throughout your website can potentially hinder that.
That's why I recommend either using the spacer block at its normal, pre-formatted size or using it at its most decreased size (Squarespace doesn't allow the spacer block to be decreased to 0 - it still has a predetermined spot that it stops at when you decrease its size). And then using that one size consistently throughout your website. Not chopping and changing every time.
This will leave your website looking and feeling much fresher and visually appealing.
3. Decrease the White Space on Mobile
Ok - so you have your website set up perfectly, spacing looks great and you're happy with how your website looks. You just have to do a quick look at the mobile view and you'll be all set to go live with your website.
You click to view it on mobile and nooooo..... As you scroll down your website you realise that you have huge amounts of white space happening between everything! There's so much 'space' your website visitors will think that you either don't have anything on the page or they'll be scrolling forever to see stuff.
You frantically go back to desktop view and start to try to change the spacing.
But that just ends up stuffing up what the desktop view looks like.
It's at this point that you probably want to crawl up in a little ball and cry from frustration. Am I right?
But don't fear, I have a quick fix that can help you out that will leave viewing your website on desktop looking great as well as on a mobile device.
The trick - insert two spacer blocks instead of one.
Wherever you have too much white space on mobile because of a spacer block - but you need the white space on desktop view - simply add two spacer blocks side by side, instead of one.
When you add two spacer blocks next to each other, they actually cancel each other out and the spacing disappears on mobile view - but stays the same on desktop view.
Boom! Your website is back to looking great, you didn't have to sacrifice your firstborn to make it so and you can save the crying binge for when you really need it - during sad movies :)
So give it a go and you'll see what I mean.
And there you go - three quick tips to get the most out of the spacer block. Who knew it could be so versatile?
Go ahead, give these little tips a try and I'm sure you'll be converted too. Let me know how you go in the comments :)
LIKE THIS POST - THEN YOU’LL ALSO LOVE…
Have I made you curious? You can sign up for a free Squarespace trial here << Yes, that’s an affiliate link - thanks for supporting my book obsession, my kindle and I thank you ;)
