What is Fluid Engine
Squarespaces Latest Update
||
Squarespaces Latest Update ||
Have you heard about Squarespace's new Fluid Engine design experience? We're excited about this update but understand it can be a little daunting when something related to your website changes so dramatically. So here is an overview of What Fluid Engine is to help you quickly get up to date on this awesome update for your Squarespace website.
WHAT IS FLUID ENGINE?
Fluid Engine is the new drag and drop editing system for Squarespace Page Sections and Blocks. It’s the default for new 7.1 Squarespace websites, and optional on version 7.1 sites.
Unlike Squarespace's earlier version, called the Classic Editor, which uses Columns and Rows to position content in a section, Fluid Engine is built using the latest CSS Grid Technology. Combined with Squarespace's easy-to-use platform, Fluid Engine makes Squarespace one of the most advanced and intuitive drag & drop website editors. With this new editor, you will have more block, placement, overlapping and resizing flexibility.
If that wasn't exciting enough, Fluid also allows you to position and resize your blocks for mobile sites, which is arguably the most crucial screen size to design.
Why did Squarespace create fluid engine?
Squarespace’s older “drag and drop” system couldn’t just drag a text block around a page without disrupting five other elements in the process. In addition, it used a 12-column system which limited the layouts you could achieve, and the overall experience wasn’t very intuitive.
Fluid Engine aims to improve all that. Thanks to the new grid-based system, it takes the Classic Editor a step further and now supports a much more predictable, expected drag and drop experience.
I imagine you’ve used Canva before. It’s a simple design tool that lets you drop pictures and text onto a canvas and drag the corners to make them bigger. (plus a ton of other features). Canva is a self-explanatory tool - it works as you would expect it. Squarespace is taking on that idea.
Key features of Fluid Engine.
Fluid Engine isn't just a new experience; it has many new features that have been highly requested (and ignored) until now.
Better Drag and Drop Experience
The grid system is the most significant and noticeable change. We can now design in 24 columns grid, instead of the limted 12 prior, so that we can get more specific with block placement.
Move blocks without disruption. Previously blocks relied on each other for sizing and placement. So if you made one smaller, another would get bigger. If you deleted one, the other would fill the entire space.
Resize by dragging the corner. This is more notable and effective than hovering over the space between two blocks and dragging left or right.
Move multiple blocks at once. Click and drag to highlight multiple blocks allows you to move them all at once. Now you know we're all about these kinds of time savers.
But wait - that’s not all…
No more space blocks! - To add a gap between two blocks, ensure you don't place them right next to one another. Genius.
Create Layers and Collages - You can have blocks over another and choose which one sits on top with Fluid Engines' new layer setting.
Add Background Colours to Blocks - With Fluid Engine, you tick a box to add a background to most blocks, and it also allows you to adjust the spacing around it.
Fit or Fill Images to the Grid - You now have the option to fill a block with an image (instead of it shrinking to fit).
Full Bleed Content - Full-width, split layout sections are now possible with Fluid Engine; no plugins are required. Uncheck the viewport, and you will see the grid expand to the top and bottom of the area. And you can bleed images or other blocks off the edge of your site screen to create floating/collage-style effects.
Separate Mobile and Desktop Editing - One of the reasons people avoid Squarespace has been due to the lack of mobile-only editing. Squarespace websites are automatically responsive, which means the mobile version of your website is already made for you. Amazing! But with the Classic Editor, you couldn't edit it, either. Squarespace is still automatically responsive, but mobile edits are now possible, and they don't impact the desktop version of your website.
How to add Fluid Engine onto your Squarespace website.
SQUARESPACE 7.0 WEBSITE USERS.
Fluid Engine is not available for Squarespace version 7.0 sites, and there are no plans to change this. Therefore, if you have a Squarespace 7.0 site and want to use the features of Fluid Engine, you will need to switch to Version 7.1.
Note: Keeping your website updated with current technology should be a priority, so maybe it's a good time to update your site version.
NEW SQUARESPACE 7.1 WEBSITES.
Brand new websites (July 2022 onwards) will already have Fluid Engine as this is Squarespace's new default system. So lucky you are all sorted!
SQUARESPACE 7.1 WEBSITE USERS BEFORE JULY 2022.
Any new sections you create on your website will use Fluid Engine automatically. To convert existing sections and pages to Fluid Engine, please follow the below steps:
Open your Squarespace site. And click Pages in the home menu.
Choose a page and click Edit. Hover over the page and select Add Section.
Hover over the new section and select Upgrade.
You should see a grid when you hover over the section and some other minor changes to the editor.
If you don't have this option, Fluid Engine is already enabled. Only recently created websites have Fluid Engine enabled automatically.
PRO TIP: Changing a section to Fluid Engine is irreversible. I suggest creating a new page and playing around with Fluid Engine before deciding to convert.
Inspiring Design is a Branding and Web Design business, supporting Small businesses since 2016. As a Branding and Web Design service, you can receive one-on-one support to learn how to use and edit your Squarespace website.
Or, if you want to save time, we can build and edit your new Squarespace for you.
If you’re keen to learn more about editing your Squarespace Website, Book a consultation with us today.
If you’re looking for a new website - Book your Web Design Discovery call with us today so we can help you market your business.
Original Article Published by our mates over at Squarekicker.
