Table of Contents
.png?table=block&id=219105a2-9d95-81c4-b378-d24d40e45b79&cache=v2)
Last Edited Time
Jun 25, 2025 09:35 PM
Do not index
Do not index
Suggested Tag
Fluid Engine
squarespace
layout customization
Tags Synced
Tags Synced
AI summary
Fluid Engine allows for flexible drag-and-drop layouts on Squarespace, enabling separate designs for desktop and mobile. Key features include block positioning, layering, and design settings, with a recommendation to keep pages under 60 blocks for optimal loading speed.
Last edited by
Platform
Category
Topic
Fluid Engine on Squarespace: A Complete Guide
Fluid Engine gives you proper control over your Squarespace layouts. Instead of being stuck with rigid templates, you can drag and drop blocks exactly where you want them. Here's how to use it properly.
TL;DR: Key Points
- Fluid Engine lets you drag and drop blocks anywhere on your page
- You can design desktop and mobile layouts separately
- Once you upgrade from the classic editor, you can't go back
- Keep pages under 60 blocks for better loading speeds
- Pin blocks to create layered designs
- No spacer blocks (you move blocks manually instead)
Is Your Site Using Fluid Engine?
Easy check: when you edit a page section, do you see an "Add Block" button and a grid background? If yes, you're using Fluid Engine. If you see the old sidebar with pre-made layouts, you're still on the classic editor.
All new Squarespace 7.1 sites use Fluid Engine by default, but older sites might need upgrading.
Setting Up Fluid Engine
For new sections:
- Click "Edit" on your page
- Select "Add Section"
- Choose a Fluid Engine template or start with a blank section
- Drag the corner handle (bottom-right) to adjust the section height
Upgrading existing sections:
When you edit an old section, Squarespace will prompt you to upgrade to Fluid Engine. Remember: this change is permanent once you save.
Working with Blocks
Adding Blocks
Click "Add Block" and choose your content type. The block appears in the top-left of your section by default. Drag it wherever you want.
Resizing and Positioning
- Drag the corner handles to resize blocks
- Click and drag the block itself to move it
- Blocks snap to grid lines (this keeps things aligned)
Layering Blocks
You can overlap blocks for creative layouts. Right-click any block and choose "Bring to Front" or "Send to Back" to control which appears on top.
Block Limits
Stick to around 60 blocks per page maximum. More than this and your page starts loading slowly, especially on phones.
Mobile vs Desktop Layouts
This is where Fluid Engine really shines. You design once for desktop, then switch to mobile view and adjust everything for smaller screens.
To edit mobile layouts:
- Click the mobile icon in the editor
- Rearrange blocks specifically for mobile
- Resize blocks to fit mobile screens better
Your desktop and mobile layouts work independently. A block that's huge on desktop can be tiny on mobile, and vice versa.
Design Settings
Click the "Design" tab while editing a section to adjust:
- Row height: How tall each grid row is
- Block spacing: Gaps between blocks
- Section alignment: Left, centre, or right alignment for the whole section
Use the "Format" tab for padding around the section edges.
Common Questions
Can I switch back to the classic editor?
No. Once you save a section with Fluid Engine, that's it. If you're unsure, duplicate your page first as a backup.
What happened to spacer blocks?
Fluid Engine doesn't use them. Instead, you create space by positioning blocks manually or adjusting the block spacing in Design settings.
Can I copy layouts between pages?
Yes. Save sections as templates or copy entire sections between pages using the section options menu.
Quick Tips
- Start simple. Add a few blocks, get comfortable with moving them around, then try more complex layouts
- Use the grid lines. They keep everything aligned and professional-looking
- Preview your mobile layout regularly. What looks good on desktop might be a mess on phones
- Pin blocks to create interesting overlapping designs, but don't overdo it
Jargon Explained
Fluid Engine: Squarespace's drag-and-drop page builder that replaced the old template system
Blocks: Individual pieces of content (text, images, buttons, etc.) that you can move around
Grid: The background lines that help you align blocks properly
Pinning: Fixing a block in a specific position so other blocks can overlap it
Getting Started
Fluid Engine feels different from the old Squarespace editor, but it's much more flexible once you get used to it. Start with a simple layout (maybe just a heading and some text), then gradually experiment with more complex arrangements.
The key is understanding that you're designing two layouts: one for desktop and one for mobile. Don't assume they'll be the same.