Have you upgraded your Squarespace 7.1 website from Classic Editor to Fluid Engine yet?

It’s been a year since Squarespace launched its new website editing system, Fluid Engine. But I’ve noticed that some people are hesitant to make the upgrade.

If you’ve been putting off upgrading your website, or if you’re not feeling comfortable with it or worried about making a mistake, let me hear from you! I can help make the transition very easy and seamless - with NO website downtime.

I promise it’s not as scary as it sounds, and the benefits will BY FAR outweigh the slight learning curve you may experience.

I’ve written a brief summary below on some of the exciting features like:

Easier customization and creative expression
Placement precision
More control over your mobile website
Design efficiency

So let’s jump in and take a closer look.

This post contains affiliate links noted by an *. Any commission comes at no additional cost to you. Full disclaimer.

What is Fluid Engine?

It’s the name Squarespace has given to their new 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 a whole new world of design and page layout capabilities that were previously only possible with custom code!

⚡️ Fluid Engine - An overview of Squarespace’s new 2022 page editor

How do I enable Fluid Engine in Squarespace?

The Fluid Engine upgrade is available to websites utilizing Squarespace 7.1. At this time, it’s not required to upgrade from Classic Editor to Fluid Engine. However any new website created will automatically be using the Fluid Engine page editor.

If you’re on the 7.1 platform and you’d like to upgrade to Fluid Engine, you can easily do so by hovering over a page section and clicking the Upgrade option that appears on the left.

Once you upgrade the section, you’ll be using Fluid Engine ONLY within that section. You’ll need to go through your website page section, by page section and complete your upgrade.

It’s important to note that a section upgraded to Fluid Engine is irreversible. I would recommend creating a test website and play withFluid Engine before making the permanent decision to convert all your existing sections.

Keep in mind that if your site is in Squarespace 7.1, any new section you add to your site will default to the Fluid Engine editor.

✨ Here is a great video from Squarespace on the basics of the Fluid Engine editor.

Fluid Engine upgrade button demonstrated on a website

The best features of Fluid Engine and how to use them

Note: The following are in no particular order. They’re all great features to explore and use within Squarespace 7.1 Fluid Engine.

1 | Layer content blocks

What used to require custom CSS is now simply a matter of overlapping 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.

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.

💡 PRO TIP: Press “G” on your keyboard to toggle the grid off/on for a better visual of the page section layout.

Example website of layering images, text, and shape blocks

2 | Move and align elements

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.

Screenshot of how to select multiple content blocks at once in Squarespace Fluid Engine

screenshot demonstrating the alignment icon in Squarespace Fluid Engine — To align the selected elements, simply select the content blocks you want to align and click the alignment icon on the left as seen here. You can center, top, left, right align and more.

3 | Duplicate content blocks

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.

Click on the content block you want to duplicate and click the Duplicate icon as seen below.

Screenshot showing the content duplication feature in Squarespace fluid engine

4 | Image block fit or fill options, overlays, and shapes

With Fluid Engine, you now have so much more flexibility with images. You can add an image block, and then choose to fit (keeping its aspect ration) or fill (fill the block’s shape). Use the blocks handles to quickly resize the image And speaking of shape, you can really get creative and select from many geometric and rounded shapes to crop your image. There’s also the ability to add a color overlay and adjust the transparency.

Screenshot showing the image options in Squarespace fluid engine

5 | Text block backgrounds

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 the background color transparency and padding options. You can even adjust the corner radius for rounded edges. While in text editing mode, simply click on the paint can icon to open the panel for the text background options.

Screenshot showing the text background fill options in Squarespace fluid engine

6 | Resize content blocks

In the Classic Editor, resizing content blocks like images and text relied heavily on placing spacer blocks strategically around them. But that didn’t offer the best control over sizing, especially in mobile view.

Now with Fluid Engine, there are no more spacer blocks. You need only grab the bounding handles of the content block to resize it. It will snap to the underlying grid of your page section.

7 | Create full-bleed content

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, top to bottom, and left to right.

To achieve the bleed from top to bottom within a section, don’t forget to uncheck the viewport.

Screenshot of a website demonstrating the full-bleed feature of Fluid Engine in Squarespace

8 | Copy and paste content blocks

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.

9 | Edit while in mobile view

Fluid Engine now gives you a ton of control and editing capabilities directly within the mobile view without disrupting the desktop view.

When creating a website layout in Squarespace, you can switch from desktop to mobile view to see how the site will generally look on a mobile device. In the Classic Editor, this has been both convenient and frustrating at the same time. Convenient because it’s been nice to immediately see the responsive mobile version. But frustrating because it never looked that great. In fact, to get the mobile view to look really good, I typically had to use A LOT of custom code - for example - to resize images or reorder content blocks. This was so time consuming.

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! This is a GAME CHANGER.

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 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.

💡 PRO TIP: Finalize your mobile layout before saving the page section layout (see #10)

Screenshot showing the mobile editing panel in Squarespace fluid engine

10 | Saving sections

In edit mode, you now have the ability to save individual page sections by clicking on the heart icon. This is perfect for backing up a section on your page that you may want to use again on a new page. This feature is technically not exclusive to Fluid Engine, but it was a major update released on Squarespace, and has made website-building life much easier!