Squarespace changes its editor to Fluid Engine and what that means so far

Note: I didn’t finish this post until I felt like I had spent enough time using Fluid Engine. Having put in some time, I feel that it’s incredible (with some aspects that need smoothing out).

I believe in the team at Squarespace. With every change in its operating system for users at first it was bumpy to adjust to but once I got used to it I couldn’t envision going back to the way it was before.

Fluid Engine, unveiled this summer of 2022, offers a lot of flexibility. You can move and adjust blocks in relation to how they fit on an adjustable grid within a section of your Squarespace website page. To me it eliminates a lot of code hacks needed to adjust spacing between elements known as blocks on Squarespace.

What I don’t like about it is how automatic settings such as how Image Block styles used to render are now this free form setting that allows you to configure exactly what you’d like to see. This freedom causes the user to have to take more steps to a certain configuration that was once a pre-set standard. As a Squarespace builder what I dreamed of is having the Classic Editor in place as the standard, but then allowing Fluid Engine to take over temporarily when it’s needed to adjust spacing.

But like when Squarespace version 7.1 came to life to replace 7.0 I was initially very resistant. We, as human beings, are resistant to change. I vow to practice Fluid Engine to train my muscle memory. I’m going to trust that professionals who think about the Squarespace user experience as their full-time job have carefully considered the pros and cons of how the consumer uses the platform.

Professional designers like myself represent only a small fraction of users, so what is good for the typical person looking to design a website themselves may be vastly different from my needs. Fluid Engine, in my short time using it, has shown that there are many advantages to being able to move elements freely within a section. Having the ability to overlap images for a collage effect without code is very nice.

So what does this mean to you?

If you are used to the structured nature of Classic Editor I advise you (and myself) to take a more relaxed approach to designing a page. Slap your content into that block. Size it up and move it. Have fun (it’s hard, I know) and play around with the new possibilities.

Be creative and try overlapping elements. Haven’t you seen a site that you wished you could mimic with the overlapping elements? Now you can have complete control over each part. Just get started (as usual) and you’ll start to see the advantages. I know, trust me, it’s difficult at first and admittedly I am resistant.

Mobile gains

Something that is hugely advantageous with Fluid Engine is the ability to adjust how your site looks in mobile independently of your desktop version. This is huge because more and more our world is going towards mobile first. Dinosaurs like me still can only shop online on desktop devices. I need to see everything big before spending money. But I must recognize many people feel comfortable simply clicking Add to Cart on their phones and just browsing the internet on our little devices. So Squarespace now can truly be adjusted for all these folks glued to their phones.

Changing how you think

Now that boundaries have been taken down, it’s time to rethink how you interact with the grid that has always been part of Squarespace’s editor. The grid is now visible and you can place your Blocks in place within Sections that you could not have before.

I’ll admit, the adjustment isn’t easy. But one tip I can give you is to simply practice. It’s a principle for many challenging aspects of life, but it’s not easy. Slow and steady repetition wins out.

At first I was not used to having to adjust the entirety of the grid within a section. Soon enough I could see the advantages of being able to position blocks with more control within a section. The possibilities for overlapping elements adds a new dimension to design capabilities.

Negatives of Fluid Engine (so far)

It takes longer to build a page with Fluid Engine because elements are not locked in. Yes, that is the benefit of the new editing system, but there are a lot of adjustments needed to even out a content section. But like many aspects of Squarespace’s evolution, it may just take some getting used to before the muscle memory kicks in and everything becomes, ahem, fluid.

Previously, Image Blocks had handy preset designs, Poster, Overlap, Card, that would allow the user to instantly place an image and its orientation with text in specific configurations. Now with Fluid Engine, one has to recreate these formations manually.

Perhaps this ultimately is better because it allows designs to not be constricted to a finite set of design patterns. I’m going to trust Squarespace’s developers as they have always improved the product at each evolution.

Playing with the edges

One design aspect that the native Squarespace CMS did not allow is placing elements along the edges of pages. Now you can move an image or text block near the borders of the Sections, so experiment with page designs that are not so centrally oriented. 

For example, If you want an image to completely cover about half of a section, you can simply male that happen in Fluid Engine without any special code. In the past one could not place a Block along the area that served as a border between the Block and the boundaries of the set section. This allows for some fantastic full-bleed images that don’t span the entire width of the Section. (You may wonder why I capitalize the terms Block or Section. It’s to denote the label that Squarespace uses within its editor so you can see exactly what parts you are working with.)

Just jump in

My advice to get comfortable with Fluid Engine is simply to add parts (Blocks) and then rearrange them accordingly. Sometimes you can’t grab a block and drag it where you want to because it is located behind another block. Simply move one part or expand the element by dragging an edge. Once you can click onto the element you can drag it and then adjust it accordingly. Every corner is now able to be expanded or minimized to your liking. 

Where does this come into play?

A great example of using this malleability is when you have an image Block or text Block pairing that doesn’t align the way you’d like it to in an ideal situation. Perhaps the image Block is too short compared to how tall the text block is. You can now drag and drop the top or bottom edge of an image Block and expand it to the height you desire.

Overlapping is fun

Adding a new “textural” dimension to your Squarespace website design is very simple now. And instead of creating a set graphic with overlapping elements in Canva, for example, you can now use Fluid Engine to push Blocks behind or over another Block. There is an editing setting that allows you to push an image in front of or behind another image. You can adjust the degree of overlap and the dimensions across different devices for the optimal view.

Background behind text Blocks

The concept that you can now add a color background to a text block seems simple and welcomed, but at first it took me a while to get used to the fact that this feature is so simple in Fluid Engine. Just click on Edit on your text block and click on the Design option and hit background. The color of the background automatically defaults to the Color settings of your palette, but you can click on your color section editor to manually adjust the background color.

This feature gives you the ability to really make text blocks stand out. This is a huge upgrade in terms of being able to overlap with images and call out a features or details box within your Section. For example on an About page, you can have a main bio and next to it you can have a colored background text Block with degrees and certifications. This visually separates the text features on the page and really helps when formatting and giving emphasis to specific text Blocks.

Banner fun for homepages

Admittedly, as a designer, my default homepage design tended to feature a nice, full-bleed image to draw users in on the homepage. It’s a safe configuration with a great image, but now Fluid Engine just makes it so much easier to spice up the first thing visitors see on your website.

In the past you could collage that section with graphic design skills, but today one can easily create overlapping elements to call out headlines and render more elaborate visual flair. Just being able to stretch an image Block to the edges of the site is a major advantage in having control of the look. I recommend playing with multiple images and colored background images for a creative take on Sections within your Squarespace website design.

Living on the edge(s)

Pardon my 1990s Aerosmith reference, but the expression works when it comes to Fluid Engine capabilities. Prior to the introduction of Fluid Engine, you could not use the Classic Editor to place blocks along the edges of a website. Thankfully tools such as the excellent software Squarekicker (a no-code add-on editing accentuator to Squarespace) did make it easier. Now, Fluid Engine allows you to place an image or other content block on the edges of a page. It’s not often you want to place an object so close to a border of a page, but used sparingly and with intention, employing this technique will really make a design standout. 

One of my biggest influences is print design. I clip or take photos of magazine or catalog pages for reference. With Fluid Engine you can now create textures and play with spatial relationships that weren’t easy to achieve before. Fluid Engine allows your designs to have layers that create a visual interest that can help emphasize particular aspects of your brand.

Try putting big text over a rectangular shape or photo. Change the color of one or a few select words in a phrase or sentence. Really push what is now possible when different blocks can overlap. It’s easy to control too. Just click on edit mode for a block and you will see two overlapping squares, one solid, one dotted. Click on that to reverse the order or what block sits on top of the other,

Let’s do it

Admittedly, when I was testing Fluid Engine in beta as a Squarespace Circle member, I didn’t like it. Well, I also didn’t like version 7.1 when it first came out. I can’t imagine life without both of these improvements.

I admire Squarespace for constantly innovating and listening to its customers. They really do use data and feedback to assess what is working and what is not. Then they get to work and start developing potential improvements, And they don’t wait until the improvements are perfect before releasing them. And that’s just a key in life. There is never a perfect time.