If you’re well connected in Squarespace circles you’ve probably heard whispers of something big coming down the line for a while. If not, you might have been surprised by today’s announcement from Squarespace that “Fluid Engine is here & It’s going to change your life!”

OK… so the life changing bit is a little bit of poetic license, but it is true that the new Squarespace editor, Fluid Engine, will change how you interact with your Squarespace website (current or future) and there are some things you need to know about Squarespace’s Fluid Engine - especially if, and when you should get on board, and what pitfalls to look out for.

So let’s get to it…

This post may contain affiliate links. These are denoted by a *. If you make a purchase via one of these links I may get a small kickback. I only recommend products and services I use and love myself! Thanks in advance :)

What is Squarespace Fluid Engine?

Squarespace Fluid Engine is the name for Squarespace’s new editor. It’s the biggest update from Squarespace for over 10 years, and seeks to respond to some of the limitations of the old “Classic Editor” allowing DIYers and designers to create more creative and flexible layouts.

Fluid Engine uses a new 24 column grid (an update from the old 12 column) and has made content blocks independent using a CSS grids approach allowing us to add, remove, layer and organise them without affecting the rest of the layout.

Fluid Engine has already been rolled out as an optional functionality on all 7.1 websites, and will become the default editor for Squarespace websites in Autumn 2022.

Fluid Engine will not be rolled out on Squarespace 7.0 websites.

Whether you love it, or hate it, it’s going to be here to stay, so let’s learn some more about the new Fluid Engine from Squarespace.

What are the new features of Fluid Engine?

New editing interface means adding, moving and resizing content blocks is more intuitive

Squarespace recognised they were lagging behind other design interfaces such as Canva, Instagram, Adobe XD when it comes to drag and drop editing and resizing. As such, a big part of the change that is fluid engine is that we now add content and move it around in a way that’s much more similar to those platforms. This new interface which uses independent content blocks is what has facilitated a lot of the new features that they’ve been able to roll out.

A more detailed grid system gives greater design flexibility

The new Squarespace editing interface is built on a 24 column grid, as opposed to the old 12 column grid that we had with the Classic Editor. This, along with the fact that blocks are now independent of one another means we’re no longer “trapped” by the grid, and can instead put the content we want, where we want it. The number of rows is flexible and can be edited and set to the number that works best for your design.

Full bleed sections can be created without code

The new editing interface also allows you to create full bleed sections - these are particularly popular when creating split sections such as this below, which up until now have only been possible with code.

Overlapping blocks and collage effects are easy to create

Another popular design feature that until recently has only been possible with CSS injection is making blocks overlap. With the new Fluid Engine editor this is possible, as well as choosing how you layer your content (which bit goes on top and which underneath) with the click of a button.

Coloured backgrounds for text blocks

A new bit of design functionality gives us the option to give a text block a background, in a similar way as we can for a section. This is still a bit glitchy but promises a great no code way to add collage style blocks.

Separate desktop & mobile editing allows more control over responsive design

A big change that has come out of fluid engine is that we can now edit the positioning of blocks separately on mobile, allowing us to better manage the responsive mobile layout of our site without the need for code. This is limited to block positioning as opposed to content for now (i.e. you can change the order but not what’s in each block) and is limited to mobile rather than tablet too, but it’s a step in the right direction to allow better responsive design choices without the need for code.

Grouping of blocks allows us to move several blocks at a time

A great new functionality given to us by fluid engine is the ability to group a set of content blocks and move them together - saving time and maintaining the desired layout as needed.

What’s missing from Fluid Engine?

There are no spacer blocks in fluid engine

I think this is good news! Although you may have been a big fan of Squarespace spacer blocks for designing with, the reality is that we used them mostly because we had to! Now, we don’t need to “design” white space, we can simply put the content blocks we want, where we want and the space takes care of itself!

Image block styles are no longer available

Gone are poster image, collage images and stacked image style options. Although we can use some of the new editing functionality to partially recreate them, it’s less intuitive and more time consuming - put simply, I’m not a big fan… bring back image block styling purlease!

Sensible mobile block ordering

The new Squarespace Fluid Engine set up has been created in such a way that the native block ordering on mobile is done in the same order as the blocks were added. Although I’m a big fan of being able to override this easily with the new mobile editing functionality, I have to say that losing the Classic Editor’s “pretty sensible” approach to mobile block ordering sucks…

No tablet view option yet

Although fluid engine gives us the ability to manage block ordering separately for mobile and desktop, and this is a good step forward, unfortunately this isn't available for tablet which means we may still need to add code to style our layouts well for tablet users.

What does Fluid Engine mean for SEO on Squarespace?

The main impact of fluid engine on SEO is down to the fact that block ordering on mobile is done by date stamp (as explained above), this is not great from a visual perspective - but we can override it relatively simply.

More problematically the ordering of blocks is relevant to accessibility (specifically the order in which screen readers will read out block content), and SEO (if headers H1, H2 etc are not in the logical order). Based on the code that facilitates fluid engine this is unlikely to change, so we will need to be thoughtful about the order in which we add blocks when designing to avoid the issues it could throw up for SEO, and accessibility.

How do I change to Squarespace Fluid Engine?

During the roll out period you can add any new section as a Classic section, or choose to add it as a Fluid Engine section. This is done by clicking the add section button on any page, then either selecting a section (which will automatically be Fluid Engine) or scrolling down to the bottom and adding a black section using “Classic Editor”.

You can also change existing sections from “Classic Editor” to “Fluid Engine” at the click of a button by selecting the “convert” or “upgrade” button for any given section. I recommend not doing this yet - see below for my reasoning!

How do I continue using Squarespace’s Classic Editor?

For now you do nothing! If you have an existing Squarespace website built with Squarespace Classic Editor (essentially any Squarespace 7.1 website built before July 2022) you can leave it as is and it will remain using the Classic Editor.

If you want to add new sections or pages, I recommend you duplicate existing sections or pages and then edit from there. These should always remain as Classic Editor sections.

If you really want to add a blank section you can do so by clicking add section and then scrolling down to choose add blank which is also labeled “Classic Section”. This should be available to you as a regular Squarespace user until the end of August.

Should I change to Fluid Engine?

The short answer in my opinion is not yet… It’s still a bit glitchy and Squarespace are rolling out improvements and features over these initial few weeks. If you’re a regular Squarespace user (i.e. not a Squarespace Circle member), you can start a new site and will have access to the Classic Editor as well as Fluid Engine until the end of August 2022.

If you already have a site built using the Classic Editor, existing sections will remain “Classic” unless you actively click the “Convert” or “Upgrade” section button (I suggest not doing this yet!).

Starting from September 2022 you will still be able to duplicate pages and sections that were built with the Classic Editor, but will not be able to create brand new ones. New websites created from 1 September onwards will be automatically using the Fluid Engine (a exception to this is duplicated websites where the originals were created before 31 August and have sections or pages created with the Classic Editor - these will maintain their ability to use Classic Editor in perpetuity).

If you are a Squarespace Circle Member you will have the option to use Fluid Engine or Classic Editor on new websites until the end of 2022 - beyond this we’re not yet sure, but it is understood that duplicating sites built using Classic will allow us to continue duplicating and using Classic Editor for sections as desired.

NOTE: Once you change a section to fluid engine it’s irreversible, so I recommend holding off doing this until you’re 100% sure it’s what you want to do!

Not a Circle Member, but want a site starting in Classic Editor? Get in touch.

What’s next for Squarespace & fluid engine?

New features for fluid engine!

As a Squarespace Circle Member I’m privy to some of the conversations happening at Squarespace HQ as regards to the next steps for fluid engine, as and ever, they’re looking at adding more features. I can’t confirm what exactly, or when but there are some exciting new Squarespace design features planned to be integrated into fluid engine down the line. You can also be part of shaping this by inputting your thoughts on what features you would most like to see!

Keep up to date with all Squarespace Features here.

Collecting feedback & fixing glitches

People hate change… it’s basically a fact of life. And fluid engine is a change, on a relatively large scale, and so… haters gonna hate! What I recommend is to channel your feedback directly to squarespace or via a Squarespace Circle Member, so that it can be captured and hopefully responded to.

Of course there are also issues that Squarespace are already aware of and glitches they’re working to fix which we’re hoping to happen as quickly as possible.

Squarespace Fluid Engine’s here to stay

Probably the most important thing to know about Fluid Engine is that it’s here to stay, so it’s not a case of if you need to get on board but when… as I mentioned above, I recommend starting a trial website to have a play around and see what you think, but to avoid converting or upgrading any of your existing content until the roll out has rolled out, and until you’re confident and sure of what you can and can’t do with Fluid Engine.

It’s sure that this change promises some brilliant opportunities, but that for it to fulfill it’s potential will likely take some time!

Found this useful?

I will be continuing to explore, learn and share about Fluid Engine over the coming months - so if you have questions, or would like to explore any are in more detail, hit me up in the comments and I’ll add it to the list!

Blog

Squarespace Fluid Engine - Everything you need to know