BEST FEATURES on Squarespace’s Fluid Engine Editor (2024)

What's inside this post: Hide

PSA: Watch the full video breakdown if you’re more of a visual learner

If you're like me, you’ve probably got serious opinions one way or the other about Squarespace (and maybe even a few about their new-ish web editor, Fluid Engine). I mean, let’s be real. We all love a good drag-and-drop web builder, but when we don't understand how to use it or what the limitations are, it can feel like the universe itself is conspiring against us. 😂

Yet somewhere in the middle of those tweaks, updates, and popped blood vessels, you might notice… hey, there are actually some kick-ass features in this editor that we didn't have before!

So, let’s talk about the good stuff because I’ve already covered what Fluid Engine doesn’t do brilliantly (still salty about a few things, NGL – check out my post on the less stellar features here), and it's come a long way since Squarespace released the new editor in 2022!

LOOK AT THIS NEXT:
Have you seen my Squarespace Feature Release Tracker yet?

Fluid Engine vs. Classic Editor: What’s the Big Deal?

For those not caught up on the drama, Squarespace ran on Classic Editor from the dawn of time… okay, up to version 7.0 through part of 2022. I thought it was great, —for its time. It too, worked on a grid, capped at 12 columns, and your elements stacked kind of like a Jenga tower. If you wanted a different layout on mobile though, nah, you had to dream about it, learn to code, or find misc code snippets to adjust what the element blocks did on mobile view.

Then this 'sexy' new Fluid Engine Editor waltzed into our lives mid-2022, and it was both awesome and infuriating (until I learned how to use it well). Fluid Engine works on a grid of cells & the blocks you add to it sort of lock into those cell groupings, but are resizable, and that feature/function allows our content to be more adaptable & work more fluidly for tablet & mobile devices, though it's admittedly better on mobile than tablet.

The grid has 24 columns instead of 12, a near-endless number of rows per section on the page if you need more space, and it allows you to put elements right up to the edges of the section, if you want. That’s double the freedom, double the fun, plus some serious drag-and-drop power.

What does that mean for you? True design flexibility, while maintaining a responsive, fluid, and adaptive mobile design. You’re no longer constrained by blocks that squish together like they’re fighting for elbow room, or reorder themselves somewhat unpredictably.

❶ No Force Migrations: Control Your Upgrade

One of Squarespace Fluid Engine’s best features? No forced mass migration. This isn’t 2020 where many of us were curled up in the fetal position manually recreating entire websites in v7.1 from 7.0, or or buying third-party tools to copy pages & move them over one by one because there was no migration tool to facilitate the update.

Feeling that trauma all over again? Squarespace heard our cries after the v7.0 to v7.1 mess. Now, they let you upgrade on a section-by-section basis, for anyone that's already on a v7.1 website.

There’s nothing more terrifying than realizing you’ll have to move EVERYTHING (all your content) over to a new version manually—especially if you have tons of pages, blog posts, etc –via copy/paste (if you don't know those third-party tools exist). Version 7.1 allows you to sneak those changes in, one section at a time, updating each one from Classic Editor as you're ready. So you can try it out without committing to a full overhaul.

Unfortunately, this section-by-section upgrade doesn't apply to v7.0 websites and any website on older/previous versions of Squarespace, because Fluid Engine ONLY works in v7.1 (the newest).

However, in Sept. 2023, Squarespace released a migration tool that allows you to update your existing v7.0 website template to v7.1 as long as it was on a Brine Family template (which is a large template family, of about 50 design themes). They've since been slowly adding more scope & functionality to this migration tool too, so soon we'll able to use it to migrate almost any v7.0 site (regardless of the template or theme it uses) to v7.1 in order to access new features, including the new Fluid Engine editor, courses, a larger shop, video and portfolio collection page types, and more.

❷ The Drag & Drop We’ve Been Waiting For

Let’s discuss the main editor update: a new way to drag and drop. For years, we Squarespace users looked over at Showit users like the nerd at the cool-kids table. (Read: we were a tad jealous of their status.) Sure, we could design things fairly easily in the old editor, but the grid system in Classic Editor felt a bit rigid. Constricting. And no one really seemed to understand how to use Spacer blocks. 😂🤷‍♀️ (Except us designers.)

Fluid Engine is Squarespace’s answer to that, with true drag-and-drop freedom. Now, instead of sticking elements into these strict, defined blocking system, you can move blocks where you want, resize them (within reason), and put them almost anywhere on the page. Want your image in the middle of a section with an overlapping button and text title? Done. Want some cleverly overlapping elements, or GIANT TITLES going across the page without adding custom CSS? Done. ✅

You can snap those blocks into place with the grid system (press G on the keyboard to see it, and press again to turn it off).

❸ Spacer Blocks? We Don’t Need ‘Em (Mostly)

Let’s have a moment of silence for the Spacer Block. Not because it’s dead (you can still use it in some places on v7.1 if you’re feeling nostalgic), but because it’s mostly irrelevant with Fluid Engine’s smarter grid system.

Back in the old days of Classic Editor, if you wanted to neatly position elements & create columns, or your own grid, you used spacer blocks like a crutch to nudge your text, photos, and buttons into place.

With Fluid Engine, the block resizing does all that for you. Want a smaller header block? Don’t add a spacer. Just drag the edge of that block inward and you’re good to go. It’s like actual control finally dropped into our lives, and we don’t need to use little hacks to make it look “just right.”

The downside? Not all section types have access to Fluid Engine yet. Blog posts, Event posts, and the Additional Info section on product pages all still rely on using Classic Editor. So you haven't gotten rid of it (& spacers) entirely, quite yet!

❹ Overlapping Elements: Finally, No Code Needed

Have you ever thought, “If only I could layer images and text to create some visual depth?” That time has finally come. Overlapping elements has finally entered the room.

Before Fluid Engine, if you wanted to pull this off, you needed to know how to code—or hire someone who did. Not anymore.

Now you can drag an image right on top of some text, or stack buttons and text, and then control which one sits on top by adjusting it's place in the layers of content stacked on each other, sending items forward or backward in the layers with ease.

I mean, Squarespace heard us loud and clear on this one. This is exactly what we'd been waiting for!

❺ Group Adjustments & Multi-Select

If moving, deleting & resizing individual elements on the page, one by one drove you crazy, welcome to multi-select in Fluid Engine. This is honestly one of those features that seems like a small change, but is SO helpful in speeding up our page edits.

Select multiple elements by pressing Shift on your keyboard while you click on additional blocks to select them, OR click & drag your cursor over the group to align them, delete them, resize them, or drag them around together in one smooth motion. It's about damn time, amiright?!

Want to duplicate an entire row or layout, drag it somewhere else, and be done with it? Boom, easy!

This update will save time on large design projects or even in marathon editing sessions, instead of a painful, mind-numbing sesh of clicking on each piece like you’re playing a bad game of Tetris. 🤭

❻ Finally! Mobile-Specific Edits Specific to Your Design

Now that we live in a mobile-first world, it’s wild that Squarespace Classic Editor didn’t let us make mobile-specific design changes. Like, ...excuse me? Wix and Showit have been doing this forever. 🤔

Fluid Engine does allow certain tweaks specifically for mobile layouts, and that’s huge. You can adjust the layout, stacking order (layering), spacing, and alignment on mobile devices without it impacting your desktop design. These layout changes allow us to move things around on mobile without screwing up your desktop's design, especially when you need an entirely different layout on one or the other.

But here’s where a lot of people get confused about this feature update. If you start changing the content on the inside of the block (like changes to the text formatting inside a text block, swapping images, changing button text, etc), those content-related changes will affect the design in both desktop and mobile view.

Just remember, layout changes & positioning are mobile-specific. Content changes are not & show up in all versions of your website.

And—this part’s annoying—we still don’t have a tablet-specific editor in v7.1, Fluid Engine or not. On the upside, StatCounter still says that less than 2% of website users WORLDWIDE use tablets for browsing, which means almost none of your audience actually sees this version of your website design.

Learn more about how Fluid Engine is responsive in this post!

❼ Element Alignment Tools: Line It All Up

Squarespace has also handed us some nifty alignment tools in Fluid Engine. Alignment was never 'a thing' before because there wasn't really an option to mis-align anything in the old grid system. Now, since we can drop any block anywhere in the section, we can also do things like select a group of elements and align them together—to the top, center, or bottom, and left, middle, or right.

Plus, there’s also alignment options within blocks too! You can adjust the position of the text inside their boundary box, and buttons set to Fit (vs Fill –more on that in a sec!) so they sit where you want within their block side: snug at the top, chillin’ in the center, or hanging out at the bottom of the element. It's a minor thing, but I end up using this ALL the time!

❽ Image Overlays & Effects

Here’s where we get deep into the visuals. Squarespace has also introduced image overlays in Fluid Engine. You can now add a color over(lay) your image to change the color tone of it, tweak the transparency level, and voilà! Your miscellaneous stock images can all have the same color tone!

Classic Editor had something basic like that, but it was set globally in Site Styles. Now it’s per image, not site-wide, so you can adjust individually if/when needed. So if you want certain images to have one kind of overlay and others to stay as-is, you’re free to dream (design) in color. This tiny change gives us so much flexibility!

And for designers, you'll also recognize the blending mode options in image block's settings. These little magic tricks change how the overlay color interacts with the image behind it. For this one, I think us designers will squeal in excitement about this (because we already know how it works & what 'blending modes mean), while others (like DIYers, or maybe even you before coffee) may just poke at the options until something looks cool. Experiment away since none of it is permanent until you love it & save your changes!

❾ Fit vs Fill for Buttons & Images

Remember struggling with images that refused to do what you wanted in Classic Editor? Fluid Engine now lets you decide between Fit, Fill, & Shape for images, and between Fit vs Fill for buttons too.

Here's a quick breakdown:

• Fit: Keeps the full image inside the image block without cropping any of it, but there will also be empty space inside the block where the image doesn't fill up the whole block's space. The entire picture stays intact inside your block, and you can resize the block to minimize it's footprint on the grid & remove some of the empty space inside the container if needed.

• Fill: Crops the image to fill the entire inside of the image block, at whatever container size you make the box it's in. You can control the area that gets cropped by setting the focal point of the image inside it's block settings; wherever you set the focal point, wherever possible, that will be the part that stays centered inside the block

• Shape: This is from 2022-ish, but if you want non-rectangular or box-shaped images without creating them outside of Squarespace (using Canva, etc)… then the Shape setting inside Image Blocks will be your best friend. This essentially clips the image to fit inside the shape you choose, without actually cropping the image permanently (so the original image shape stays in tact & can be used elsewhere).

You can even tweak the vertical & horizontal alignment inside those image blocks in some cases, or stretch the shape to fit the whole block, so your image sits exactly how you like it.

❿ Saved Sections: Behold, Reusability

My personal fave is Saved Sections. If you've ever spent time designing a beautiful section on, say, your homepage and thought, "Wouldn’t it be nice to reuse that same layout on my about page without manually recreating it?"

Now, with Saved Sections, it'll take you about 3 seconds flat. 🤩

Click the little heart icon on the section you want to save to your reusable layouts, and there it is in your Saved Sections list, ready to be reused in any other page that also uses Fluid Engine!

This feature alone could save hours (days, even) for anyone that wants design consistency without recreating those same layouts over and over.

🎁 Bonus!

Keyboard Shortcuts Speed Things Up

Squarespace has also given us a boatload of keyboard shortcuts for Fluid Engine. The usual suspects are included, like Command+D for duplicating, and using the arrow keys for moving elements around in the grid.

You can even change the layering of elements using keyboard shortcuts now with Shift+(Arrow keys) to shuffle elements up or down in the layers of your overlapped elements.

These shortcuts are super handy, especially if you find yourself doing the same repetitive moves a lot. Check out the official list of shortcuts here and print it out if you need to!

Why Fluid Engine is a Designer’s OR DIY-er's Friend

In the end, Squarespace's Fluid Engine isn’t perfect, but it IS a game changer (ugh, ...I said it) for anyone who wants more creativity and control over their design layouts—without needing custom code for every little thing. Between the flexibility of drag-and-drop, mobile tweaks, saved sections, and image overlays (& more) it’s clear that this new editor is pushing Squarespace into a fresh, new, and more modern era.

Still wondering if Fluid Engine is worth the hype? Try it out for yourself. Upgrade a section or two to Fluid Engine, play around with its features, and see how it transforms your website editing experience. Pretty soon, those 'Classic' (pun intended) complaints will seem like a thing of the past. 👩‍💻