Whether you are a long-time Squarespace user, or are new to the platform, you’ve probably noticed some things have changed, and in a very big way. Whatever you do, don’t hit the “upgrade” option just yet!

When Squarespace launched Fluid Engine in mid summer 2022, I hated it. HATED. It was buggy and all over the place and missing everything I was used to and loved about Squarespace. And it was SO different. I almost walked away from Squarespace.

Fast forward some months + some vast improvements + some very cool new features + many deep breaths, and I can truthfully say that I’ve embraced Fluid Engine. And I love it!. It’s not perfect, but its pretty great. Below are some tips and tricks for navigating this bold new world.

**NOTE if you are on 7.0, you will not have Fluid Engine as an option, it is only 7.1 that has changed.
Additionally, if your site is built with Classic Editor, it will NOT automatically convert, your site will remain and be fully supported by Squarespace as it is indefinitely.

First, the good;

A visible, adjustable grid.

Classic Editor also has a grid, but not one that we could see. Images, text, etc., automatically snap into place. Now you will actually see a grid as you add and move elements -see image below. (If you don’t see it, hit command g)

You can move and “drop” elements pretty much anywhere you want them. This pretty much means the guard rails are off, which can be great. And also; proceed with baby steps.

We can also edit the gap between cells in the grid, moving elements closer together or make them seamlessly meet. (Think split sections)

Also now possible with the grid, dragging and dropping blocks

You no longer need to add a block in the exact place you want it within a section. Instead, we add a block (text, shape, image, etc.) from the menu in the upper left corner of the section you’re editing, and then drag and drop it -as well a resize it, anywhere on the grid that we want it. (Gone is the + sign which indicated where a new block could be added)

Layering!

You can now layer elements like text, images, and shape blocks without code.

What used to require CSS can now be done by dragging blocks to the desired position, layering one on top of another. And with one click, you can move block positions backwards or forwards. (If you’ve used Canva this will be familiar) This means that you can layer text over images, overlap images, and easily add shapes, icons and accents.

Layer text images and shapes without code

Create full-bleed and split screen designs without code.

The Fluid Engine editor now makes it easy to create full-width split layout sections that could previously only be created with complicated CSS. You can easily drag content blocks like text and images to the edge of the screen.

Mobile View

Finally, you can easily edit mobile view! More good. And also a some bad.

BUT Fluid Engine also requires you to edit mobile view separately, essentially designing any section twice. Even a simple edit on desktop requires that you also tweak on mobile. Optimised mobile view is no longer automatic as it is with Classic Editor.

You can easily reorder blocks, hide one block behind another, resize, etc., (though if you change any content within a block it will change desktop view)

SUPER IMPORTANT to know though: Blocks will appear chronologically, meaning they will stack in the order that you add them to the section (I know 🤯). So you will need to reorder blocks in mobile view as you go to achieve the desired layout. And remember that if you later add a button or a block on desktop, you will have to edit mobile view.
Also important to note that changes made on mobile view to content inside the block will show up in both places.

Background colours!

We can now add background colours to a text box, summary block, accordion block and more. We can also adjust the shape of the block and the padding, no CSS required. With Fluid Engine it’s literally a toggle on/off, with easily adjustable colour transparency. NOTE that block background colour is changed from within site stiles, within individual section colour settings.

Duplicate content blocks within a section.

This is another update we’ve been begging for for a long, long time. Finally! This improvement saves so much time when you need to copy the styling of a content block you’ve already painstakingly created.

**You can also Copy and paste blocks between Fluid Engine sections.

This is HUGE. In addition to duplicating blocks, you have the ability to copy blocks from one section and paste them in a different Fluid Engine section within the same page or website. Copy single or multiple blocks at a time, then paste them where you want the. The pasted blocks will automatically convert to the colour theme of the new section.

Group Select

We can now select a single block or even multiple objects at once and paste them into an the desired location.

This is a huge time saver and enables consistency of style throughout a website. Just drag your cursor around the items you want to select. On a Mac it’s command C to copy and command V to post. On a PC it’s control C and control V. Or you can just move them as needed with your mouse or keyboard arrows.

Shapes!

After saved sections this is one of my favourite new features. You can now easily incorporate a variety of shapes into your Squarespace designs. It used to be that we had to create images in Illustrator or Canva, save them as a png file, upload them to your site and then use CSS to place them where we wanted. Now its all “In house”

Shapes give so many options; backgrounds, large panels of colour, little accents. I’m still playing with this new feature. The possibilities are endless!

Okay, the bad

Tablet view
It’s not good. There really is no way around it. Squarespace, for “statistical” reasons has eliminated a tablet breakpoint. (They have stated that the number of tablet users is minimal enough to eliminate the need) Previously (in Classic Editor) websites automatically scaled for tablet and mobile landscape breakpoints, and did so beautifully.

So, with Fluid Engine we can -and must, adjust layout for both desktop and mobile. But there is no built in way to adjust tablet view. After much and continued pressure from every web designer out there, there is word they are working on this. But I have no idea if or when a fix will happen. For now, we have to get creative. This plug in from Chris Schwartz- Edmisten offers a way to edit in tablet view.

Text Wrapping
Im a huge fan of the clean, editorial look of text and image wrapping, or “Pull quotes” Im a huge fan of that clean, editorial look, which can no longer be achieved with Fluid Engine.
Im currently using both Fluid Engine and Classic Editor sections, and when I want text wrapping I just do it the old way. Another option, if you want to create this look in Fluid Engine section, Becca from Inside The Square has a tutorial on how to create this effect using markdown blocks.

Overall, the good tips the scales. Im still learning the ins and outs of Fluid Engine but can honestly say that it’s really opened up a whole new world of creative possibility.
And given how fast Squarespace has been making improvements and adding features, I feel confident that the tablet issue will eventually be resolved -though I fear text wrapping will ultimately RIP :(

Fluid Editor; I like it a lot.

First, the good;

Okay, the bad

Section dividers & more!