Get to Know Fluid Engine: The All-New Squarespace Editor

Squarespace Tips

Aug 1

The web is ever changing, and Squarespace is no exception. Though some of us might argue that this newest improvement is long overdue to keep up with the likes of Showit and other drag and drop editors, I’m really excited it’s here!

Let’s take a look at some of the differences you will notice with Fluid Engine and then cover some of the really cool new ways you can utilize it to create creative designs easier than ever before.

What is Fluid Engine?

Fluid Engine provides an all new experience for Squarespace 7.1 users, allowing a simpler way to create unique design effects without having to rely on CSS. It’s now easier than ever to design websites with elements you can drag or drop anywhere, overlap, and all without those pesky spacer blocks. (Hallelujah, am I right?)

What makes Fluid Engine different from the Classic Editor?

Fluid Engine uses a 24 column grid based system, a big improvement from the previous 12 column layout the Classic Editor provided. What does this mean for you? With the additional columns you now have even more flexibility when moving blocks around your website. Another great thing about this editor is you no longer have to compete for space with other elements on your page without it destroying your layout. Now you can add, move and overlap elements with ease.

You can also adjust the size of the grid by just grabbing the little blue handle and moving it up and down.

Sweet Tip:

To view your grid while you work in Fluid Engine, simply press “G” on your keyboard. To hide it, just press “G” again.

You will also notice some differences in your section settings. Fluid Engine provides you with even more customization options. Let’s go over each of these new settings.

Grid: Row Count Adjust the number of rows in your section’s grid. Keep in mind, this will automatically adjust based on how many rows you are using in the section. When editing mobile, you can adjust the rows independently from desktop.
Grid: Gap You can now change the space between each block in the section by adjusting the gap and even remove the gap all together.
Section: Fill Screen Don’t want padding around your content? Turn this setting off to remove it and have full height and width sections.
Section: Height & Alignment You will only see these options if Fill Screen is turned on. Use the Height setting to add padding to your section and use Alignment to set where that additional padding will appear in the section.

While the Fluid Engine makes it easy to add large sections of content, Squarespace recommends not adding more than 60 rows in a section for optimal load time on desktop and mobile.

Fluid Engine Perks

Overlapping Blocks

One of my favorite new features is being able to easily overlap blocks. I have wanted to see this feature on Squarespace for so long! You can even easily arrange the blocks to move one in front of the other.

Now I will say, one of the downsides to Fluid Engine currently is that it removes the option for those handy image blocks. No longer are the days of quickly grabbing a collage block or a card block to easily add some text to. But don’t worry, it’s not all bad, because with a little extra leg work we can get the same results, and perhaps even better results, because now that we can easily customize it just the way we want it to appear.

Move Multiple Blocks at Once

This may seem really simple, but man is it a game changer! To move multiple blocks at once, just right-click and throw a lasso around those blocks. You’ll see a blue box around all of the selected elements, now you just click and move the whole group at once. Cool, huh?

Full Width Sections

Do you like the split layout look you see on some websites, but you aren’t comfortable dabbling in code to achieve the effect? Good news! Now you don’t have to. Under Settings, turn off the “Viewport” option and set the number of rows you want for the section. Add your Image block, change the image settings to “fill” and place your image. You can even go from side to side if you want to completely fill the section. For the split sections, I like to have the image go off the edge to make a full bleed, but that’s up to you!

Change Background Color + Customize Text Blocks

This new feature is pretty nifty. I can’t tell you how many times I’ve wanted a background color for my text block, now it’s as easy as clicking a button! Not only can you change the background color, you can also customize your block even further. So have fun with it and align your text, set the corner radius for rounded corners and adjust the padding.

Customize Mobile

Squarespace has always been pretty good about providing you a mobile version of your site without you having to do a thing, which was great! But what happens when it’s not quite right? Unless you were comfortable with using a little code, you were stuck. That’s no longer the case! Now you can edit the mobile version of your site independently from desktop. Now there are a few exceptions, changing the style (color, font etc) and the block content. Also, at the time of writing this, if you change the alignment of the content in a block, it will change on mobile and desktop. I’m hoping to see this change in the near future.

To use Fluid Engine or not to use Fluid Engine

If you’re ready to start using Fluid Engine, any new sections you create will automatically use the Fluid Engine editor. If you have sections that you previously created in the Classic Editor that you want to convert over to the new editor, go into Edit mode and click the “Upgrade” button in the top left corner of the section.

Now, if you aren’t ready to dive into learning a new editor, don’t worry! As of now, you don’t have to use Fluid Engine. To start a new section in Classic Editor simply select “Add New Blank” Classic Editor option.

Sweet Tip:

Once you start a section using Fluid Engine, you cannot change it back to Classic Editor. This also applies if you upgrade an existing section to Fluid Engine, you cannot change back to Classic Editor.

My Final Thoughts

Fluid Engine is going to open up all kinds of possibilities to Squarespace users that weren’t easily available before. I think that Squarespace is making a step in the right direction here. That being said, I imagine there will be lots of changes and updates in the coming months to perfect it…so if you’re excited to get started using Fluid Engine, keep this in mind. Patience is key!

If you liked this post, Pin it!

Ryann Brown