Squarespace Fluid Engine - Everything you need to know
In July 2022, Squarespace released the latest version of its drag-and-drop editor - Fluid Engine. If you’re an existing Squarespace user you’ve probably heard of it, if not, then worry not, in this post I’m going to cover the essentials of what you need to know, why you need to know about it and also answer some questions that I’ve recently been asked. It’s a hefty article, so get ready to learn all about Squarespace: Fluid Engine...
What is Fluid Engine?
Fluid Engine is the latest drag-and-drop editor for Squarespace. It’s only the new editor for Squarespace version 7.1 websites and is not available on Squarespace version 7.0.
With Fluid Engine, users have more flexibility as it uses a grid-based system. This ultimately means you have more opportunity to place, move, layer and arrange content.
Why introduce Fluid Engine and what is the “Classic Editor”?
12-column grid system
So the previous editor is now called the “Classic Editor”. Classic Editor (CE) is still available now, on both 7.1 and 7 sites. It works in a slightly different way, using a 12-column grid system which means users are restricted somewhat as although it is a “drag and drop” editor, you can’t really overlap elements or create layouts that are truly “flexible”. It’s quite limited - unless you have some code tricks up your sleeve. And by this I mean you are either able to add or write code or lean on using extensions.
24-column grid system
Fluid Engine however uses a 24-grid system, and essentially allows you to drag, drop, resize, overlap and overlay blocks in a much more dynamic and intuitive way. Assuming you have used Canva, Fluid Engine is more in line with this approach. They work in similar ways.
You also have more freedom and flexibility with the mobile layout - although some users argue that this is somewhat challenging.
Key new features of Fluid Engine
As with any new or updated “system” or “tool”, there is a learning curve involved. Debatable, but a lot of the new key features are very much welcome, and it’s most definitely a step in the right direction for Squarespace users and the platform overall. So what are the new features of Fluid Engine?....
1 | Improved drag-and-drop editor
Users have become a lot more hands-on in wanting to be able to move elements around. Thus the improved editor allows this to happen with ease - especially as the grid system has changed from a 12-column grid to 24 column grid.
2 | No need for the spacer block
Who would have thought it? No need for a spacer block to add “negative space” or size a particular block to a particular width! Instead, you simply place the blocks next to each other and drag the edges to fill the space you want. Clever stuff!
3 | Overlap elements and create layers
This is one of the exciting new key features of Fluid Engine! You no longer need to add a “z-index” CSS property to a specific block to assign it to sit above or below another block to create a layering effect. Instead, you can now easily add blocks on top of each other and use the layering settings to adjust the order of the elements. All done with a click of a couple of buttons… and no CSS code!
4 | Block background colour
Another key feature is that you can now add a background colour to a block! Previously you had to add a line of code (more custom CSS) to the block you wanted - after you’ve found the block ID, but now… it’s as simple as toggling a design setting and hey presto… you have a background colour to the block!
5 | Image block can fit or fill its container
This feature is fab! Really handy when you want an image to fill a specific space. There are two settings - “fit” or “fill”. “Fit” basically fits the image within the dimensions and “fill” naturally fills the space with the image of choice. Ps. Did you know you can also do this with Buttons too! Which means you can have equal-width buttons. Cool huh!
6 | Full bleed content (split screen layouts)
You must have seen those website designs where half the section is text and the other half an image, right? Well with Fluid Engine you can natively create those split sections without any plugins or additional code. You can also have content bleed right to the edge of the website so it looks like it floating or “stuck” to the edge.
7 | Edit Mobile and Desktop layouts independently
Because Squarespace websites are naturally responsive the mobile and tablet views are already made to adjust to the device, which is fab. But now, with Fluid Engine, you have the additional capability to actually edit the mobile view, independently, without the changes affecting the desktop layout.
8 | Group select multiple blocks
Another key feature, that is slightly unknown, is that in Fluid Engine you can group select multiple blocks and move them around or delete them at the same time. They do need to be in the same section but still, such a handy new feature!
9 | More intuitive to use
Once you’ve managed to get to grips with Fluid Engine, it is actually really intuitive, mainly as it works similarly to other editors that are becoming “the norm”. There’s just that initial learning curve...
Are any other new features that Squarespace will introduce to Fluid Engine?
Most likely yes! Just like any other new or updated version of a software, app or tool, there are always going to be things that can be improved as users get hands-on experience with it. The Squarespace team are also heavily focusing on Fluid Engine and so no doubt any user suggestions or requested features will be rolled out over time.
Fluid Engine FAQs
What version of Squarespace am I using?
It’s not surprising that you may not know what version of Squarespace you are using. You can find out by navigating and opening the Help Panel on your website and looking at the bottom left-hand corner. If you are on version 7.0 your site template name will also be visible. Alternatively, it will say 7.1. No template name will be visible as all templates in 7.1 are part of the same family and have the same features and styling options.
I have a 7.0 Squarespace website, can I upgrade to Fluid Engine?
Squarespace 7.0 websites can not be upgraded to Fluid Engine as it is a totally different system.
I recommend switching to Squarespace 7.1 which will give you access to Fluid Engine features. This is also a good idea for the longevity of your website - it’s best to keep up with the latest technology and updates as these are always more widely supported as well.
I have a Squarespace 7.1 website, can I upgrade to Fluid Engine?
All new websites started from July 2022 will have Fluid Engine enabled, so more than likely if you started your website building journey after July 2022 you will have Fluid Engine by default.
How do I check if I have Fluid Engine enabled?
The easiest way to check if your website uses Fluid Engine is by editing a section. You will either see a “Upgrade” button on the top left-hand side of the section or an “Add Block” button.
“Upgrade” = converts the section to a Fluid Engine section (irreversible so be sure you want to upgrade when you click this!)
“Add Block” - The section is Fluid Engine enabled. You should also see a 24 grid block system (as per the image).
Conclusion
Generally speaking, and to provide an unbiased perspective, I have to share there’s been quite a bit of negative reception around Fluid Engine. It’s a bit like Marmite. A lot of users and members of the Squarespace Circle community haven’t enthusiastically jumped on board. However, I’m not in that camp. Although there are some huge changes and some elements could have been implemented better, there are some fab changes that Fluid Engine brings and I personally believe it’s definitely a step in the right direction. It makes the whole experience of building a website more intuitive, and flexible (with regards to layouts) and also it’s moving forwards with users' expectations.
So tell me, what are your thoughts on Fluid Engine?
Are you using it? Do you love it or hate it? I’d love to know, also feel free to ask any questions about Fluid Engine too!
