Squarespace recently introduced Fluid Engine - a flexible grid-based editor and a major system update.

If you’re a Squarespace website designer or if you edit your own website in Squarespace 7.1, you may feel a little uncertain about the recent changes or how they may affect your website.

Rest assured that Squarespace has implemented some wonderful improvements to the 7.1 platform with Fluid Engine that will benefit your website, even if it make take a little time to adjust to the new format. 

What to expect from Squarespace Fluid Engine

Note: This information is not a complete list of every new aspect of Fluid Engine. If you have a specific question, feel free to reach out.

What is Squarespace Fluid Engine?

It’s the name Squarespace has given to their new 2022 drag-and-drop page editor for the 7.1 platform.

The original page editor - now referred to as the Classic Editor - is what 7.1 users have been using thus far, and works by adding content and spacer blocks to create website pages across a 12 column layout.

With the introduction of Fluid Engine, Squarespace has created a flexible grid system that supports more design and page layout capabilities that were previously only possible with custom code.

How will Squarespace Fluid Engine affect my website?

Squarespace is moving in the direction of Fluid Engine, and it will likely become the primary editor when editing a website in 7.1.

There is some overlap that’s happening now to accommodate users who still prefer Classic Editor. But consider that Classic Editor may be eventually phased out, so it’s a good idea to start familiarizing yourself with Fluid Engine.

If you currently have a Squarespace 7.1 website that was built using Classic Editor, there is no need to do anything for now. You do have the option to “upgrade” individual sections of your website to Fluid Engine by clicking on the upgrade button. But note that once you’ve upgraded a section and saved it, you can’t revert that section back to Classic Editor.

Any newly created sections within the page of a 7.1 website will automatically be using Fluid Engine within that particular section. However you’re currently able to duplicate a section that uses Classic Editor if you want to continue working within that system.

Any new Squarespace websites created in 7.1 will use Fluid Engine exclusively.

✨ PRO TIP: Practice using Fluid Engine by creating a new Squarespace trial website. You’ll have some time to familiarize yourself and become more comfortable with it before applying it to your own website or your client’s.

What’s new in Squarespace Fluid Engine?

Here’s a list of some of the major updates so far in Fluid Engine:

1) No more spacer blocks!

Fluid Engine is a true drag-and-drop editor, and you no longer need spacer blocks to arrange and space out content on the page. You work within a 24-column grid that allows for viewport spacing as well as pixel-perfect layouts. This is a game-changer and leads to the next few points below.

2) Layer content blocks like text and images without code.

What used to require custom CSS is now quite simply a matter of overlapping the blocks by dragging them into position. And with the click of a button, you can move their layered position backwards or forwards. Create more interesting layouts and collages with ease.

3) Create full-bleed content to the screen edge without code.

The Fluid Engine editor now makes it easy to create full-width split layout sections that were previously only achievable with custom CSS. You can easily bleed content blocks like text and images to the edge of the screen.

4) Edit the mobile layout directly in mobile view.

Fluid Engine now gives you a ton of control and editing capabilities directly within the mobile view! See my comments below on this new feature.

5) Add colored backgrounds to text boxes.

Custom code used to be required to add a simple background color to text boxes. With Fluid Engine, it’s now the click of a button, and you can also easily adjust transparency and padding options.

6) Duplicate content blocks within a section.

Many of us Squarespace website designers had been asking for this update for a long time, and it’s finally here. This improvement saves so much time when you need to copy the styling of a content block you’ve already created.

7) Copy and paste blocks between Fluid Engine sections.

This is HUGE! In addition to duplicating blocks, you can now copy and paste blocks to different Fluid Engine sections within the same page or site. Copy single or multiple blocks at a time, then paste them in another section. The pasted blocks will automatically convert to the color theme of the new section.

8) Select and move multiple content blocks at the same time.

This is a great update and time saver when designing a website page. Either select shift while selecting blocks, or just drag your cursor around the items you need to select. Then move them as needed with your mouse or keyboard arrows.

9) Fit or fill images more easily.

You now have the ability to add an image and reshape it to the space you need. Crop or frame it within a geometric shape for more design options. You can still adjust the focal point just as before.

Also, you no longer need spacer blocks to adjust the size of your image. Simply click on it and handles appear to drag and change the image size.

What features have remained the same in Squarespace Fluid Engine?

There are still elements of the Classic Editor that remain in Fluid Engine.

Adding content blocks is still the same, although the method is slightly different. In Classic Editor, you would click on the “+” symbol of an existing spacer or content block and then select the type of block to add. With Fluid Engine, you’ll click on the “+ Add Block” button in the upper left corner of the section you’re working in. The same menu of available content blocks will then pop up for you to select and use.

Section modifications are also similar in Fluid Engine, with the ability to add a background and change the color styling. The exception is the Format tab, where you can now manually adjust the height of the grid by changing the row count, edit the spacing between the grid, and also remove the top and bottom padding for those full-bleed content sections we love creating. You can still also quickly add, duplicate, and reorder sections with the page.

List sections and the formatting for those will also be very familiar and operate in the same way. You can add a list section and then modify the content and design (including background) as needed.

Mobile view editing in Squarespace Fluid Engine

Squarespace’s Fluid Engine now allows for direct editing within mobile view without disrupting the desktop view.

When creating a website layout in Squarespace with Classic Editor, you can transition to mobile view to see how the site will generally look on a mobile device. This has been both convenient and frustrating at the same time. Convenient because it’s nice to immediately see the responsive mobile version. But frustrating because it doesn’t always look so great. In fact, to get the mobile view to look really good, I typically use a lot of custom code - for example to resize images or reorder blocks.

Now, with Fluid Engine, the mobile version is still responsive… BUT you can now edit the mobile view directly and reorder, resize, and create the exact layout that suites the mobile view - all without affecting the desktop view! Some feel like this new capability is “doubling” their design work. But I feel it’s a massive improvement to have this amount of control over the mobile view layout without the need for a lot of custom CSS. 

An important thing to note when using the mobile editor in Fluid Engine: Content blocks will appear vertically in the order that you added them to the section layout, which doesn’t make a lot of sense. You’ll likely need to reorder them to get the right layout. This quirk may change soon as Squarespace continues to improve the platform.

Fluid Engine may take some getting used to but stick with it.

It’s a major upgrade and is being continuously updated, improving daily. You may notice some minor quirks or glitches, but the Squarespace team has been great in addressing these issues, so do bring any to their attention.

Happy designing!