My favorite Fluid Engine features

Table of Contents Show

We've talked about what Fluid Engine doesn't do quite so well before, hitting all those pain points…

But what we haven't talked about is how Squarespace's new editor is actually doing a better job of vs their older Classic Editor.

And I think it's high time we talk about the pros because I don't really like to end on a negative note!

With all new things, especially in technology, there will always be quirks & bugs, and Fluid Engine –as I’ve said before, is no different.

That said, Squarespace has obviously been working very hard to make sure that changes, and changes quickly.

They’ve fixed a lot of the bugs since the initial release, are already working on more behind the scenes, and have even had time to release tons of new features in between.

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

Let's dive into it and talk about all the awesome things that it can do, that Classic Editor couldn’t, including some of the kick-ass features Squarespace has introduced in the last few months.

Whether you're DIY-ing your website or you're a brand new designer, today's tips will be for you!

ℹ️ NOTE:
Today’s video includes a lot of screen sharing to show you the new features & how to use them, but if you prefer to read along you can use the video’s closed captions or read through the transcript below the video!

watch the video 👇🏻

Fluid Engine’s Top 10 Features (early 2023 edition)

❶ No mandatory migration/upgrade process

If you have a website that was built in Classic Editor, which is the only editor Squarespace ever had until about midway through 2022, when they introduced Fluid Engine, the first thing you'll notice is this little gray square up in the left hand corner of any new section you create on a 7.1 website. This is not applicable to anybody on 7.0 unfortunately.

Notice where it says upgrade and if you hover over the (i) on that little icon, it tells you that they've introduced a new editor and you can choose to edit or upgrade your section, only the section to Fluid Engine if you want to.

I think this is the number one feature that they have included for us on Fluid Engine, because if you remember correctly, in early 2020 when they introduced version 7.1, everybody was like, "oh my God, I can't get to that unless I migrate my entire website from 7.0 to 7.1."

And those of us, like myself, made a living porting people's content over from 7.0 to 7.1. Copy paste, copy paste, copy paste, copy paste.

It was a thing and Squarespace heard our complaints. So with the release of Fluid Engine, they have thankfully given us the control, not only per website or per page, but also per section. As you can see, this section, or Fluid Engine, which is this section right underneath it, and both on the same page.

So I think that this number one feature is worthy of the number one spot. , we are not being forced to use Fluid Engine if we are not ready.

❷ Drag & drop experience

Fluid Engine is a true drag and drop experience. For those of you who were interested in using Showit because you could drag and drop those elements pretty much anywhere on the page that you want to, Squarespace had never been like that before.

The Classic Editor was built on a grid system, and by that I mean across the page in your editable area, you had up to 12 columns to work with, and every time you added an element, it would stack visually across the page. So now I'm in a two column layout. I could add up to 12 columns here, and every column would be about this narrow. So that's how Classic Editor worked. Fluid Engine is not the same thing at all.

Classic Editor kind of rearranges all the blocks and stacks them for responsive behavior.

Fluid Engine actually works on a grid, and if I turn on the grid by pressing G on my keyboard, and we'll touch on those key commands later. You can see that this is actually 24 columns across. They're still working with an even number, which is gonna throw some of you that like the in-between sizes.

There is actually a limit of one hundred rows in any section, on Fluid Engine within that 24 column grid, we are able to click on any element that we add inside that grid and drag it off the page.

We can drag it into any grouping of cells within that grid that we want to, and we can resize the elements.

You'll notice that it does snap to the even amount of cells, whatever I am sliding over. So I can't do half of a cell or a row or a column, but it will snap to whatever the closest grouping is.

❸ No need for spacer blocks anymore

Feature number three: there's no need for a spacer block anymore because we have drag and drop control and we can more or less put it anywhere on the page that we want to. So we don't need a spacer block to create that additional space.

Um, what we needed in Classic Editor. So in this case, if I wanted to have a. Heading title here, make it a heading one. And I didn't want that block to go all the way across the page. I'd have to add that spacer to push the title text towards the left and make the text block half the size of the page with, uh, Fluid Engine.

You don't have to do that. You simply resize the block to fit the space that you want it to fit in.

❹ Overlapping elements

One thing you'll notice, for feature number four, is overlapping. We can finally do overlapping in Squarespace without any custom code.

This is a demo site and there is no custom code and I am able to drag any element and move it on top of the other, and you also get control over the layering of those items.

So if I for some reason, wanted this text block to be behind the image, I could do that simply by changing the order of the element that I am selected on. So if I wanted to do the same thing in reverse, I could choose to push the image on top of the text block by doing that from the image itself.

So overlapping is a huge deal. We've been wanting to do this for ages. Squarespace finally listened to us, and we are so, so thankful that we could do this now without having to code the solution into the backend of the website.

❺ Moving, editing & deleting grouped elements

The fifth feature that Fluid Engine does really well is that it allows you to select multiple elements at once, move them around on the canvas, and also align them. We'll talk about that in a minute. Copy them or delete them together as a group. And that is something we've never been able to do in Classic Editor.

So this is also a really huge deal to be able to move them together. When you're creating a layout, if you like the way that this looks, you could drag over both of those elements, make a duplicate copy, drag it down, and you have exactly the same thing. You didn't have to move the elements one at a time, and you're good to go.

That was a super quick solution, right? So we're really, really psyched about this one too.

❻ Mobile layout edits

One that I haven't touched on, number six on Fluid Engine and probably could stand to be a little higher up in the list, is the fact that we can make mobile specific changes to our designs in Fluid Engines specifically, which we have never been able to do in Classic Editor.

Now a lot of. I will say are frustrated with this feature because they don't understand the limits or how it works. So let's dive into that a little bit.

If you have noticed, while I've been moving things around in this section, up here in the top that has a little mobile icon with a blue dot in it.

That blue dot

is an indicator that there's something for me to check over in Mobile View, which is not something we've ever had to do before.

If I click over there and look, things might be okay, depending on how I've been laying out the page all along, but they might also be kind of funky.

Let's do some changes so I can actually show you what this could look like.

Let's add a text block, we're going to put a page title heading in here. We're going to make that heading one, and we're going to stretch that block across the page that takes up the hole width. and we're gonna just, I don't know. We're gonna pretend that that says something meaningful. . We're gonna move all of this down and I think I'm going to add a shape block, and we're gonna put a random shape.

We'll talk about this in a second. Two. Let's see.

Let's give it a color. I'll put that underneath and send it to the back just for a little bit of hideously ugly layering effect in this hideously ugly , uh, layout that I've got going on here. And then at the bottom, we're going to add a, and I'm just gonna leave it like that.

Okay. So let's say that this is what I want this section to look like and since I've made those changes, notice that blue dot is back. If I click on the blue dot, things look a little different over here, don't they?

What is happening right now, is the elements are added to the mobile view in the order that you added them to the desktop section as you were designing. So because I added these three elements last, they're at the bottom of the section, which means you're heading for the section isn't where it's supposed to be, up here.

But that's easily changeable and this is the part where we are thankful for this ability because a lot of other editors do give you the ability to change stuff on mobile like Wix, like Showit. But Squarespace has never done this before, so this is kind of their attempt to wade into the waters.

If you click on the thing you would like to move, you have some additional options over here in mobile view, and one of them is to click the arrow to move it up. And what it does is it moves it up above the groups of things that you already have there. So you don't actually have to grab and drag it up or down when you want to move things around.

So now that I have that at the top, I probably wanna scoot this down a bit, create some visual space for that, and do the same thing for this one. And now we have the button in a kind of a weird place, and the weird shape block in kind of a weird place.

I think I'm gonna drag it up a little. Let's just arbitrarily sync that sucker right here, and put it behind that text block just for a little something interesting.

Now we have a little bit of extra space. This is one of those things that I addressed in a previous video where I was talking about some of Fluid Engine's faults. Not necessarily a thing that's broken, but something you need to pay attention to. There's just a bunch of extra space here that was created as I was moving things around in mobile view.

So if I drag that back up, then I can take care of that extra empty space that we don't want. I can also resize the button.

The Fluid Engine grid is actually different than the desktop grid.

This one is working off a number of columns, which is three times less than the total number of columns on desktop. We've got eight columns now instead of 24, and we can still drag things to the edge and it will snap to the edge of the screen. Or we can keep the content inside the grid and resize it however we want.

Now of course, you're wondering what happens to desktop after I've made these changes. Because all I've done is move things around on the screen, everything is exactly the way I left it in desktop, and this is where this feature shines.

We could never do this before and I can't tell you how happy it makes me to know that I can do this now without using a lick of code and I can customize it for both screens.

What we can't do is handle the spacing issues on tablet. I'm sure that's in the works to be fixed. We are all complaining about it. If you wanna learn more about that, check out my other video on what Fluid Engine is not doing so well. But for desktop and mobile, this works absolutely perfectly.

After trying this feature out for yourself, you're not sure exactly what the limitations are, I'm gonna address that really quickly right here.

clarifying mobile editing limitations

If you switch this image from fit to fill, or shape, anything that you do to the content inside the block that is going to transfer over in both. So primarily the mobile specific edits that you can make that do not affect desktop are layout positioning changes.

So if you change a color, if you change the text inside a text block, if you adjust it so that it wraps a little bit better by doing say, shift enter and forcing that title to wrap in the middle of that sentence, when you go back to desktop, that change will have come over onto desktop.

Because we're not making changes to the position of these elements, we're making changes to the content inside them. So that's kind of a different ballgame.

That's the limitation to this. I'm sure it will become something incredible over time. It's still a very new feature at the time of recording, so I'm sure that they are building out more to this.

❼ Alignment tools

Feature number seven.

Let's talk about some of those tools that we saw while I was moving some things around.

If we select over these three elements, you can see an align group option, which was not there when they released Fluid Engine. This is a very new feature, but it actually will let you align the content that you've selected inside this group based on whatever option you choose.

Left aligned, center aligned, right, aligned, and then aligned to top, middle, or bottom. Very cool options.

And of course if you decide that you don't like any of those, you can hit the undo button and go backwards. Really thankful that they added that in.

There's also new features around alignment within the blocks. Some blocks, not all blocks, buttons and text blocks specifically have this feature. You can decide whether you want to align the content inside the block to the top, to the middle, or to the bottom.

If you add a button to the page, you can also go into the button settings under design and choose fit, and then you have button alignment again, which you might be used to on Classic Editor. You can align the button to the left center or right, and that actually aligns it within the block width, or space, (the boundary of that element.)

When you choose fit, or fill, you have to be cognizant of how big you make the box to fit that button in, because on smaller screens, if I were to make that button really short, see how it starts to wrap funny? It's actually only taking up about three columns here, and if I switch over to mobile, it could potentially start looking pretty weird. So you just wanna make sure that you're resizing the block so that it reads really well, but in addition to left, right and middle, you also have top, middle, and bottom.

So you can actually align the button to the top center or bottom of the block itself, as well.

This is only available in the option where you have the button selected to fit, not fill, because on the fill option, it's literally filling the entire box that you're putting the button in, no matter how big you make it. So you can make your buttons absolutely enormous, if you want to.

While we're talking about the content inside the text block, let's also talk about the fact that they've added some padding elements. On Fluid Engine specifically, because we can also align the elements inside the block, we can also add padding or spacing around the edges of it. So if you want a bunch of extra space around the edge of your content, but still inside the block, you can do that as well.

And of course, they introduced corner radius a while back, and if you're not familiar with the way that works, basically this icon represents all four corners of the element.

So if you want to apply the same radius, which is done in pixels, so let's just do a giant number so you can see the difference. Let's do a hundred. That is actually a hundred pixel curve on all four corners. Or you can choose a specific corner, delete maybe the top right and the bottom left, you can leave corners with a point and have other corners with a rounded edge.

The combination of all of these things can actually help you create a really cool design with no code if you're really comfortable with the features.

❽ Image overlays & block backgrounds

feature number eight is image overlays. This is a really exciting one that Squarespace just introduced at the end of 2022. They have added the ability to put an overlay over any image, and you can choose the color of the overlay, whether one from your palette or a custom color, and the transparency of the color, which is awesome.

This is something that we could do sort of in Classic Editor, but it was more global. It wasn't like a per block setting, it was like all collage image layouts are all card image layouts, and that setting applied to everything throughout the entire website, unless you knew the code to target them individually.

This is actually per instance. So this only applies to the image I have selected here on this particular page and this particular section. And I think that is a really cool feature. The fact that you can change the opacity if you want to, you can take it all the way down. You can change the color.

You can also, oh, I'm so excited about this. I'm such a nerd. You can also change the blending mode, and for those of you who are graphic designers, you're going to know exactly what that means. For those of you who are not, that actually changes the way the color affects the image behind the color you're putting on top of it.

That probably made no sense, .

Basically, this changes the way that the color is blended into the image itself, uh, which is why they call it blend mode. There is something really similar in Photoshop and Illustrator and a lot of other design software. So to see this here is freaking awesome.

If you're not sure what these colors mean, like color dodge, color burn, light and darken, just go through the list. They're not gonna change anything permanently, so you can always change your mind, try everything and see what works.

One thing that I touched on earlier, also, part of feature number eight is, the fit vs fill vs shape.

Shape was introduced a year or so back, but fit and fill are relatively new to images inside Fluid Engine specifically. This is not something that you can do in Classic Editor, you had to actually select the image and you could only crop the image based on how far you drug it up.

In Fluid Engine, you actually have the option to fit the image, uncropped, inside the shape that you put the image in essentially. So whatever size the image block is, you can fit the image in there, uncropped, if you want to.

Within that while it's in fit, you can also choose to align it, so if I wanted this to always stay in the center, no matter what size I made it.

From the other menu. If you want to purposefully crop it and make sure that it fills the entire space of the image block, then you want that to be on fill. This is not a global setting. It is again, per image, per section, per page, per use case. And that is really cool, I think, we get to decide when to use this and when not to use this.

One other thing that they have added on the shape block there's also a stretch. So if you choose a shape, you can also choose to stretch the shape from top to bottom, left to right of the entire border of the block that the image is in. So I think that's also a really cool thing.

Not always super useful, but it could be if you want an oval versus a circle, for example.

❾ Saved sections

All right, feature number nine. This is one of my absolute favorite inventions that Squarespace has released in all the time that I've used Squarespace. Prior to now, uh, I have used the Square Website's Tools Pro Chrome extension to copy content from a page and put it on another page within the same website. That was the only way that we could do it before.

Now, the Chrome extension for this particular use case, it doesn't work in Fluid Engine. So I was really, really excited when Squarespace finally introduced saved sections.

If this, for example, was a layout that you wanted to be able to repeat on other pages, all you have to do, literally, is open the editor, and then inside the section you want to save as kind of a preset design layout, you click the little heart icon, it adds it to your saved sections, which you can then view and reuse on any other page of your website.

So if I were to save the changes that I was just making and I wanted to be able to put that exact layout, maybe on the about page somewhere in a new section...

let's just add a new section and I'm gonna click saved sections and I can see that section here and all I have to do to apply that to this page is to click on it. It populates it with the same shit that I used before on the other one.

That's so crazy.

I've been waiting for something like this for a long time. As you can tell, uh, you can basically create your own template with this feature, reusing the same stuff that you created and liked.

You put so much effort and time into it, you might as well use it in other places and make sure in the process of doing that, that your website design stays consistent from your homepage all the way to that page that no one's ever gonna see.

We all have those, don't we??

❿ Duplication & keyboard shortcuts

For Fluid Engine, there's all kinds of keyboard shortcuts that you can use while you're editing, including arrows on your keyboard, the command D to duplicate. Pressing shift arrow will move elements up in the layering or the overlapping in the section. So if we go shift arrow up, it goes up to the top, shift arrow down in the middle, shift arrow down, goes back to the back. Resizing the element, if I hit command arrow left, I'm narrowing the block or command arrow right, I'm widening the block.

Squarespace actually gives you everything you could possibly need to learn these keyboard shortcuts on your own. And I'm gonna link that in the description below so that you can go check that out and bookmark it for safekeeping because they will keep this updated for you. And it gives you the key commands for both Mac and PC.

🔗 Reference:
Squarespace's list of keyboard Shortcuts (for 7.0, 7.1 Classic Editor & Fluid Engine on Mac or PC)

final thoughts

That's a wrap on our Fluid Engine Pros, . If you loved this video, please leave a comment below. I absolutely love getting your feedback. Make sure you like and subscribe to support my channel's growth so I can keep producing content like this for you and keep teaching you about the tools that I love and use in my own business so I can help you do the same thing.

Until next time!