Moving Blocks in Squarespace
TL;DR:
- Move blocks within pages to customize layouts (you can't move them between different pages)
- Squarespace 7.1 uses the Fluid Engine for flexible placement with separate mobile/desktop views
- Classic Editor (7.0) uses a fixed grid system that affects both desktop and mobile together
- Use alignment tools and group selection to speed up your layout work
- Each editor has different strengths depending on what you're trying to achieve
Moving blocks around in Squarespace is straightforward once you know the basics. Hover over any block until your cursor changes to a hand icon, then click and drag to where you want it. You'll see guidelines appear to help you position it correctly.
The key thing to understand is that you can only move blocks within the same page or content area. You can't drag them between different pages.
Fluid Engine vs Classic Editor
Your block-moving experience depends entirely on which version of Squarespace you're using.
Fluid Engine (Squarespace 7.1)
The Fluid Engine gives you much more freedom. You can place blocks anywhere within a grid system, overlap them, and create completely different layouts for desktop and mobile views.
Positioning blocks
Drag blocks wherever you want within the content area. To center a block, drag it towards the middle until you see a yellow alignment line. For a full-width effect, drag the block to the edge of the grid.
Handling overlaps
When blocks overlap, use the toolbar options to layer them properly. Click on an overlapped block and choose 'Move Forward' or 'Move Backward' to get the stacking order right.
Working with groups
Select multiple blocks by dragging across them, then move or align them together. This saves time when you're repositioning several elements at once.
Classic Editor (Squarespace 7.0)
The Classic Editor works differently. It uses a more rigid grid system where blocks snap into rows and columns. There's no overlapping, and changes you make affect both desktop and mobile views at the same time.
Creating structure
Drag blocks until you see guide lines showing where they'll land. The editor will create rows and columns automatically based on where you drop them.
Adjusting column widths
Click between blocks and drag sideways to change how much space each column takes up.
Layout Tips That Actually Work
Separating text blocks
If you're stacking text blocks and they keep merging together, drop a line or spacer block between them. This forces them to stay separate.
Mobile considerations
In the Classic Editor, mobile layouts stack vertically automatically, following your desktop arrangement. With the Fluid Engine, you get separate mobile controls, so check both views regularly to make sure everything looks right.
Testing as you go
Don't build your entire layout before checking how it looks. Switch between desktop and mobile views frequently, especially if you're using the Fluid Engine.
FAQs
Can I move blocks between different pages?
No, blocks only move within the same page or content area. If you want the same block on multiple pages, you'll need to recreate it.
How do I align several blocks at once in the Fluid Engine?
Select multiple blocks by dragging across them, then use the 'Align Group' button in the toolbar that appears.
Do I need spacer blocks in the Fluid Engine?
Not usually. The Fluid Engine gives you enough control over spacing and positioning that spacer blocks are rarely necessary.
Jargon Buster
Fluid Engine – Squarespace 7.1's layout system that lets you place blocks freely with separate mobile and desktop configurations
Classic Editor – The older layout system (Squarespace 7.0) that uses a structured grid without overlapping
Full-bleed – When content extends to the very edge of the screen with no margins or borders
Wrap-up
Getting comfortable with block movement makes a huge difference to how your site looks and functions. The Fluid Engine gives you more creative freedom but requires more attention to mobile layouts. The Classic Editor is more restrictive but handles responsive design automatically.
The best approach is to start simple and build up complexity as you get more comfortable with whichever system you're using. Regular testing across different screen sizes will save you headaches later.
Join Pixelhaze Academy to get more hands-on Squarespace training and support.