Squarespace’s New Fluid Engine Editor

screenshot of fluid engine editor displaying smart grid and full-width text

The much-anticipated Fluid Engine editor from Squarespace is here - and with it comes a lot of questions about what is really is, how it works, and how to make the most of it. So let’s get right into it.

What is Fluid Engine?

Fluid Engine is the new drag-and-drop editor from Squarespace that allows website designers, owners, and admins to have much more control over the layout of their content. Think layering, alignment, full-bleed positioning, etc… What once took dozens of lines of custom code can now be accomplished efficiently within the editor itself.

how is it different than the previous editor?

In the classic Squarespace editor, you would have to use spacer blocks to arrange the width and layout of certain blocks in a section. Most content blocks were arranged in a stacking/table formation. In Fluid Engine, you make use of their new smart grid editor that allows you to place a content block anywhere in the section. It also makes it easy to select multiple block and move them simultaneously. Content blocks can overlap and you can easily manage their layering order. It also allows for full-bleed content blocks, meaning they line up with the edge of the section or page - something previously inaccessible in the classic editor.

what do i have to do to get it?

All existing 7.1 websites on Squarespace and all new websites will now have the option to select new sections using Fluid Engine - or apply to the entire site. Squarespace 7.0 websites are not eligible for Fluid Engine sections. (Not sure what version of Squarespace you’re using? Log into your site and click Help in the left panel and scroll to the bottom. If you're on version 7.0, your site's template name also appears.)

An important note for clients and anyone with custom code on their site: If you see the “upgrade” button in the top left of a section, DO NOT CLICK IT. Your custom code in that section may break and you will not have the ability to revert back to the classic editor version.

can I switch back to the classic editor after I upgrade to fluid engine?

No. After upgrading a section to Fluid Engine - or starting with a Fluid Engine section - and saving the page, it's not possible to revert it to the classic editor. If you're not sure you want to use Fluid Engine with a section, we recommend duplicating the section before upgrading just in case.

how does this impact mobile design?

Ok, this part is really cool and maybe my favorite part of the new editor. Fluid Engine is really amazing for mobile. It has a smart grid specifically designed for mobile view that helps users create bespoke designs independent from their desktop version to optimize their mobile experience. Previously, this was done with lots of flexbox code, but now we can manage it directly in the editor.

how can I make the most of all the fluid engine features?

Here are some best practices from the Squarespace team: “While Fluid Engine is great for building more complex and creative layouts, keep these best practices in mind to ensure your design doesn't interfere with your content:

If you're making blocks overlap, ensure the content of all blocks is still visible and usable by visitors. Think about how different block elements might interact. For example, if you have a form block, you may not want to place a button block on top of it, because visitors might be unsure which button is for submitting the form.
If you're placing text over other kinds of content, ensure it's readable. This might mean adding a color background to a block, changing the color of text so it stands out on an image, or moving the text to a place where it's still readable.
There's no hard limit for the number of blocks you can add to a section or page, but we recommend adding no more than 60 blocks per page, as too much content can cause your site to load slowly. Mobile browsers in particular may have issues downloading pages with a lot of content.

what else should I know?

Any new design system takes some getting used to. What’s most important to understand is that your site will not change unless you upgrade a section or crate a new section using Fluid Engine. This new editor has a lot of possibilities, if you’re interested in trying it out, we recommend creating a new page, setting a password so it’s not public, and dive right in.

If you are curious about testing the bounds of the new editor, and want some 1-on-1 guidance, drop us a line. We’d be happy to talk you thought it!