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
Duizelt je het nu allemaal en weet je niet goed wat te doen met je 7.1 website? Ga eerst eens spelen met Fluid Engine op een nieuwe (test)pagina die je in het Not Linked gedeelte zet. Of dupliceer een bestaande pagina en zet die in het Not Linked gedeelte en upgrade de secties naar Fluid Engine en kijk wat er gebeurt. Helemaal als je met CSS werkt.
Heb je meer hulp nodig met je website? Kijk dan eens of een Squarespace Webdesigner voor een Dag iets voor je is.
From SEOSpace to Plug&Pay and Weglot. An overview of useful tools to add more features and design options to Squarespace—and to help your site rank higher in search results.