Converting your Squarespace website to Fluid Engine
In this tutorial we’ll go over how to convert your Squarespace 7.1 Website to Fluid Engine and cover the differences between Squarespace’s Classic Editor and Fluid Engine Sections.
Squarespace 7.1 has multiple section types which you can use to build your websites. Most are the Fluid Engine Sections, except for a few such as a List or a Gallery.
If you have an existing website on 7.1 you may have some sections using the Classic Editor even with Fluid Engine enabled on your site.
Identifying Fluid Engine Sections
You can upgrade any Section that is using the Classic Editor to a Fluid Engine Section. To convert a section from Classic to Fluid, click the Upgrade Button. This section will immediately be converted to Fluid. If you are using SquareKicker or any other custom code, your section may look different on Fluid as your custom code was written for a section using Classic Editor.
If you had SquareKicker custom changes, these will be removed and you will see a message from SquareKicker. You’ll also get access to an upgraded list of new and improved SquareKicker tools that are only available on Fluid Engine.
If you convert your section and decide that you want to change back to the Classic Editor, this upgrade can be reverted by clicking the Squarespace “undo” button or clicking “Disregard Changes.” Any SquareKicker or custom changes you had will return as they were before.
NOTE: If you click 'Save' this will permanently commit this section upgrade. It’s important to note that there is no way to revert this upgrade once a section has been saved.
Duplication Sections & Pages
If you duplicate a Classic editor section, this will not convert the section to Fluid and a duplicate Classic Editor section will appear. Likewise if you duplicate a Fluid Engine section a new duplicate Fluid Section will appear. If you duplicate a page with Classic editor Sections these sections on this duplicate page will stay as Classic Editor sections even if there are Fluid Engine Sections on the page.
Fluid Engine VS Classic Editor
The Fluid Engine Grid
Adding Blocks
Adding a block is different on Fluid and Classic. Blocks on Classic are added using insert points found throughout the section. When a block is added it can cause an unexpected change to the size of other blocks around the new block on the same row. However, a Block on Fluid can be added by clicking the Add Block button which places a new block to the left side of the section and will not affect the position or size of other blocks on the section. You can then freely love the new block around the grid.
Moving Blocks
When moving blocks in a Classic Editor, blocks can be dragged to other areas of a section and placed above, below or to the side of another block within the section’s columns and rows. On Fluid Engine, moving blocks is much more intuitive as blocks can be dragged around a section and placed anywhere on the grid. A block can also be brought right to the edge of a section or even placed overlapping other blocks.
Resizing Blocks
Resizing a block on a Classic Section can be done by changing the size of a column which can sometimes unexpectedly change the size of other blocks at the same time. To resize a block on Fluid, simply drag the edges of a block to your desired size. Blocks around are unaffected by changing the size of this block.
Block Changes
There are a few changes to available blocks in Fluid Engine that are not the same in Classic. First, because you can resize blocks without resizing columns there are no longer Spacer Blocks. Image Blocks are also simplified with only a single Image block type. There are no longer Image Block Subtypes such as a Card, Poster or an Overlap design containing text and buttons.
Image and Button blocks now show a design option to fit or fill. When these blocks are set to fit an alignment option is also presented.
Text Blocks also have a vertical alignment option
Fluid on Mobile
Mobile screen sizes on Classic and Fluid have very different approaches to responsive design. Blocks in a classic section are automatically stacked in the order they are positioned in the section’s columns and rows. There is no way to change these blocks for mobile screens on a classic editor without the use of custom Code or SquareKicker.
Unique to Fluid is the ability to resize and position blocks specifically for mobile leaving you with control to reorder your blocks on mobile, which is often a website’s most commonly viewed screen size. By default, blocks are automatically stacked in the order they were created and can be resized or repositioned by clicking and dragging these blocks around the grid. To quickly rearrange blocks, click on a block and then click the Move Down or Up Buttons which will swap a blocks position with the block above or below.
For a detailed look at Fluid Engine check out our video on A Complete Overview of Squarespace’s Fluid Engine.