Fluid Engine: The New Squarespace Drag & Drop Editor
Fluid Engine is Squarespace's latest drag-and-drop editor, and it will be rolled out to all 7.1 websites starting in July 2022.
This new editor offers more design and layout options, but there are also a few things to keep in mind. Below, I've listed the important changes and points to consider for you.
Fluid Engine (FE) vs. the Classic Editor (CE).
In Squarespace 7.1, you previously always used the so-called Classic Editor. You can adjust the height and width for each section. The Classic Editor also uses a 12-column system/grid.
With Fluid Engine, your section is essentially a blank canvas where you can drag and drop blocks anywhere you like. Just like in Canva.
A grid is still used, but you can customize it yourself.
And you can adjust the height of your section by dragging it to make it bigger or smaller.
The Benefits of Fluid Engine
A section created with Fluid Engine is very flexible in terms of design, giving you more freedom in your designs.
You can place images right up against the side of your screen.
You can overlap images (partially)
You can select multiple blocks and move them at the same time
You can easily resize a block by dragging it to make it bigger or smaller
You can set a background color for a text block
You can make an image fill the entire block (fit and fill options)
You can design the mobile version separately, i.e., the order of the content (which can also be a disadvantage because it requires more time and attention).
Spacer blocks used to create space between blocks are a thing of the past :-)
The Disadvantages of Fluid Engine
You'll need to design the mobile version separately, which requires a bit more attention and time.
You'll have to redesign each section from scratch.
You have so much freedom that your pages can quickly end up looking cluttered.
The various styling options for the Image Block have been removed (namely Poster, Card, Collage, Overlap, and Stack). You'll need to recreate these manually.
Tablet view is not available. This is also the case with the classic editor, but given its built-in responsiveness, it is less necessary.
How do you switch to the Fluid Engine?
Do you currently have a 7.0 website?
If so, nothing will change at all, and you'll continue to work with the Classic Editor...
Have you had a 7.1 website for a while?
All new sections you create from now on will use the Fluid Editor (except for blog posts, events, and product items, which will continue to use CE).
Existing sections will remain in the Classic Editor unless you manually upgrade them to the Fluid Engine. Once a section has been upgraded, you cannot revert it back to the Classic Editor.
Are you starting with a 7.1 website?
Starting in July 2022, this will be fully powered by the Fluid Engine (except for blog posts, events, and product items, which will continue to use CE).
Want to keep using the Classic Editor?
If you'd rather continue working with the Classic Editor, you can still duplicate CE sections for now. However, you can only duplicate sections within a single page. Another option is to create a duplicate of the entire page and then remove the sections you don't need from the duplicate.
Do you work with CSS?
If you're working with CSS, upgrading that section will cause much of the code to break, which will change the appearance of your design. You'll need to redesign it. Alternatively, first create a duplicate of the page from which you want to upgrade a section. Upgrade the section and see what happens.
The mobile version of your website
With Fluid Engine, you have to design the mobile version separately, which requires more attention and time.
On mobile, blocks appear in the order they were created. So if, while designing the desktop version, you first added an image to your section but later placed text above it, the mobile version will display the image at the top first, followed by the text below it. You’ll need to adjust this manually for the mobile version. Be sure to check carefully how your website looks on mobile.
Fluid Engine in Development
Fluid Engine is currently under development, and its capabilities will continue to expand over time. This blog post will therefore be updated accordingly.
Tip
Is all of this making your head spin, and are you unsure what to do with your 7.1 website? Start by experimenting with Fluid Engine on a new (test) page that you place in the "Not Linked" section.
Or duplicate an existing page, move it to the "Not Linked" section, upgrade the sections to Fluid Engine, and see what happens. Especially if you're working with CSS.
If you're having trouble figuring it out, you can always book a support call and I'll help you out.
