Upgrading Your Squarespace Site to Fluid Engine(aka Help! I have no idea how to edit my Squarespace site anymore)
Okay, so at some point, your Squarespace 7.1 site is going to switch over to the new editor “Fluid Engine”. Scary, I know. But honestly, I have found it to be a lot better and more intuitive overall. So try not to panic yet.
But do read this post because it includes some really important tips that will help the transition go more smoothly.
Of course, reach out to me if you get stuck or have questions. And join my mailing list so you don’t miss out on future updates and tips. (You’ll also get a bonus checklist that will help you make your website look more pro).
Should I switch my site manually before it happens automatically?
That’s really up to you, but I would recommend it. Whether you make the switch on your own wait for it to happen automatically, there will probably be some design adjustments you’ll want to make to the mobile view at least. And possibly to the desktop view as well. (Keep reading for important tips about editing mobile sites). I recommend you just find a time when you have a couple of hours to make the transition and then check that all your pages still look the way you want them to look on desktop and mobile.
How do I upgrade my site to Fluid Engine?
In order to access the new editor, click on "upgrade" on the top left of any section of your site. You’ll need to upgrade existing sections one at a time.
If you create a new page, it will use the new Fluid Engine editor by default but you are still able to add a blank section using the classic editor by clicking “classic editor” at the bottom of the “Add Section” window. Once you upgrade a section or page to Fluid Engine, you won't be able to go back to the classic editor (at least for now...that feature may come at some point).
How do I edit the mobile view in Fluid Engine?
You’ll still just click on the mobile icon on the top right of your screen while you are in edit mode. Once you’re in mobile edit mode, you’ll drag and drop blocks to make sure they are in the right position.
If you edit/create a page in the desktop view, the mobile version will need to be edited separately (otherwise blocks will just appear in the order you added them to the section). So any time you make an edit, just make sure you check the mobile view and edit it as needed! If you forget to do this, the mobile version of your site could end up looking pretty wacky.
If you change text or images, text styles, or add blocks in mobile view that will also change in desktop view. However, you can (and should) adjust image sizing and placement and change order of blocks without it charging anything in the desktop view.
Do I really need to check the mobile view every time I make an edit to the desktop view?
I hate to say it, but YES. If you skip this, your mobile site can start looking real weird real fast. Just get into the habit of checking your site on your phone every time you edit and making mobile edits as needed.
Hopefully Squarespace will fix this at some point. Join my mailing list and I’ll let you know when/if they do.
How do I get rid of the extra space in my Fluid Engine mobile view?
While the mobile view is super nice once you get it right, there is one issue that I’ve found with editing the mobile view. There is often a bunch of extra white space (empty space) that seems impossible to get rid of.
Here’s the (somewhat annoying but better than nothing) solution that Squarespace support shared with me: When you are editing your mobile view, drag your browser window to be as small as possible, close to the size of your phone. Then go through and drag the bottom of each block up to be as small as possible. You’ll know the block is as small as it can be when you see a red line appear at the bottom of it. For some reason, when you have your browser screen full size, you’re not able to see this extra space, but once you shrink down the screen it appears and you’re able to get rid of it.
It’s pretty annoying, but hopefully it’s something that Squarespace will figure out and fix at some point. If you’re on my mailing list I'll let you know if they fix this issue.
Squarespace keyboard shortcuts
To copy a block: Command C for Mac or Ctrl C for Windows
To paste that block into another section of your site: Command V for Mac or Ctrl V for windows
To show the grid underneath your design: hit the G on your keyboard
Okay, hopefully this info helps you have a relatively painless transition to Fluid Engine. Please reach out if you need help at any point and join my mailing list so I can send occasional tips to help you stress less about your website. You can also read more in the Squarespace Help Center.
—Anna
