A Complete Guide to Squarespace's Latest Feature: Fluid Engine

What is Fluid Engine?

Fluid Engine is the latest editor designed for Squarespace 7.1 websites. Built on a grid-based system, it unlocks an array of possibilities, granting you unmatched flexibility and control over your website's layout. With its advanced features, Fluid Engine is set to redefine the standard for Squarespace 7.1 websites making it a must-learn tool for designers and creators.

The Purpose Behind Fluid Engine?

The Classic Editor Of Squarespace, still functional, left much to be desired.You couldn’t just drag a text block around a page without disrupting five other elements in the process making it challenging to maneuver elements without unintended consequences. Restricted by a 12-column layout, creativity was limited, and the user experience left room for improvement.

Now, Fluid Engine steps onto the scene to address these shortcomings. With a grid-based system at its core, it introduces a more intuitive and predictable drag-and-drop interface. Think of it as Canva's user-friendly design approach – you can effortlessly place images and text on your canvas, resizing them by dragging the corners. Squarespace is embracing this simplicity and user-centric design, making your website-building experience smoother and more efficient.

What are the differences between Fluid Engine and Classic editor?

Squarespace's Fluid Engine has revolutionized the way we create websites. Unlike its predecessor, the Classic Editor, Fluid Engine introduces a seamless drag-and-drop experience that allows for precise element placement. While the Classic Editor confined layouts to a 12-column grid, Fluid Engine liberates designers with a grid-based framework, fostering creativity and design freedom. Predictability takes the stage with Fluid Engine, making edits more transparent, and its user-centric approach simplifies complex tasks, akin to user-friendly design tools like Canva. Embrace Fluid Engine as the future standard for Squarespace 7.1 websites.

In the clash between tradition and innovation, Fluid Engine emerges as a game-changer, enhancing your website-building experience in countless ways. As Squarespace continues to evolve, Fluid Engine represents a significant step towards more accessible, creative, and user-friendly web design.

What are the new features of Fluid Engine?

•  Improved drag-and-drop editor for Easier Customization.

No more limitations with just 12 columns; now, you've got a spacious 24-column grid to unlock your creativity in Fluid Engine.This expanded grid offers precise block placement and liberates you from the constraints of keeping everything at the top of the page.

• Move blocks without disruption. 

In the Classic Editor, the sizing and placement of blocks were interconnected. Adjusting one could unintentionally affect another, causing frustration. However, in Fluid Engine, blocks operate independently, eliminating such unexpected interactions.

• Create Layers and Collages.

One of the standout features of Fluid Engine is its ability to create layers and collages effortlessly. In the past, achieving layering effects required diving into CSS code and manipulating z-index properties. However, with Fluid Engine, you can stack blocks on top of each other and arrange them in the desired order with just a few clicks, completely eliminating the need for CSS coding. This newfound ease opens up creative possibilities for crafting visually appealing and dynamic web designs.

• Add Background Colors to Blocks.

In the new Fluid Engine, you can effortlessly give your blocks a background color. No need to mess around with complex code or block IDs. Just a simple design setting, and you can add colorful backgrounds to your blocks with ease!

• Fit or Fill Images to the Grid.

This feature is fantastic! It comes in handy when you want an image to perfectly fit a particular space. There are two options: "fit" and "fill." "Fit" adjusts the image to fit within the dimensions, while "fill" seamlessly fills the space with your chosen image. By the way, you can also apply this to buttons, allowing you to have buttons with equal widths.

• Separate Mobile and Desktop Editing

Squarespace websites are inherently responsive, adapting seamlessly to various devices like mobile phones and tablets, which is fantastic. However, with Fluid Engine, you gain the added ability to edit the mobile view separately from the desktop layout, ensuring that changes made for mobile won't impact the desktop design.

What’s Coming Next For Squarespace & Fluid Engine?

As a Squarespace Expert and Circle Member I’m privy to some of the conversations happening with Squarespace officials as regards to the next steps for fluid engine, as and ever, they’re looking at adding more features. I can’t confirm what exactly, or when but there are some exciting new Squarespace design features planned to be integrated into the fluid engine down the line. You can also be part of shaping this by inputting your thoughts on what features you would most like to see!

To keep yourself informed about the latest features, you can access the complete list here. If you have specific features in mind that you'd like to see, you can make feature requests by visiting Squarespace support and submitting a ticket.

Is Fluid Engine the Right Choice for Your Website?

In Our assessment, the straightforward answer is not quite yet. Fluid Engine is still undergoing refinement, with Squarespace actively addressing glitches and incorporating more features during this initial rollout phase. If you fall into the category of regular Squarespace users (not part of Squarespace Circle), you have the option to create new websites, granting access to both the Classic Editor and Fluid Engine until the conclusion of August 2022.

For existing websites constructed using the Classic Editor, these sections will persist in the "Classic" format unless you consciously choose to click the "Convert" or "Upgrade" button (at this stage, I'd recommend exercising caution). Commencing September 2022, you'll retain the ability to duplicate pages and sections that were initially crafted with the Classic Editor. However, crafting entirely new sections in this mode won't be feasible. Fresh websites established after September 1st will automatically employ Fluid Engine, except in cases of duplicated websites rooted in originals created prior to August 31st, housing Classic Editor sections—these will continue to support the Classic Editor indefinitely.

For those affiliated with the Squarespace Circle, the option to utilize Fluid Engine or Classic Editor on new websites extends until the culmination of 2022. Beyond this time frame, the particulars remain somewhat uncertain, but the prevailing expectation is that duplicating sites originally structured with the Classic Editor will perpetuate the capacity to utilize the Classic Editor for specific sections as required.

Ready to Make the Shift to Fluid Engine? Follow These Steps.

IF YOU ARE USING A SQUARESPACE 7.0 WEBSITE:

Unfortunately, Fluid Engine is not available for Squarespace 7.0 websites. These are fundamentally different systems, and there are no plans to change this. If you currently have a Squarespace 7.0 website but desire the features of Fluid Engine, the best course of action is to consider migrating to Squarespace 7.1. Staying up-to-date with contemporary technology is important for maintaining your website's functionality and appeal.

IF YOU ARE USING LATEST SQUARESPACE 7.1 WEBSITE:

For websites created from July 2022 onwards, Fluid Engine will be automatically enabled. If your website is relatively new, it likely comes with Fluid Engine by default. To verify, simply edit an existing section and check for the grid background.

IF YOU ARE USING A SQUARESPACE 7.1 WEBSITE  FOR A LONG TIME:

If you've had a Squarespace 7.1 website for some time, any new sections you create will utilize Fluid Engine automatically. To convert your existing sections or pages to Fluid Engine, follow these steps:

• Open your Squarespace site and access the home menu.

• Click on "Pages."

• Select a page and click "Edit."

• Hover over the page and click "Add Section."

• Hover over the new section and click "Upgrade."

Upon completing these steps, you should notice a grid when hovering over the section, along with some other minor changes to the editor. If you don't see this option, it's possible that Fluid Engine is already enabled for you. Keep in mind that only recently created websites have Fluid Engine activated automatically.

Conclusion.

In summary, Fluid Engine marks a significant advancement in Squarespace web design. While initial feedback varies, it's clear that this transition offers greater flexibility and potential. Whether you're a designer or a website owner, adapting to Fluid Engine is inevitable. To explore its capabilities, start with a trial website but exercise caution when converting existing content. While it may take time to fully realize its potential, Fluid Engine is undoubtedly a positive step in Squarespace's evolution. Embrace the change for a more intuitive and creative website-building experience.