Squarespace Fluid Engine Review: What it is and how to use it
If you’re a Squarespace user, get excited—Squarespace has a new template engine called Fluid that is going to knock your socks off. The Squarespace Fluid Engine uses a mobile-first design and is built on modern web standards that make it easier for you to customize your site.
Squarespace Fluid is a completely new way of building Squarespace websites. It's designed around the concept of "fluid" design, which means it automatically adjusts your page layout based on screen size and orientation (landscape vs. portrait).
In this article we will be breaking down what Fluid Engine is and examples favorite new features that are a part of this new version of Squarespace. We believe Squarespace to be the #1 platform for building custom website, sales pages, and more…and with Fluid Engine things just got even better!
WTF is fluid engine?
Fluid engine is an entirely new editing experience on Squarespace 7.1 websites! It is the content editor for page sections and it gives you flexibility for placement, resizing, layering, and more!
This editor basically gives you the opportunity to customize your website layouts like never before. If you’ve ever looked into ShowIt (another website platform) it is basically the same concept. You can drag drop and resize any block or element anywhere on the page.
This is a game changer for everyone, designers and non-designers alike. Squarespace websites can now look even more custom designed without needing to touch any code to get things looking how you want them. If you want to learn more from Squarespace you can click here.
If your website is currently on 7.0 - you will not have access to this new editor, so it’s best to create a new website on the latest version of Squarespace to ensure that you get all of the latest features and capabilities.
What are the new features of fluid engine?
NO MORE SPACERS!
With the new editing capabilities, you now don’t need to use spacers to get your content positioned in the right spot. In the old editor (called classic editor) we had to add multiple spacer blocks to resize images, get things aligned, and oftentimes if you accidentally move a spacer block it would mess up your entire design.
With Fluid Engine, you can say goodbye to those frustrating little blocks. Now you can position things anywhere you desire on your site!
GRID BUILDING SYSTEM
The new Fluid Engine has this amazing grid layout that you can use as you add new blocks to each section of a page. This grid has tools that help you align & ensure that each block is the same size!
You will be able to add your content in blocks and duplicate the, copy and paste, move them freely, and resize them by clicking and dragging the corners. I love this feature because it makes it easy to align your content or make sure things are the right sizing.
DRAG CORNER TO RESIZE ANY ELEMENT
You will be able to drag the corners of images and resize them to your liking!
Say hello to split screen layouts on your website with ease and no crazy code involved.. (with no coding involved) now it’s easier than ever to truly customize anything the way you want it.
CUSTOM EDITING OF MOBILE
Squarespace fluid engine now offers a custom edit of the mobile design which is something you were never really able to do before without code. Now you can arrange your blocks in a different order on mobile and it will not affect how they are arranged on desktop. The only thing to note is that you cannot HIDE certain things on mobile or desktop, and if you change font sizing or colors that affects both mobile and desktop too..
Custom editing of mobile now allows you to rearrange content and resize it how you want, offering a truly custom experience for mobile view! Before you weren’t able to change much on mobile without using code - but now it’s easier than ever.
GROUP AND MOVE MULTIPLE BLOCKS AT A TIME
While working on your site, you can now hold the Shift Key and select multiple blocks at a time to move them together, and you can also duplicate them too! This is going to make designing on your Squarespace site speedy! Now that I know the hot keys, I can design website even faster - and being able to duplicate blocks makes it SO easy.
You can even Copy and Paste blocks from one section to another by using CTRL C + CTRL V
LAYERS
Now you can layer your blocks! If you want an overlapping icon on your images you can do this in the new fluid engine editor.
Before you could do this, I used to create my images in another design program and upload them to get that layered effect, but now you can layer easily by hitting the forward or backward button on any block!
BACKGROUND COLORS TO TEXT BLOCKS
This is one feature that I never understood why it was never an option! I always had to code in background colors and it just made my website feel janky to have random code blocks for a simple feature.
Now you can create text blocks with background colors - note that to change the background color behind the text - it corresponds with the theme of that section!
My review of fluid engine
After playing around with FE with client websites and designing our brand new Squarespace website sales funnel template using FE (which you can check out here) - I have some thoughts that may be helpful for anyone considering making the switch to Fluid Engine.
First of all, I absolutely love the new editor. It really opens up the world of possibility with layout design and gives me and my clients more freedom and creativity to their website, say goodbye to all Squarespace websites looking the same. This new freedom completely removes that (Squarespace template) vibe and makes it feel truly CUSTOM!
Similar to the reason why a lot of people prefer Show It, having the ability to completely customize it how you want without code. Now that Squarespace has these capabilities, I think Showit has a lot of competition to worry about!
But that does come with some downfalls - with this new freedom of creativity, it opens up the door for non-experienced designers or even some of my clients to completely mess up their website design!
Which brings in the need to hire a web designer more often to help you fix things or create new layouts. This could potentially be a nightmare!
Luckily, when we create websites and website templates we make it SUPER easy to duplicate layouts and entire sections and pages of your website so that when you want to create something new you wont have to start from scratch.
I always make sure my clients have video tutorials and tools they need to completely customize their site without needing to come back and hire us to update something.
Want more details on fluid engine? Click here to learn from Squarespace!
How can you make the switch?
THIS IS HOW to migrate to fluid engine:
If you have your site on the older version of Squarespace, you’ll need to create a new site & copy your content over from your old site to the new one. This is something we can help with!
Are you an existing dynamo ultima client?
You can book us for a VIP day to move over your site to the new 7.1 and give it a refresh! Click here to send us an inquiry.
Are you a new client?
Send us an inquiry to get a VIP treatment for a new custom website & brand. Click here to learn more about our VIP days.
On a tight budget or want to DIY?
Get our latest Squarespace Website template! Alter Ego - which is built on fluid engine!
We think the new Squarespace Fluid engine is going to be a big hit. If you’re looking for a new website and want to build it using Fluid engine, check out our services or reach out!
