FAQ’s on Squarespace’s New Fluid Engine
Squarespace is releasing a new layout engine that allows for completely new designs. It’s called “Fluid Engine” and gives website builders much more control over the layout and positioning of elements. However, if you are thinking of transitioning a website to Fluid Engine, there are some things you should be aware of. So today, I want to answer some common questions that I’ve been asked over the past few weeks and then share some ideas of dealing with the change.
Currently only available for English version 7.1 websites
Currently Fluid Engine is only available for English version 7.1 websites. I’m sure this will roll all out to all Squarespace 7.1 websites eventually, but I don’t anticipate Fluid Engine ever being supported on Squarespace 7.0 websites. Additionally, Fluid Engine isn’t available on blog posts.
If you want to read the official Squarespace docs on Fluid Engine, you can do so here.
Classic Editor vs Fluid Engine
Before we jump into this, let’s qickly talk about terminology. There are now two different “engines” for editing Sections in Squarespace 7.1 - the Classic Editor (CE) and Fluid Engine (FE).
Classic Editor
This is the editor that we’re all familiar with. We have a 12 column structure (1 column on mobile), and each block must stack on top of one another within this structure. No overlapping is allowed.
Fluid Engine
The new Fluid Engine utilizes a 24 column grid (8 columns on mobile), and we resize and reposition items anywhere within this grid. Overlapping is allowed.
Frequently Asked Questions
Should I start building websites with Fluid Engine?
Personally, I’m building new websites using Fluid Engine. I’m trying to phase out using Classic Editor sections as much as possible. However, I am NOT converting my old websites to Fluid Engine, unless there is a specific need for it. The web is evolving, so must I.
Will Squarespace automatically transition my website to Fluid Engine?
Squarespace has assured us (the Squarespace Community) that they have no plans to automatically transition us to Fluid Engine, and I tend to believe them. Forcing updates like this would break a lot of websites and cause a support nightmare for them. Furthermore, they didn’t force a transition from Squarespace 7.0 to 7.1, so they don’t have a history of this.
However, Squarespace will heavily encourage Fluid Engine — to you and your unsuspecting clients. Any sections that are currently built using the Classic Editor will have an “Upgrade” button in the top left corner. This leads me into my next FAQ…
If I change a Section to Fluid, can I change it back?
No, so be carful with hitting that upgrade button!
If you click this button, that section will transition to a Fluid Engine section and it will now only be editable using Fluid. Any custom code specific to that section will break (it gets a new data-section-id). The mobile-layout might be a bit wonky as well, so keep an eye out for that. Once a section is in Fluid Engine, there is no reverting that section back to the Classic Editor. If you want to hit that upgrade button, I highly recommend duplicating that section first.
How can I prevent my clients from accidentally upgrading to Fluid Engine?
If you’re a Circle Member, you can remove this “Upgrade” button by opting-out of Fluid Engine in the Settings » Circle Labs area.
If you’re not a circle member, unfortunately, this isn’t possible at the moment. And I do anticipate Squarespace removing this toggle in the future, so I’d highly recommend training your clients on Fluid Engine when you can.
What’s the most important thing to know about FE?
ARM - Always Remember Mobile. This is the biggest paradigm shift in how I’ve always used Squarespace. Using the Classic Editor, the mobile layout of a website “just worked” and (generally) looked good. This is not the case with Fluid Engine— blocks will often be stacked in an order that’s inconsistent with your design.
This is because on mobile, blocks are stacked in the order you added them, not the natural order of your layout.
Thankfully, the new FE allows you to easily resize and move blocks on mobile, giving you much more design flexibility on mobile, however, the default layout often looks horrendous. Always Remember Mobile.
Is there a reason to not use Fluid Engine yet?
I would start using it as much as you can. There are some times in which Fluid Engine just doesn’t work. For example, here is a video of me trying to resize a video block on one of my installation pages. The video block won’t resize and whenever I reposition it, all the other blocks drop down a row… it’s super frustrating.
However, you can still use the Classic Editor and build out a section that way. (See next FAQ)
In my experience though, these types of bugs aren’t common and I’ve used FE on a hundreds of sections. I’d recommend using Fluid Engine as much as possible so that you can continue to learn it, and just reach for Classic Editor when you come across something that truly isn’t working.
Can I use Fluid Engine and Classic Editor Interchangeably on the same page?
As of today, yes. You can either add a Fluid Engine section or a Classic Editor section. When you add a new section, scroll to the bottom. You should see a link that say’s, “Looking for sections built with our Classic Editor?”, if you click this, you will be brought to the prebuilt Classic Editor Sections.
This looks likes it’s available on all new websites as well. I just created a new account using a demo email address and this option was still available. However, I can see Squarespace removing this option in the future, so I’m not wanting to use this very often.
Will Fluid Engine break my custom code?
Unfortunately, this is very likely. Many plugins and custom code that you have for Classic Editor sections might not work with Fluid Engine (all of my plugins have been updated for Fluid Engine).
If you’re upgrading a section from the Classic Editor to Fluid Engine, any custom code that’s targeting the data-section-id will break. Fluid Engine still uses data-section-id‘s however when switching the section, it gets replaced.
The bright-side is that Fluid Engine allows for you to create designs and layouts that previously needed custom code, so theoretically you shouldn’t need as much… time will tell.
Fluid Engine Fast Facts
Hit “G” on your keyboard to display the grid in a Fluid Engine section
Pull blocks edge-to-edge, past the grid, to create full width blocks
Hold “Shift” (or click and drag) to select and move multiple blocks at once
Image Blocks can’t have captions or text (womp womp)
Combatting the Stress
No doubt, this is a stressful time for many of us. Learning something new is fun when we have the time and space for it. Learning something new is incredibly stressful if you have 3 kids at home and you’re barely keeping up with the client work you have, or you’re about to launch a new website built in the “Classic Editor” and now your worried your client might break things if/when they change sections to “Fluid Engine”.
So here are some things you can do to combat this stress:
Turn this into a business opportunity. Reach out to past clients and let them know about this change, and offer virtual training or a website refresh. This type of communication with past clients is a great way to drum up new business.
Turn this into a marketing opportunity. Write some blogs about what you’re learning and help other fellow Squarespace designers get acquainted with Fluid Engine, we all need to support each other.
Set a goal. Give yourself 1 month to rebuild a previous website, but only use Fluid Engine. This will speed up your comfort and muscle memory (click memory?) with FE.
As always, feel free to reach out to me and the Squarespace community for problems and questions you might have. Post in one of the many Facebook groups, ask a question in the Circle Forum, or comment below.
Keep Building,
Will
