Squarespace Fluid Engine Complete Guide
TL;DR:
- Fluid Engine lets you drag, drop, and resize content blocks anywhere on your Squarespace 7.1 pages
- Works on pages, footers, and portfolio projects but not on auto-layout sections
- You can upgrade classic editor sections to Fluid Engine, but this can't be undone
- Pin blocks to keep them in place while users scroll, and add background colours for better visibility
- Mobile layouts work independently from desktop versions
Fluid Engine is Squarespace's flexible editing system for version 7.1 sites. It replaces the rigid structure of older editors with a drag-and-drop interface that lets you place content blocks exactly where you want them.
Think of it like moving furniture around a room. Instead of being stuck with preset layouts, you can position text, images, and buttons anywhere on your page by simply dragging them into place.
Getting Started with Fluid Engine
To start using Fluid Engine, head to any page on your 7.1 site and click Edit. When you add a new section, choose "Add a blank section" for a completely flexible canvas, or pick from the pre-built options.
You'll notice some sections have a small "i" icon next to them. These are auto-layout sections that don't use Fluid Engine, so they'll behave like the old classic editor.
Upgrading Classic Sections
If your site has older sections from the classic editor, you can upgrade them to Fluid Engine. Click Edit on your page, then look for the "Upgrade" button at the top-left of any classic section.
The upgrade happens instantly and your content stays in place. Just remember that once you upgrade and save your changes, there's no going back to the classic editor for that section.
Working with Blocks and Sections
Fluid Engine gives you plenty of control over how your content looks and behaves:
Adding Content: Click "Add Block" to drop in text, images, buttons, or any other content type. You can then drag these blocks anywhere within your section.
Pinning Blocks: Pin any block to keep it in a fixed position while the rest of your page scrolls. This works great for navigation elements or important calls-to-action.
Background Options: Add background colours to individual blocks to make them stand out or improve readability against busy images.
Image and Button Settings: Toggle between "fit" and "fill" options to control how images and buttons fill their space. "Fit" keeps the entire image visible, while "fill" crops the image to completely fill the block.
Layout Controls: Adjust row counts, gaps between elements, and fill settings to get your spacing just right. These controls help you create clean, professional layouts without wrestling with code.
Mobile Design
One of Fluid Engine's best features is independent mobile editing. Changes you make to the mobile layout won't affect your desktop version, and vice versa.
When you're in mobile preview mode, you can rearrange blocks completely differently from your desktop layout. This means you can optimise the mobile experience without compromising your desktop design.
For example, you might want a two-column layout on desktop but stack everything in a single column on mobile. Fluid Engine makes this simple.
FAQs
Can I switch back to the classic editor after upgrading to Fluid Engine?
No, once you upgrade a section to Fluid Engine and save your changes, the conversion is permanent.
Is there a limit to how many blocks I can add?
There's no hard limit, but keeping under 60 blocks per page helps maintain good loading speeds.
Can I pin any type of block?
Yes, any block can be pinned regardless of its content type.
Do Fluid Engine features work on Squarespace 7.0 sites?
No, Fluid Engine is only available on Squarespace 7.1 sites.
Jargon Buster
Fluid Engine: Squarespace's flexible drag-and-drop editor for 7.1 sites
Blocks: Individual content elements like text boxes, images, and buttons
Classic Editor: The older, more rigid Squarespace editing system
Auto-layout sections: Pre-built sections that don't use Fluid Engine's flexible positioning
Pinning: Keeping a block in a fixed position while the rest of the page scrolls
Wrap-up
Fluid Engine transforms how you build Squarespace sites by giving you complete control over where your content goes. The ability to design mobile and desktop layouts independently means you can create truly responsive sites that work well on any device.
Start with simple layouts and gradually experiment with more complex arrangements as you get comfortable with the tools. Remember to keep your block count reasonable for the best performance.
Join Pixelhaze Academy for more Squarespace tutorials and hands-on training.