A Complete Guide to Fluid Engine: The New Squarespace Editor
What is Fluid Engine?
Fluid Engine is the new editor for Squarespace 7.1 websites. It uses a grid based system, which means there’s a lot of flexibility and opportunity for new layouts in Squarespace. It offers the highest level of control and features of any iteration of Squarespace, and I 100% recommend getting used to this version as it will eventually become the standard for Squarespace 7.1 websites.
It has not been added to Squarespace 7.0 and is unlikely to be added in the future.
Squarespace Fluid Engine is still very new, and you may experience the odd bug or issue. I’m expecting these to be ironed out over the coming weeks/months, but stay patient in the meantime.
Why does Fluid Engine exist?
Now dubbed the Classic Editor, Squarespace’s older “drag and drop” system couldn’t really be described as that.
You couldn’t just drag a text block around a page without disrupting five other elements in the process. It used a 12-column system which limited the layouts you could achieve, and the overall experience wasn’t very intuitive.
Fluid Engine aims to improve all that. It takes the Classic Editor a step further thanks to the new grid-based system, and now supports a much more predictable, expected drag and drop experience.
I imagine you’ve used Canva before. It’s a simple design tool which enables you to drop pictures and text onto a canvas and drag the corners to make them bigger. (plus a ton of other features). Canva is a very obvious tool to use - it works like you would expect it too. Now, Squarespace is taking on that idea.
Comparison between the appearance of Classic Editor and Fluid Engine on Squarespace.
What are the new features of Fluid Engine?
Fluid Engine isn’t just a new experience, it’s also a ton of new features. Features that have been highly requested (and ignored) until now. Here’s the lowdown on exactly what’s new with Fluid Engine, and why I think it’s a step forward in the right direction for Squarespace.
Better Drag and Drop Experience
The grid system is the biggest and most obvious change.
Instead of being limited to designing inside 12 columns, we now get 24 columns as part of a grid. This means we can get a lot more specific with placing blocks, and they’re not just forced to the top of the page either.You can now move blocks without disruption.
In the Classic Editor, blocks relied on each other for sizing and placement. This meant if you made one smaller, another would get bigger. If you deleted one, the other would take up the entire space. This was unexpected and frustrating for a lot of people. Now, blocks don’t affect each other.Resizing is done by dragging the corner.
This is much more obvious than hovering over the space between two blocks and dragging left or right (with many casualties).Move multiple blocks at a time.
I think this might be my favourite. I imagine it’s underrated to most people, but being able to click and drag to highlight multiple blocks and then move them all is super convenient.Duplication of blocks.
Okay, this is definitely my favourite. It used to be frustrating to recreate the same block multiple times. Now you can duplicate a single block, or group multiple blocks and duplicate them all at once! Being able to copy and paste with Fluid Engine saves so much time.
Moving, resizing and duplicating blocks in Fluid Engine.
Removing the Need for a Spacer
No more spacer blocks! It’s true. I know the concept of having to “add” negative space to a website was weird, so it’s a relief that this is no longer necessary. If you want to add a gap between two blocks, you simply…don’t put them right next to each other. Genius.
Using the grid to create space between blocks in Fluid Engine.
Create Layers and Collages
I was using z-indexing in CSS for the longest time to create these collage styles that are so trendy right now. If you’re not familiar with the z-index, it’s like the layers of your website. And you can’t create collages without layering stuff. Anyway, you can stick one block over another and adjust which is on top with the new layering settings.
Using the layering controls in Fluid Engine to create collage effects with images.
Add Background Colours to Blocks
Another biggie for me. Even something as basic as adding a background colour had to be done with custom CSS in the Classic Editor. Now Fluid Engine lets you tick a box to add a background to most blocks, and adjust the spacing around it. It’s a gamechanger for legibility, as so many people put text on images without realising it needs a background colour too.
Adding a coloured background to a text block in Fluid Engine.
Fit or Fill Images to the Grid
This one is great for when you need an image to take up a specific space, but you can’t work out the dimensions. Before, Squarespace would just automatically display the image at whatever aspect ratio it had. Now, you have the option to fill the block with an image (instead of it shrinking to fit).
Comparison between the fit and fill settings on image blocks in Fluid Engine.
You can also do this with other blocks - I use the “fill” method for the buttons on my Instagram links page. It means I can make them all the same width and it looks really good on mobile.
Related: How to Use Squarespace as a Linktree Alternative
Full Bleed Content
Those full width, split layout sections are now possible with Fluid Engine, no plugins required. Simply uncheck the viewport and see the grid expand to the top and bottom of the section. You can also bleed images (or other blocks) off the edge of the screen and create those floating/collage style effects.
Full bleed split section layout in Fluid Engine.
That said, I still recommend Will Myer’s plugin for other types of full-bleed-sticky-scrolling-gallery-fun split sections. I still use this all over my website because I’m besotted with scrolling things.
Separate Mobile and Desktop Editing
One of the reasons people avoid Squarespace - or holler about other platforms (I’m looking at you, Showit) - is the lack of mobile-only editing.
Squarespace websites are automatically responsive, which means the mobile version of your website is already made for you. Amazing! But with the Classic Editor, you couldn’t really edit it, either.
Now though, you’ve got the best of both worlds! Squarespace is still automatically responsive (and I don’t need to waste time building my website a second time), but mobile edits are now possible and don’t impact the desktop version of your website at all!
Using Fluid Engine to make mobile-only edits.
However, at the moment mobile edits are very much necessary as the order of blocks on mobile correlates directly with the order that you added them to a section. This means if you added the section heading last, it would appear right at the bottom. Super weird.
The better alternative (and expected) version of this is reading the blocks top-to-bottom, then left-to-right, and adding them to mobile in that order. Hopefully this will change as it’s currently my least favourite aspect of Fluid Engine.
Are there other features coming to Fluid Engine?
It’s very likely! Squarespace seems to be focusing heavily on Fluid Engine and there are plenty of users requesting features that will be considered and/or eventually added to Fluid Engine.
If you want to stay up to date with the latest features, you can find the full list of them here. If you want to request a feature, head over to Squarespace support and submit a ticket.
Does Fluid Engine work on every page/section?
The simplest answer is no. Fluid Engine is available to use on all regular sections where you are able to add blocks. That means there are some areas still using the Classic Editor. For the majority, these are sections which organise heavy amounts of content, products and projects. These include:
Blog post sections on blog pages
Project sections on portfolio pages
Product sections on shop pages
Product descriptions
Event descriptions
Auto-layout sections
Gallery sections
Blog posts
This is not to say you can’t use Fluid Engine on your entire shop page, for example. It’s only the specific section which displays and organises your products that won’t use Fluid Engine.
I feel that the unusual one in this list is blog posts. These have the potential to work well as Fluid Engine sections, but currently still use the Classic Editor. I’m hoping this changes in the future.
How do I switch to Fluid Engine?
I’m using a Squarespace 7.0 website.
Fluid Engine is not available for Squarespace 7.0 because it’s a completely different system.
There’s no plans to change that either, so if you have a Squarespace 7.0 website and want the features of Fluid Engine, I recommend switching to 7.1. Among many other things, keeping your website up to date with current technology should be a priority.
I’m using a brand new Squarespace 7.1 website.
Brand new websites (July 2022 onwards) will have it enabled automatically. So if your website is very new, you’ll likely have Fluid Engine by default. If you want to double check, just edit an existing section and look for the grid background.
I’m using a Squarespace 7.1 website I’ve had for a while.
Any new sections you create will use Fluid Engine automatically. If you want to convert your existing sections/pages to Fluid Engine, follow these steps:
Open your Squarespace site. In the home menu, click Pages.
Choose a page and click Edit, then hover over the page and click Add Section.
Hover over the new section and click Upgrade.
You should now see a grid when you hover over the section, as well as some other small changes to the editor.
If you don't have this option, then Fluid Engine is already enabled for you. Only recently created websites have Fluid Engine enabled automatically.
Comparison between the appearance of Classic Editor and Fluid Engine on Squarespace.
Please note that converting a section to Fluid Engine is irreversible. I suggest creating a new page and playing around with Fluid Engine before making the permanent decision to convert all your existing sections.
How do I continue using the Classic Editor?
I’m using a Squarespace 7.0 website.
Since Fluid Engine is not available for Squarespace 7.0 websites, you don’t need to do anything. You’ll currently be using the Classic Editor and that likely won’t change.
I’m using a Squarespace 7.1 website.
If you’re really not enamoured with Fluid Engine, you still use the Classic Editor for now. To add a section with Classic Editor, follow these steps:
On the page, click Edit, then hover over the page and click Add Section.
Scroll down the sidebar to the bottom, and select Add Blank Classic Editor.
How to add a Classic Editor section to a Squarespace website.
This “backdoor” link is possible right now, but will be removed at some point. I still recommend exploring and learning Fluid Engine as it will eventually become the only option.
Final Thoughts
I feel the need to mention that there has been a lot of negative feedback about Fluid Engine from the Circle community.
If you’re not aware, Squarespace Circle Members are a community of designers and users (like myself!) who frequently use the platform for themselves and with clients. Circle Members had the opportunity to test Fluid Engine before it was released, and the overall response was generally negative. Many designers feel that Fluid Engine was rushed and it is too difficult/overwhelming for clients to use.
I do feel that Fluid Engine may have benefited from a longer beta period - among other small bugs, the chronological order of blocks on mobile makes zero sense.
But I still wholeheartedly believe that Fluid Engine is pushing Squarespace the right way and actually making the website-building experience more intuitive, expected and freeing…whether you’re a designer or a DIYer.
If you want to try out Fluid Engine, start a new Squarespace 7.1 website trial and have a play before committing to any changes to your existing website.
