The Squarespace Fluid Engine: A Guide to a Powerful Upgrade
The year 2022 saw some amazing Squarespace upgrades, and I can’t seem to get enough of some of them yet, even in 2023. The powerful Squarespace Fluid Engine which launched in July 2022 is one among them.
If you have been using Squarespace for some time, you have probably heard about Fluid Engine. Once you get familiar with the new Squarespace Fluid Engine, it’s easy to see why it’s creating such a buzz in the web designing industry.
So, what exactly is this magical drag-and-drop website editor, and how can you use it best?
Read on to explore the ins and outs of the Squarespace Fluid Engine.
Before you continue, I’m a Squarespace website designer you can contact for your site projects. You can check out my Squarespace website design portfolio for previous works. Meanwhile, let’s dive in and prepare to work with fluid intelligence!
What Is the Squarespace Fluid Engine?
Fluid Engine is a powerful upgrade to the Squarespace platform that offers users greater flexibility and control when building website layouts. The Squarespace drag-and-drop website editor allows you to resize your site’s elements on the fly to create incredibly flexible designs across all devices.
Fluid Engine uses a “fluid layout” based on percentages rather than fixed widths.
It enables the elements on your site to automatically adjust in size to fit any device or screen size — from mobile devices to laptops and everything in between.
Fluid Engine gives you unprecedented control over how your content is displayed on any device.
You can customise aspects like font size and column widths and create animations and transitions tailored to each type of device.
It gives you complete control over your website’s look, feel, and functionality — regardless of what device you’re accessing it from.
Squarespace Fluid Engine has revolutionised CMS (content management system) platforms with its unique features.
Squarespace Fluid Engine Review: Breaking Down the Features
So, what does the Squarespace Fluid Engine offer? For one, the new drag-and-drop website editor allows you to customise existing themes and create unique designs. It is a perfect means to take your website’s design up a notch.
Let’s have a look at some other features.
Separate Mobile Editing
One of the advantages of Squarespace websites is their automatic responsiveness for mobile. However, they lacked mobile-only editing before the new upgrade.
With Fluid Engine, you can edit the mobile version of your Squarespace website without impacting the desktop version. So, you get a mobile-friendly website without building it separately, while you can enhance the layout and features using Squarespace Fluid Engine.
Advanced Design Capabilities
Another great benefit of the Fluid Engine is its advanced design capabilities. With more fluid control over borders, typography, colours, and layouts, you can create a custom website that reflects your brand’s unique style.
You can create split-section layouts without coding.
The group select feature allows you to select, move, or delete multiple blocks simultaneously.
You don’t need custom CSS to add background colours to blocks. It is possible with a tick of the box.
And the best part?
You don’t need to tweak individual page elements to specific sizes and locations.
The Fluid Engine makes everything flexible and easy to adjust on different devices.
SEO Optimisation
The Fluid Engine isn’t just about aesthetics. It also offers robust SEO optimisation, ensuring that your website is built to perform well in search engine rankings. With optimised code and lightning-fast loading times, you’ll be able to reach more people and get more visibility for your site.
Analytics Tools
Lastly, the Fluid Engine includes detailed analytics tools to help you track your website’s performance. And with a Squarespace SEO plugin, you can further monitor and improve your site’s performance by making simple fixes to those pages that aren’t ranking on search engine results pages (SERPs).
If you’re a web professional wanting more control over your site’s design and performance, then the Fluid Engine is an excellent choice. You can create a top-notch website with its advanced design capabilities and unique features.
Fluid Engine vs. Classic Editor: What’s the Difference?
While the Classic Editor and Fluid Engine offer similar features, they differ in certain ways.
The following section highlights the peculiar differences between the two Squarespace website editors:
1. Block Placement and Editing
One of the main differences is the level of flexibility in placing and editing blocks. In Fluid Engine,
You can click and drag blocks to place them anywhere in the section, even overlapping other blocks.
You can duplicate and resize one or more blocks simultaneously, copy and paste blocks to other sections, and have grid lines enabled to guide your layout.
On the other hand, in Classic Editor,
The block placement is restricted to a fixed click-and-drag grid where you can only place blocks alongside other blocks.
It’s not possible to overlap blocks or duplicate them. Instead, you can only duplicate pages, posts, or sections.
2. Mobile Layout Design
In Fluid Engine, you can design your mobile layout to be different from your desktop layout. However, in Classic Editor, the mobile layout is set based on the desktop layout, and editing them independently is impossible.
3. Available Blocks
Another difference is that all blocks, except for spacer blocks, are available in Fluid Engine, whereas in Classic Editor, shape blocks are absent and are limited strictly to Fluid Engine. The spacer blocks aren’t necessary for Fluid Engine since you can create space by selecting and moving blocks to new positions.
4. Image Block Features
Image blocks lack built-in layouts in Fluid Engine, but you can design even more complex layouts using text blocks, block backgrounds, and image blocks. In Classic Editor, however, some blocks have cropping handles to adjust the content within the block.
How to Upgrade to Fluid Engine on Squarespace
Do you want to upgrade your site with the Fluid Engine?
You can do so in a simple, two-step process.
Confirm your Squarespace version.
Update classic blocks and sections.
Step #1. Confirm your Squarespace version.
Check to see what version your Squarespace site is running on. Fluid Engine is unavailable on Squarespace 7.0, so you must switch to version 7.1 to upgrade to Squarespace Fluid Engine.
To check your Squarespace version, navigate to “Help” from your dashboard and scroll to the bottom of the page.
If you’re not on version 7.1, upgrade your site to start using Fluid Engine.
Step #2. Update classic blocks and sections.
If your site had block sections live before Fluid Engine’s release, you can upgrade them by the following steps:
Click “EDIT” on the page.
Select “UPGRADE” in the top-left corner of any Classic Editor section.
This will convert the Classic Editor section to a Fluid Engine section.
Due to the differences between the Classic Editor and Fluid Engine, your layout may change slightly, or blocks may become misaligned when upgrading.
If you’re unsure about using Fluid Engine with a section, duplicate the section before upgrading, just in case. This way, you can always revert to the Classic Editor if needed.
Note: Once you upgrade a section to Fluid Engine, it’s not possible to revert it to the Classic Editor after saving without disabling Fluid Engine. So, make sure you’re happy with the changes before saving.
How to Use Squarespace Fluid Engine to Edit Your Site
Fluid Engine is a potent tool for easily tweaking your website. Squarespace version 7.1 users can start using Fluid Engine immediately by introducing a layout page, editing your footer, or including a block section to a pre-existing page.
The following customisation strategies can help to improve your site’s overall look, feel, and performance using Squarespace Fluid Engine.
Adding a Fluid Engine Section
To add a Fluid Engine section, follow these steps;
Click “EDIT” on the page you want to edit.
Next, click “ADD SECTION.”
Then, select either a pre-built section or an empty Fluid Engine section by clicking “Add a blank section.”
You can adjust the section’s grid height by selecting and moving the blue arrow icon in the bottom-right spot, but each Fluid Engine section is limited to 1,000 rows.
Adding Blocks
Squarespace Fluid Engine allows you to add or duplicate blocks by clicking and dragging. You can also overlap blocks on Squarespace Fluid Engine.
Here’s how to do it.
Click “EDIT” on the page to add blocks to your Fluid Engine section.
Click “+ ADD BLOCK” in the top-left corner.
Select the block you want to add.
You can copy and paste blocks between Fluid Engine sections and move and resize them by clicking and dragging.
Styling Fluid Engine Sections
To style your Squarespace Fluid Engine sections without any hassle, proceed with these steps;
Click “EDIT” on the page and hover over the section you want to style.
Click “EDIT SECTION” in the top-right corner, or click the section background if the default option doesn’t appear.
In the “Format” tab, you can make style changes to the spacing and padding of the section, change the background settings, and select the section’s colour theme.
Mobile Layout
In Fluid Engine sections, mobile layouts show the same content. However, you can arrange the mobile layout and resize its blocks differently from the desktop layout.
To set your section’s mobile layout, follow the below steps:
Click “EDIT” on the page, then click the “mobile view icon” in the top-right corner.
Arrange and resize your blocks as desired. Hover over the block and select the up arrow (↑) or down arrow (↓) to automatically move a block above or below an adjacent block.
How to Disable Fluid Engine on Squarespace
Fluid Engine offers more flexibility and customisation options for creating page layouts. However, there may be times when you want to disable Squarespace Fluid Engine and switch to the Classic Editor.
Here’s how to do it:
Navigate to the page you want to edit.
Click on “ADD SECTION.”
Scroll down to find Classic Editor Sections.
Select a Classic Editor section.
Customise the Classic Editor section.
Save the changes.
Step 1: Navigate to the page you want to edit.
To disable Fluid Engine on Squarespace for a specific section, head to the page where that section is located.
Click on the page you want to edit from the “Pages” menu and select the “EDIT” button.
Step 2: Click on “ADD SECTION.”
While editing the page, click “ADD SECTION” to introduce a new section.
Step 3: Scroll down to find Classic Editor Sections.
Look through the list of section types until you see the message:
“The above sections use the new Fluid Engine editor. Looking for sections built with our Classic Editor?”
Click on the link provided in this message.
Step 4: Select a Classic Editor section.
From the list of Classic Editor sections, select the section type you want to use. You can choose from any of the sections provided in the list.
Step 5: Customise the Classic Editor section.
Once you’ve added a Classic Editor section to your page, you can customise it using the Classic Editor tools. You can add content, adjust the layout, and tweak the style as desired.
Step 6: Save the Changes
Once you’ve made the desired changes to your Classic Editor section, click “SAVE” to confirm your changes.
Note: It’s important to note that this process only applies to individual sections, not the entire website.
Frequently Asked Questions
What is the Squarespace Fluid Engine?
The Squarespace Fluid Engine is a design feature within Squarespace that allows website creators to create dynamic, flexible layouts for their pages. With Fluid Engine, website sections can expand and contract to fit any screen size, creating a more seamless and responsive user experience. This feature is handy for websites accessed on multiple devices, such as smartphones, tablets, and desktop computers.
Is the Fluid Engine in Squarespace good?
Yes, the Squarespace Fluid Engine is good. It provides a smooth and responsive design experience, allowing for easy customisation of templates and layouts. However, the suitability of the Fluid Engine for your website depends on your needs and preferences.
How do I enable Fluid Engine in Squarespace?
To enable Fluid Engine in Squarespace, you can add a new blank or pre-built Fluid Engine section to your site. Another way is to convert an existing section to Fluid Engine by clicking the “UPGRADE” button that appears when hovering over it.
Wrapping It Up
Squarespace Fluid Engine is an excellent addition to Squarespace’s suite of tools. The new drag-and-drop website editor enables you to create dynamic and engaging websites to showcase content in the most visually appealing way.
However, evaluating whether you need the features Fluid Engine offers is essential. If it isn’t the best fit for your website, you can easily disable it and switch to the Classic Editor.
Ultimately, Squarespace Fluid Engine is an influential tool when building or upgrading your websites. And if you need help with designing your site, contact me or check out my Squarespace website design toolkit on what tools you need to perform DIY design tasks.
📩 Join the inner circle to get exclusive code updates
Your designer
I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.