What the ….. Fluid Engine?! The new Squarespace drag and drop editor
Squarespace has just released a new layout editing builder called Fluid Engine.
As of July 2022, all new Squarespace 7.1 websites going forward will be launched with the new Fluid Engine content editor. This is the new Squarespace editing experience so users can easily drag and drop elements to where they want on their website.
It's a bit more complex than just randomly dragging and dropping elements, but it can be a useful tool for more flexibility in layouts and positioning elements, such as layering or overlapping content, filling and fitting more options, and more control of mobile design. This can be an amazing tool for web designers creating web design visions with less code.
NOTE: Fluid Engine is not available on Squarespace 7.0 sites.
All new Squarespace 7.1 websites will be enabled with the new Fluid Engine editor. What does that mean for websites created before Fluid Engine?
Classic Squarespace 7.1 sites, now known as Classic Editor, will not be affected unless, of course, you choose to Upgrade to Fluid Engine. If you currently have a classic 7.1 site designed using the Classic Editor, you will have the option to Upgrade by sections to Fluid Engine. You will see an “Upgrade” button that looks like this:
If you choose to upgrade your section to Fluid Engine, it cannot be undone.
If there is any code that was used in the background to build that section, it could possibly break. A solution to avoid a messy section would be to not upgrade any current Classic Editor sections, but to test the section by duplicating it first and then choosing to upgrade the duplicate section to see how it functions. You can always delete that section if doesn’t work as expected. Anything that you change on your page won’t save until you are Done and click the Save button. If you don’t like the changes you’ve made, you can click Discard Changes instead of Save.
New sections that you add will automatically be in Fluid Engine.
There are a few exceptions of sections that are not available in Fluid Engine. Sections that are not Fluid Engine (for now anyway) are:
▪︎ Blog pages
▪︎ Product pages
▪︎ Gallery sections
▪︎ List sections (also known as Auto Layout — these sections have a little i in a circle in the top right corner of the List sections)
▪︎ Event descriptions
Fluid Engine will be available on all new sections on any regular page, portfolio sub-pages, and footers.
On the technical side, here is the biggest difference between Classic Editor (CE) and Fluid Engine (FE) …
CE uses a 12-column grid. The size and location of elements are dependent on the grid. Elements can be placed at an insert point and will “snap” into place to fit based on the other elements. Spacer blocks can be used to guide in positioning elements. CE uses code to design elements, such as overlapping.
FE uses a 24-column grid. You can place any element anywhere without impacting the position or size of any other elements. You no longer have insert points, just add a block and move it anywhere. FE requires no coding.
Some of the benefits of Fluid Engine are:
▪︎ Fluid Engine has the ability to edit in mobile view separate from the desktop view. While in Classic Editor, the site is mobile responsive, however, sometimes it doesn’t translate as nice and the layout can look weird without code to fix it. With Fluid Engine, you design your device layouts separately (with the exception of no tablet view). While this is a bit more work, it is nice to have full control over the mobile layout. Do keep in mind, that designing for desktop will not translate to mobile as intended. The mobile layout is set up to place items in the order that you added them in desktop mode. So it may look way off when you go to your mobile version! However, once you start editing your mobile site, it won’t affect the desktop version.
▪︎ Fluid Engine sections have an option to add a background color and rounded corners to text blocks.
The new Fluid Engine is also still a work in progress, and while it’s being improved, I will continue to design current websites mostly with the Classic Editor. Behind the scenes, I will also be learning how to use Fluid Engine.
Learn more from my favorites, including:
How to work with Fluid Engine by Inside the Square
Squarespace Fluid Engine - Introduction and Mini Tutorial by Kerstin Martin
Creating powerful, flexible websites with the new Squarespace Fluid Engine editor by Jodi Neufeld
Fluid Engine - Squarespace 7.1 walkthrough by Christy Price
What is the new Fluid Engine Editor in Squarespace, and should I use it? by Big Cat Creative
FAQ’s on Squarespace’s New Fluid Engine by Will Meyers
Top 5 Things You Need To Know About Fluid Engine by Will Meyers
How to Convert Your Squarespace Website to Fluid Engine and How to use Squarespace Fluid Engine - 8 Minute Complete Overview by SquareKicker
And of course the article straight from the source itself, Fluid Engine, Squarespace's latest content editing experience by Squarespace.
Using Classic Editor and Fluid Engine together should work beautifully, giving you the best of both options! If you’d like to add a Classic Editor section, they are available for now at the bottom of the Add Section menu.
There should be a link — “Looking for sections built with our Classic Editor?”
or, Add Blank / Classic Editor (for Squarespace Circle Members only)
that looks like this:
NOTE: You can also duplicate an existing Classic Editor section and it will remain the same unless you choose to Upgrade the section. (You can tell the difference between a Classic Editor and Fluid Engine section by the button in the top left corner — Upgrade (Classic Editor) or + Add Block (Fluid Engine).
To learn more about duplicating sections, see this blog post: New features in Squarespace include Duplicate and Save Sections ♡
Here are a few Fluid Engine shortcuts and tips that I have recently learned:
▪︎ Hit G on your keyboard to display the background grid in a Fluid Engine section
▪︎ Pull blocks edge-to-edge past the set grid to create full width blocks
▪︎ Hold Shift to select and move multiple blocks at once
(The background color in the text box above is a Fluid Engine feature. However, Blog pages are not built with Fluid Engine.)
