Fluid Engine: the NEW editor in Squarespace

Table of Contents Show

📌 Pin it!

Squarespace has had/used the same editor for like 10 YEARS. I have used that original editor since 2016, myself.

The internet has changed a lot in that time, and so has web design, and in turn, the people who are designing on the web. I'm a prime example of that. I started as a graphic designer, all of my in-house design jobs were in the printing industry. I didn't pickup web design until I needed a website for my own freelance work in 2015.

Since then, I've tried a few different platforms in addition to Squarespace to find the one that worked best for me & that I felt like could work best for the types of people I love working with, –in order of most design freedom to least, ...and then last, the most forgettable option I've tried IMHO.

• Webflow seems to have the most amount of true design & animation freedom, but the learning curve is QUITE steep because the editor assumes you have a baseline knowledge of HTML & CSS code –and know how to drop those elements you dragged in, and in what order. It feels very much like a code-based system because it uses a lot of code-based terminology such as "margins" and "padding" and "div," etc., compared with other options. Though I love the concept, it can definitely take longer to create a website from scratch & won’t be a good fit for just anyone.

• Showit is a step down from Webflow in design & animation capabilities and the designs you create are not inherently responsive, but you can design your website for desktop & mobile separately which definitely helps solve that problem. It feels a lot like using Adobe Photoshop or Illustrator in combo with WordPress for blogging. People say it’s limitless, but I used it for a few months and found several limitations that surprised me. Like Webflow, it’s a very DETAIL-ORIENTED platform, –but without needing knowledge of code. Another great platform, but again, not a fit for everyone.

• Shopify is in another league: its design editor SUCKS because it’s so incredibly basic but its commerce manager is best-in-class. If you don’t mind having a simplistic or basic design, paying for a higher-level template you can install through their store, or paying a developer to custom code a unique design, AND your business is product-based then Shopify is likely to be a great fit. Its commerce features just can’t be beat by these other platforms, IF the majority of your revenue comes from selling products.

• Weebly. I may have started here myself before I found Squarespace, but honestly, I don’t give this platform any thought anymore. None whatsoever. Feel free to skip over it in your web-builder research. 😂

What makes Squarespace different than those? 👆🏼 Its page editor and all-in-one system for websites, marketing, scheduling, e-commerce, sharing your content to/from social, analytics, pop-ups, and managing SEO.

While it may not have been intuitive for someone to have to add spacers to create space on a page, resize objects, or push elements around, once you get used to it you can build classic layouts in minutes, ––not hours. AND those designs are automatically responsive, ––which I can’t say for Webflow or Showit (as both require manual tweaking for this part).

Not only that but Squarespace also uses global style settings, which you can think of like presets. Yes, it can sometimes be irritating to bypass when you want to, but unless you’ve used these other platforms you don’t know the sheer simplicity & efficiency that having those presets brings you.

On Webflow or Showit, for example, to style a button you must add a rectangle, resize & color it, set the animation for it, then add the text, size & color the letters & set the animation for that too. THEN on Showit you also have to choose those same settings on mobile view because the styles don’t copy over and there were no presets or global settings for buttons across your site (last time I used it), so you must do this PER button throughout your entire website. On Webflow, there are additional settings to check for ev.er.y.thing you add to the page as you go, because its builder is fully responsive.

So while Squarespace’s builder is fairly basic in comparison to Webflow and Showit, there’s also elegance, efficiency, and simplicity in the way it works.

That said…

Squarespace has been using what it calls the “Classic Editor” for the past 10 or so years now, so I guess it was finally time for a change. Basically, that change means they know we want more high-level page layout capabilities, so they’ve been listening to our wish lists and they’re stepping up their game.

I’ll admit that I am genuinely excited about this push forward, however like most web designers who specialize in Squarespace, my excitement is dampened with realism –so stick around for my no-holds-barred opinion if ya want to know my opinion of this new GIANT change.

For now, let’s talk about who has it, how to use it, what it is, what it can & can’t do, what kinds of new layouts are now possible without custom code, and SEE what it actually looks like!

Fluid Engine Basics

❶ What is “Fluid Engine?”

Fluid Engine (FE) is the brand new –totally different– page editor in Squarespace. It’s built using CSS flexbox structure so it’s designed to give us more freedom in how we layout elements on the page and more freedom in how the page looks between Desktop and Mobile views.

Unlike the Classic Editor (CE), Fluid Engine lets you drag elements anywhere on a page and “stick” it there, much like you can in Powerpoint and other document editors. You can also resize elements individually without using Spacer Blocks –but more on those kinds of specifics in the video below.

❷ FAQs: the who, where, and why

• 😳 Is this like... v7.2?

  No. This isn’t a platform update like that; it’s more of a software update and will not require you to migrate your entire website like last time (from v7.0 to v7.1) in order to use it. Instead, you can choose to enable it section-by-section.

• 🤔 Will I have access to Fluid Engine on 7.1?

  New 7.1 sites will have access by default.

  Websites started with 7.1 prior to July 2022 can access it for new sections, but if you want to use it on pre-existing sections, you will need to convert the editor section by section, on each page.

  🚨 BEFORE YOU CONVERT a section, please read this entire article first to help you decide whether or not you want to convert your designs, because once you convert a section you can’t revert back to the Classic Editor.

• 😕 Will I have access to Fluid Engine on 7.0?

  Fluid Engine is not available on 7.0 sites.

• 🇺🇸 Is Fluid Engine available on non-English websites?

  Not yet, as of July 2022, but Squarespace is working on this! You will have access soon as they do intend to roll it out to everyone on 7.1.

• 🔍 Where does Fluid Engine work, if I do have access?

  It works on normal pages, like:

  • sections on any regular page
  • footers
  • portfolio sub-pages

  It must be manually enabled or converted per page & section created before Fluid Engine's release in July 2022.

  –––

  It will not work on collection pages for:

  • blog posts
  • event descriptions
  • product page’s additional information

  The “Classic Editor” (what you’re used to using) will still be used for those collection pages.

• 😃 What will stay the same with this new release?

  Gallery sections (the one with the popup image uploader within the section settings), and List sections (the ones with the EDIT CONTENT menu within the section) are not affected. Those will continue to use their unique popup panel to edit their content, not using either the Classic Editor or the new Fluid Engine.

  Most collection pages (blogs, product’s “additional information” sections, portfolio subpages, and event page details) are still using the Classic Editor.

• 📲 Can I use Fluid Engine in the Squarespace app?

  Not yet! (July 2022)

• 🧐 How do I know if I have access to Fluid Engine?

  The editor looks different. The “Add Block” button will be in the top left and when you choose a block and drag it into the section, you may see a transparent grid in the background.

• ℹ️ What is the grid & how do I hide/show the grid in Fluid Engine?

  The grid is a guide to show you where you can place elements on the page and help you align them.

  In “Fluid Engine,” Desktop view is 24 columns across and any number of rows long. In mobile view, I believe it’s 8 columns across and can be a different number of rows long (than the same section on Desktop size screens).

  In the “Classic Editor,” the grid was never visible but it was 12 columns across and X rows long.

  We do have quite a bit more freedom & flexibility with the new grid in Fluid Engine!

  ℹ️ Show or hide the grid by pressing G on your keyboard any time while you are editing.

• 📱Is Fluid Engine responsive (mobile-friendly)?

  Yes, –mostly. It’s still responsive, but it works differently than Classic Editor.

  Anything you add to the design in Desktop view will show up in Mobile view also.

  BUT in Mobile view the order in which those items stack (display in a column) is based on the order you added them to the page, NOT necessarily where they are currently displayed.

  That said, you can make changes to the design layout that will NOT affect the Desktop view, so you can reorder them however you need, without affecting the Desktop layout.

• 🟡 Will Fluid Engine affect SquareKicker?

  Yes/no.

  The SquareKicker team has already released new tools that work with Fluid Engine (only/specifically); these new tools do not work with the Classic Editor (as of July 2022).

  Any sections still using the Classic Editor in Squarespace will still have access to the same SquareKicker tools you know/love; those are not going away and will continue to be supported.

• 🟠 Will Fluid Engine affect custom code on my site?

  It’s possible, yes! I don’t know how probable though; that will depend on the code itself, and which attributes the code uses for targeted custom styling. Squarespace has made some changes in the code that make up the new editor, so if your plugin uses old attributes, the custom code may no longer work in Fluid Engine without being updated.

  The best thing I can tell you is to watch any sections you’ve converted to Fluid Engine, to see if anything seems to “break” in the customized design. If the styling breaks, contact the web designer who installed it for you, or the shop where you bought the code.

  Circle Members like myself have been aware of this new editor for a few months now & we are all expecting some troubleshooting during this transition period.

• 😰 Can I switch back to Classic Editor from Fluid Engine?

  Short answer: not really.

  🚨 SO BEFORE YOU CONVERT a section, please read this entire article first to help you decide whether or not you want to convert your designs, because once you convert a section you can’t really revert back to the Classic Editor.

• 🛑 How do I keep using Classic Editor?

  That’s a trick question, I’m afraid.

  If your website has access to Fluid Engine, you will ONLY see Fluid Engine layouts in the popup when you add a new section to a page. (Unless you’re a Circle Member, in which case you will also have access to a blank layout using Classic Editor, listed at the bottom of that popup.)

  To keep using Classic Editor, you will need to copy/duplicate a section that is still using Classic Editor, and edit or replace the elements inside. It’s a work-around solution and not ideal, for sure, but that’s the only option at this time.

❸ Video: what does it look like & how does it work?

❹ Troubleshooting

This is Squarespace’s intro to Fluid Engine in their support documentation, in case you want to learn a bit more or bookmark it & check back as they update that page.

If you need help with a plugin you’ve purchased or with something like SquareKicker, make sure you reach out to the shop or company you purchased from. Circle Members have been prepping for this feature update for months now and we are as prepared as we’ll ever be to start handling your support requests.

If you run into an issue that isn’t necessarily related to a plugin or custom code, I’d contact Squarespace Supportvia their chatbot and ask them for help because they will need to know about every bug in order to fix it.

Beyond that, you might need someone like me to step in & take a looksie. 🤷🏼‍♀️

❺ My opinion (+ pros & cons)

As I say in the video above, while I’m genuinely excited about using Fluid Engine, I’m also not under any illusion that FE is ready to be widely adopted without some strategy or forethought, this early in the game.

PROS (some things FE already does better):

• overlapping elements make it much easier to create dynamic layouts without writing or using any code

• many blocks can now have their own background color

• per-device layout changes that do not affect the other, between mobile and desktop view

• split screen layouts can be easily achieved without using any custom code

• spacer blocks aren’t necessary to create empty space or to resize objects anymore

• group select multiple blocks to move around the section or delete together

• can become more intuitive to use because it works more like other doc editors we’re already familiar with

• the underlying coded structure of FE opens the door for more exciting features from plugins like SquareKicker and potentially more from Squarespace too

CONS (some things it’s missing at this early stage):

• text wrapping – image blocks do not ‘embed’ inside a text block & force text to wrap around it; at this time there is no way to force text to wrap around an image, a major issue I’ve brought to their attention

• image block layouts are gone – I suppose because we can build them from scratch ourselves, but I want it back so we have the option to quickly set it up or build it ourselves for a more custom solution

• can’t select a group of blocks to resize together, if we can move & delete together, I also want to be able to resize together

• edge-to-edge blocks leave 1px of visible background color – so the effect isn’t always full bleed, especially if the background color of that section isn’t the same as the ones above or below it

• still no tablet view in 7.1 – if we can make per-device changes now, it makes sense that we should be able to see at least 3 different screen sizes

• creating column-based layouts is much slower in FE than in CE – because nothing snaps into place automatically, you must know how many grid spacers there are all the way across and you must need “the right” number of columns in order to fit them on the page evenly; 2 is easy, 3 or more is tricky.

• long pages with multiple FE/CE sections can be slower to load Edit mode

• it’s still glitchy, requires a lot of clicks to get inside blocks, select blocks, and move blocks around; likely to have more growing pains in the coming months

I think it’s always smart to try new things in spurts because actually using the new features will also help keep you apprised of bugs and fixes, newly added features or adjustments, and more. If you don’t use it at all, ––you’ll be somewhat out of the loop.

What I’ll be doing on my own site and on client sites: using the Classic Editor in most cases, and sparingly using Fluid Engine when the design can be more easily achieved with the new editor.

TBH, I’m always one of the impatient ones that want to jump on and try new tech updates, but I’m also always very aware that they tend to be buggy for a while at first. This is no different.

So if you’re feeling up to it, test it out! But I don’t suggest you start converting all sections of all pages of your website over to FE quite yet. ––For that, I’d give it at least 6-12 months (2023). 😉 #patienceisavirtue

Let me know in the comments if you’ve already started playing with Fluid Engine! What do you think so far? 🤔 😃 😳