.png?table=block&id=218105a2-9d95-81cc-be35-f55e14cb820a&cache=v2)
Last Edited Time
Jun 25, 2025 09:35 PM
Do not index
Do not index
Suggested Tag
squarespace
spacer blocks
layout optimization
Tags Synced
Tags Synced
AI summary
Spacer blocks in Squarespace 7.1 are used to create space in Blog and Events sections but are not supported in the main Fluid Engine. They can be resized for layout adjustments, but behave differently on mobile. Testing is essential for mobile layouts, as spacers may disappear or not function as expected.
Last edited by
Platform
Category
Topic
Using Spacer Blocks on Squarespace
Learn how to use Spacer Blocks to improve your page layout on Squarespace.
Important note: Spacer blocks only work in Squarespace 7.1's Blog and Events sections, which still use the old 7.0 layout engine. The main Fluid Engine layout system doesn't support spacer blocks at all. If you're working on regular pages in 7.1, you'll need to create spacing by dragging blocks and using the positioning tools instead.
TL;DR: Key Points
- Spacer blocks add space between elements but only work in Blog and Events sections in Squarespace 7.1
- Not supported in the main Fluid Engine layout system
- You can resize images and blocks by adjusting spacer block size
- Spacer blocks behave differently on mobile displays
What Are Spacer Blocks?
Spacer blocks are simple elements that create breathing room in your layout. They're invisible blocks that push other content apart, helping you avoid cramped designs.
Think of them as transparent boxes that take up space. You can make them tall, short, wide, or narrow depending on where you need extra room.
How to Add Spacer Blocks
Here's how to add one (remember, this only works in Blog and Events sections):
- Edit your blog post or event page
- Click where you want to add space
- Choose 'Spacer' from the block menu
- Drag it to the exact position you need
The spacer will appear as a dotted outline when you're editing. Your visitors won't see anything there except empty space.
Pro tip: Always check how your spacers look on both desktop and mobile before publishing. What looks good on your laptop might create awkward gaps on a phone.
Adjusting Spacer Size
You can resize spacers to control exactly how much space they create:
- For height: Click the spacer and drag the handle up or down. Hold Shift while dragging to resize in neat increments
- For width: Click and drag the side handles left or right
When you resize a spacer, it can also affect the size of blocks next to it. This is actually useful for fine-tuning your layout without touching the content blocks themselves.
Mobile Behaviour
Spacers work differently on mobile:
- If a spacer sits next to other blocks, it disappears on mobile to save screen space
- If a spacer sits above or below other blocks, it only shows on mobile in specific template families (Brine, Farro, and Pacific)
This means you can't rely on spacers for consistent mobile spacing. Always test your mobile layout separately.
Common Questions
Can I use spacer blocks on regular pages in Squarespace 7.1?
No. Spacer blocks only work in Blog and Events sections. For regular pages, you'll need to position blocks manually using the Fluid Engine tools.
Do spacers affect my site's loading speed?
Not really. They're just empty containers, so they don't add any weight to your pages.
Can I add background colours to spacers?
No. Spacers are always transparent. If you need a coloured block, use a text block with a background colour instead.
What You Need to Know
- Spacer Blocks: Invisible elements that create adjustable gaps between content
- Fluid Engine: Squarespace 7.1's main layout system where spacer blocks don't work
- 7.0 Layout Engine: The older system still used in Blog and Events sections where spacers do work
- Mobile Display: How content appears on phones and tablets (spacers often disappear here)
Bottom Line
Spacer blocks can be handy for fine-tuning your blog and event layouts, but they're becoming less relevant as Squarespace moves away from the old layout system. For most of your site design, you'll get better results learning how to use the Fluid Engine positioning tools properly.
If you're still using spacers, just remember they're unreliable on mobile. Don't depend on them for critical spacing in your design.