Spacer Blocks on Squarespace
TL;DR:
- Spacer blocks add adjustable empty space between content blocks on web pages
- Create better visual balance by controlling padding and white space
- Resize them by dragging handles vertically or horizontally
- Not available in Squarespace's Fluid Engine – you'll need to position blocks manually instead
- On mobile, spacer blocks next to other content disappear
Spacer blocks are handy tools that let you control spacing between elements on your Squarespace site. They're basically invisible blocks that push other content apart, giving you more control over your page layout.
Adding Spacer Blocks
To add a spacer block, edit your page and click an insert point between existing blocks. Choose "Spacer" from the menu that appears.
Once added, you can resize the spacer by clicking and dragging the handles:
Vertical spacing: Drag the handle up or down to increase or decrease height. Hold Shift while dragging to snap to even increments.
Horizontal spacing: Drag left or right to adjust width.
The visual guidelines that appear while you're dragging help you align things properly and keep your layout balanced.
Fluid Engine and Mobile Behaviour
Fluid Engine doesn't support spacer blocks. If you're using a Fluid Engine template, you'll need to create spacing by manually positioning your blocks with gaps between them.
Mobile display works differently. Spacer blocks positioned beside other content won't show up on mobile devices. This is intentional – it lets content fill the screen properly on smaller devices.
However, spacer blocks placed above or below content blocks will still appear on mobile in most template families, including Brine, Farro, and Pacific.
Always preview your site on mobile to see how your spacing looks without those horizontal spacer blocks. You might need to adjust your layout if the mobile version feels too cramped.
When to Use Spacer Blocks
Spacer blocks work best when you need precise control over spacing that CSS alone can't provide. They're particularly useful for:
- Creating breathing room around important content
- Aligning elements that don't naturally line up
- Fine-tuning the visual balance of your page
Just remember that less is often more. Too many spacer blocks can make your layout harder to manage and might not behave as expected on different devices.
FAQs
Can I use spacer blocks everywhere on Squarespace?
They work in standard Squarespace templates but aren't available in Fluid Engine templates. You'll need to create spacing manually in those.
Will spacer blocks show up on mobile?
Spacer blocks next to content disappear on mobile, but ones above or below content usually remain visible.
How do I get precise spacing with spacer blocks?
Use the Shift key while dragging to snap to even increments. The visual guidelines also help you align with other elements on the page.
Jargon Buster
Spacer Blocks: Empty blocks that create space between other content elements on your page.
Fluid Engine: Squarespace's newer layout system that gives you more control over block positioning but doesn't support traditional spacer blocks.
Insert Point: The blue lines that appear between blocks when you're editing, showing where you can add new content.
Wrap-up
Spacer blocks are simple but effective for controlling your page layout. They give you precise control over spacing that can make your content look more professional and easier to read. Just remember they behave differently on mobile, so always check how your pages look on smaller screens.
If you're using Fluid Engine, you'll need to work with manual positioning instead, but you'll often find that gives you even more control over your final layout.
Ready to take your Squarespace skills further? Join Pixelhaze Academy for more detailed tutorials and expert guidance.