Fluid Engine Update & Tutorial - Squarespace 7.1
It’s been a long time coming, and it was a love hate relationship amongst Squarespace website designers at first. However the new editor, Fluid Engine, has a lot going for it, in terms of practicality, but also quite significantly the flexibility of layout which is now available to designers and everyone else.
What is Squarespace’s Fluid Engine?
This is the new editor on Squarespace 7.1 (not available on the older version, Squarespace 7.0, which will continue to use the ‘classic editor’). Although Squarespace has always had a very good reputation for being the convenient ‘drag and drop’ platform, and it used a 12-column system in which we could design websites, Squarespace have expanded this to a 24-column system in Fluid Engine.
If you have ever used the design tool Canva, you will become familiar with Fluid Engine very quickly. The idea is to improve the drag and drop experience by offering a grid based layout, with even more design flexibility and options.
Demonstration of Fluid Engine - moving around blocks and adding a new block.
New Features
You will design your website pages in sections, each consisting of the 24-column grid.
You can drag and drop your content blocks without disrupting the rest of your section design; where the blocks can move independently.
You can resize blocks by dragging the corner in and out.
You can select & move multiple blocks at the same time.
Squarespace Content Blocks
Spacer Blocks
Fluid Engine no longer has any use for spacer blocks (we didn’t even get a chance to say goodbye!).
Spacer blocks were previously used to create spacing in-between content blocks, and enabled us to create white space on websites, giving them a beautiful and minimal look.
With the capability of how much we can move around blocks, we can achieve the same now without spacer blocks.
Fit & Fill
You now have the option to fill out blocks with an image or do the same with the button block.
Key advantages of this is to ensure a collection of blocks are the same size, or not having your images only display a certain ratio.
Once again, it just provides that extra flexibility to your design.
Fluid Engine - Fit & fill options in blocks
Background Colours
You can now add background colours to most of the content blocks. In the ‘Edit’ mode, Squarespace provides an option to select a background colour, which can be styled with your specific Hex code, in Design > ‘Site Styles’.
This helps with distinguishing certain blocks, like text blocks, from others.
Squarespace Fluid Engine - Background colours
Split Layouts
You can create beautiful split layouts on your page sections, whereas before you would have needed plugins to be able to do this.
You can so easily bleed your images and backgrounds off the edge of the screen, and to the top and bottom of your section.
There are some really great things you can still do with the help of plugins like Squarekicker, but cannot achieve yet with Fluid Engine alone. For example, creating sticky scrolling and so much more!
Fluid Engine - Split sections & full bleed image
Mobile Editing
Squarespace has always been the preferred choice for so many businesses and web designers because of its ability to automatically optimize your design for mobile layout. It meant never having to design twice!
Now, in many cases you will need to double check what your website will look like on mobile, and you will most likely need to make mobile edits. One downside of this new editor is that the blocks on mobile view will correlate directly with the order that you added them to that section. It might look quite strange indeed!
This doubling up on work is our least favorite part of Fluid Engine, but we will be sure to keep this blog updated with the latest on this (as this may improve in future months to come)!
Note: your mobile edits won’t impact your desktop design.
How Do You Get Access To Fluid Engine?
Squarespace 7.1
When you go ahead and start a trial on Squarespace going forward, you will more than likely automatically gain access to the new editor.
The way to check if you have Fluid Engine as your editor, is to follow the route, Pages > (select a page) > Edit, and then hit ‘Ctrl + G’ on your keyboard to make the grid layout appear.
If you already have a Squarespace 7.1 website (which you launched prior to July 2022), and want to gain access to Fluid Engine, you can follow these steps.
Login to your Squarespace website:
Go to home menu
Go to Pages
Select a page > Click ‘Edit’
Click ‘Add a section’
Select ‘Upgrade’ (this option will appear on the top left corner of your section)
Squarespace 7.0
This older version of Squarespace does not have access to Fluid Engine, and you will need to continue using the ‘classic editor’, if you want to stick to this version.
Our recommendation would be to switch your website over to Squarespace 7.1, whenever you can. As this is the direction in which Squarespace is now heading, and going forward this newer version will mean that you’ve got access to the latest Squarespace updates!