Squarespace is a popular tool that enables users to create and manage professional websites, blogs, and online stores. It has been over a year since Squarespace released their latest block editor engine, Fluid Engine. It’s easy to forget the differences between Fluid Engine and the original Classic Editor, as well as when it’s helpful to use a combination of the two. Both of these drag-and-drop editors can be utilized in Squarespace Version 7.1 with the default editor set as Fluid Engine. In Squarespace 7.0, only the Classic Editor is available. Let us refresh you on the key differences:

1. Grid layout and element overlapping

Fluid Engine’s editor has a 24-column grid with the ability to overlap elements, stretch elements for a full-bleed effect, and manually set the number of rows (shown below). The Classic Editor works on a 12-column grid and elements are placed directly next to each other with fixed spacing between elements.

(Image: Fluid Engine Editor)

2. Image layouts and blocks

The majority of blocks are available in both editors, but if you want to quickly add different shapes in your website design, the Shape Block is only available in Fluid Engine. If you would like to utilize built-in image layouts or image caption overlays, this is only offered in Classic Editor (shown below). Depending on how customized your use case is, you can also choose to create your own image layouts from scratch within Fluid Engine.

(Image: Classic Editor)

3. Mobile layout

The design in the Classic Editor automatically sets the layout of the mobile version of your site without the ability to rearrange the layout. In the Fluid Engine, you can edit the mobile version of your site separately from your web version (shown below).

(Image: Fluid Engine)

Using both Fluid Engine and Classic Editor

Now that we have reviewed the key differences between Fluid Engine and Classic Editor, it’s also important to review what to keep in mind when converting between the two. When you add a new section in Squarespace 7.1, the section will automatically use Fluid Engine. To add a Classic Editor section, scroll down on the Add a Section menu and you will find Classic Editor sections at the bottom left.

To convert a Classic Editor section to Fluid Engine, select the section and click the Upgrade button at the top left. Keep in mind that converting to Fluid Engine may break any custom CSS code you have implemented in your Classic Editor section so it is recommended to keep editing in the Classic Editor for sections with a lot of custom CSS.

Example: AS Travel Pro

Understanding the benefits of each editor will help you build the perfect designs for your website in Squarespace. Check out an example from our portfolio of a website made in Squarespace using both editors: astravelpro.com.

Sources:

Squarespace Support