Fluid Engine: Squarespace Editor

What is Fluid Engine?

Fluid Engine is the new editor for Squarespace that has been designed to replace the classic editor you were initially trained on. FE uses a grid based drag + drop system that offers way more flexibility and opportunity for creativity compared to the classic editor.

How do I upgrade to Fluid Engine?

Brand new websites (created January 2023 onwards) have Fluid Engine enabled automatically.

If you launched your website prior to January 2023, please follow the steps below to upgrade your website editor to Fluid Engine:

  1. Open your Squarespace site. In the home menu, click Pages

  2. Choose a page and click Edit at the top left corner

  3. Hover over each existing section within the page and click Upgrade at top left corner

  4. You should now see a grid when you hover over each section

  5. Click Mobile View at top right corner to ensure elements are aligned in correct order

  6. Continue this process for each page (and all page sections) until you have upgraded all pages of your website

How do I edit my website with the Fluid Engine editor?

  • Open your Squarespace site. In the home menu, click Pages

  • Choose a page and click Edit at the top left corner

  • To edit existing content:

    • Hover over block (i.e. photo or text) you would like to edit and click pencil icon

  • To add new content:

    • Hover over section you would like to edit and click “+ Add Block” and the existing pop-up will appear. You can now drag and drop element blocks wherever you want!

    • Click Mobile View at top right corner to ensure new blocks are in correct location

  • Ensure to click Save at top left corner when making changes.

New Features

SEPARATE MOBILE + DESKTOP EDITING

  • Mobile + Desktop editing is now separate in Fluid Engine! This upgrade is one of the biggest changes to Squarespace editing.

  • In the classic editor, your mobile site was basically built for you without an option for separate changes. With Fluid Engine - you can now separately customize the mobile site.

    • ***This is important to keep in mind when making changes to your desktop site as you will now need to review the mobile version and ensure the element block is in the correct place.

GRID SYSTEM

  • We now have access to drag and drop editing with the grid system. This means you now can get even more specific with placing blocks - you can even layer elements!

SPACER

  • Fluid Engine has removed the need for the Spacer block! If you would like to add a gap between two blocks - you simply drag the elements father apart instead of adding a spacer element.

FULL BLEED CONTENT

  • Full width and split layout sections are now possible without code! Simply drag the image or block element to the edge of the screen.

ELEMENT SIZING

  • Instead of being confined to column sizing (S,M,L), you can now custom resize elements to your desired size.

CREATE LAYERS

  • You can now layer elements without code. You just need to drag and drop elements over one another and can select which is on top with new settings.