How to Use Squarespace's New Editing System - Fluid Engine
Squarespace recently released Fluid Engine, their newest editing system for Squarespace 7.1. The most notable difference between the older Classic Editor and Fluid Engine is the ability to move blocks throughout a section on a new grid system, rather than having to use a spacer block or custom CSS.
There are a few things you want to watch out for when using the new system, especially when editing a website that already has sections built with Classic Editor (we found this out the hard way!).
We have been using the new system quite a bit over the past month as we build out our next 7.1 kit, and have found it to really streamline the process of building out blank sections. The spacer block was one of our favorites when creating templates from scratch, but Fluid Engine removes the need for the use of spacers and allows for much simpler customization of sections.
Getting Started
If you are starting with a new 7.1 website or adding a new section, simply select “Add Section” and the new section will automatically be in Fluid Engine.
If you are working on an existing 7.1 website that was built using Classic Editor and want to edit a section using Fluid Engine, you will hover over the section and click “Upgrade” in the top left corner.
New Features
Once you are in a section that is using Fluid Engine, you will notice the key differences between the new features and what was offered in Classic Editor lies in the new Format options (once you click “Edit Section”) and the drag-and-drop feature inside the section. One other amazing addition is the ability to make edits to the mobile layout without impacting the desktop version of your site - this is a GAME CHANGER!
Format
Row Count – the amount of rows that make up the grid. Keep in mind that the minimum amount of rows a section can have will be the equivalent of the height of the tallest block that you have in the section.
Gap – the spacing between each box in the grid system. You can select from the two default gap options or customize by altering the horizontal and/or vertical spacing between boxes.
Fill Screen – expands the background height around the grid system to create spacing between the top and bottom of the boxes. If you deselect this, there will be no spacing on top and bottom.
Height – provides more customization on the spacing at the top and bottom of the grid system
Alignment – aligns the grid system to the top, bottom or centered on the section.
Drag-and-Drop Update
Squarespace has always been a drag-and-drop website editor, but with Fluid Engine, you have the ability to drag-and-drop to any location throughout the grid system, including overlapping with another block. This gives you the ability to overlay text over images, lines over text or anything else you can imagine.
Once you drop a block over another, you then have the ability to adjust the layers by moving the block forward or backward. You also now have the ability to adjust the vertical alignment of whatever is in the block to better suit your needs.
Mobile Editing
Finally! Squarespace has created a way to make layout edits to your mobile view without impacting what you site looks like on a desktop. No more adding custom CSS for basic mobile changes, but rather you can now drag-and-drop in the same way as you can for the desktop layout and your changes will save separately. We love this about Fluid Engine!
Important notes:
Fluid Engine is only available in Squarespace 7.1 and not 7.0. Also, areas like blog posts, event descriptions and product additional informational still use Classic Editor.
Once you have chosen to upgrade a section from Classic Editor to Fluid Engine and then saved your changes, you cannot revert back to Classic Editor. Squarespace recommends duplicating a section and then upgrading to Fluid Engine to allow you to go back to Classic Editor in the original section if you find you prefer the older system.
Spacer blocks are not supported in Fluid Engine, as the grid system replaces the spacers. Having said that, know that if you upgrade an existing block that has spacers in it, they will be removed and the overall formatting will be changed irreversibly.
Try it Out!
Overall, we have enjoyed the flexibility that Fluid Engine offers when moving blocks throughout a section. It does take a bit to get used to it, though we think it will ultimately allow for more customization without having to add custom CSS. We don’t know how long Classic Editor will stick around, but if you prefer to use it, you can select to “Add Blank (Classic Editor)” when adding a section by scrolling all the way to the bottom.
Give it a try and let us know what you think. If you have any questions, be sure to let us know in the comments below!