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, which still works, left a lot to be desired. You could not drag a text block around a page without upsetting five other elements in the process, making it impossible to move elements without for some reason breaking a whole bunch of other stuff. Creativity was shackled to a 12-column grid, and user experience often lagged.
Enter Fluid Engine, which aims to address those shortcomings. At its core is a more intuitive and predictable drag-and-drop interface based on a grid-based system. Kind of like Canva, but way easier — you can drag and drop into your canvas and resize images and text by dragging their corners. With Squarespace, that simplicity and user-first design is embraced, which helps to make your experience of building a website seamless.
What are the differences between the Fluid Engine and Classic editor?
Diving deep into fluid design with Squarespace Fluid Engine: Fluid Engine has a new drag-and-drop experience that offers precise placement of elements, unlike its predecessor, the Classic Editor. The Classic Editor was limited to a 12-column grid, while Fluid Engine offers a grid-based framework for freeing up designers, thus encouraging creativity and design freedom. Fluid Engine, however, puts predictability front and center in terms of edits and operating — it reduces the complexity of some functions to be more like user-friendly design tools like Canva. Fluid Engine is the future of Squarespace 7.1 sites.
Fluid Engine: A Revolutionary Feature in the Battle between Tradition and Innovation The Fluid Engine is a truly revolutionary feature in the ongoing battle between tradition and innovation. Fluid Engine is just the latest in a long line of features Squarespace has put into place to further democratize the web for creative people, using tools that have always been there, yet were out of reach to many users.
Who Benefits from Fluid Engine?
Fluid Engine caters to a wide audience:
Creative professionals seeking design freedom.
Businesses aiming for modern, responsive websites.
Developers need advanced layout customization.
Fluid Engine streamlines website creation, offering both flexibility and precision for users at all experience levels.
Why is Squarespace Fluid Engine Important?
Enhanced Creative Flexibility
Fluid Engine empowers users to design unique layouts using:
Customizable grids that enable precise block placement.
Freeform drag-and-drop tools to move and resize elements.
Options for overlapping or layering content blocks.
This creative flexibility ensures that designs remain both functional and visually captivating.
Improved User Experience
The intuitive interface of Fluid Engine enhances the design workflow.
Beginners can easily build professional layouts.
Advanced users can fine-tune designs for complex projects.
Preview tools allow real-time design testing across devices.
Mobile Optimization
In a mobile-first world, responsive design is essential. Fluid Engine simplifies creating mobile-friendly websites with:
Custom breakpoints to tailor layouts for different screen sizes.
A preview mode to test designs on desktop, tablet, and mobile views.
These features ensure a seamless user experience across all devices.
Key Features of Squarespace Fluid Engine
Drag-and-Drop Layouts
Fluid Engine introduces a powerful drag-and-drop system:
Move, resize, and align content blocks effortlessly.
Arrange overlapping blocks for layered visual effects.
Achieve creative designs without coding expertise.
Grid-Based Precision
The grid system is at the core of the Fluid Engine, providing:
Precise control over block alignment.
Consistent spacing between elements.
Automatic snapping of blocks for cleaner designs.
Custom Breakpoints for Responsive Design
Fluid Engine enables users to create layouts specific to device types:
Desktop views for wide-screen experiences.
Tablet layouts optimized for mid-size screens.
Mobile views with compact, readable designs.
This feature ensures that your website looks flawless on every screen.
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 regarding the next steps for the fluid engine, as 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 a 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 before 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 a 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 onward, 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 HAVE BEEN 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, Fluid Engine may be already enabled for you. Keep in mind that only recently created websites have Fluid Engine activated automatically.
Conclusion.
All in all, Fluid Engine is a quantum leap in Squarespace web design. Initial reactions differ, but this shift provides no shortage of opportunity and flexibility. If you're a designer or website owner, it is only a matter of time for you to transition to Fluid Engine. Experiment with a trial website to learn its capabilities, but proceed with caution when converting existing content. Fluid Engine is no doubt a great step forward in Squarespace's evolution, and though it'll likely take a while to see the capabilities fully realized, the platform can now truly be considered a compelling web editor. This year, catch the wave, welcome the shift, and explore a more intuitive, creative website-building adventure.
FAQ
1. What is the Fluid Engine by Squarespace?
Fluid Engine is Squarespace’s high-powered, next-gen website editor, delivering advanced design flexibility, drag-and-drop capability, and improved layout controls.
2. How does the Fluid Engine compare to the classic Squarespace editor?
The builder uses a grid-based layout, so you can position elements precisely, which means much more creative freedom (and responsiveness!) than that standard editor.
3. Is coding knowledge necessary to use the Fluid Engine?
Fluid Engine is not a complicated product. In the long run, you can create highly customizable and visually stunning pages without a line of code, yet advanced users can still make use of custom CSS for advanced customization.
4. How do you transition from the classic editor to Fluid Engine?
Fluid Engine quote mark Yes, you can already switch to Fluid Engine, but if you have existing pages/designs, the new elements might need to be tweaked to your preferences.
5. Is Fluid Engine supported on mobile devices?
True, it has mobile-specific editing features, so you can optimize your design for mobile as well as desktop views appreciatively.
6. Something’s not quite right with this article.
Fluid Engine is built inside of Squarespace 7.1 and is free with all standard plans.
