The Best Features of Fluid Engine - The Newest Squarespace Editor
It’s that time again when we all get to dive into a new set of tools on one of our favourite website design platforms!
Fluid Engine in Squarespace 7.1 brings a fresh dose of creative freedom that we’ve never had the opportunity to explore until now. With the new Fluid Engine editor, the design space is more flexible, customizable, and easy to use than ever before.
To help you get familiar and get started, here is our guide to The Best Features of Fluid Engine - The Newest Squarespace Editor.
What is Fluid Engine?
Fluid Engine is the newest editor experience available in Squarespace Version 7.1
Many of us will be familiar with the Classic Editor which uses a 12-column system to help keep design elements tidy on every page. With Fluid Engine, the layout has been broken down into a new grid-based system which allows for 24 columns of drag-&-drop freedom in your design!
We are so excited about all the ways these new features will help to elevate any Squarespace website to a truly unique and beautiful experience for the user.
What are the Most Exciting New Features?
Fluid Engine comes with a collection of incredible updates that will make your design process simpler and more straightforward. We’ve outlined a few of our favorites below:
Drag & Drop & Bulk Editing
We are all about offering solutions to website design that allow for customization without the use of code. Now, we all have the freedom to play with our designs right in the editor with a simple drag & drop. To move an element somewhere new on the page, simply select it and drag it around!
We can also select multiple elements and move them all together, keeping the proportions and relationship between them the same. This includes resizing blocks too! To change the size, just click on the corner and drag it to whatever size you’d like. Such a time saver!
Pro Tip: To make the grid appear, press “G” on your keyboard. When you’re done, press “G” again to hide it.
Layered Images
One of the biggest changes in Fluid Engine is the ability to layer images over one another to create stunning collages with ease. Previously only available through CSS coding, this is an amazing feature that allows us to design beautiful eye-catching elements to showcase images to clients without a drop of coding knowledge!
Pro Tip: To play with the order of each layer, select the image & move it forward or back in the layers until it’s just perfect.
Add a Background Color to Blocks
The new addition of layers opens up the ability to place text over pretty much anything on your page. We love this feature even more with the new background functionality which will keep your text legible no matter where you place it.
Pro Tip: Play around with the background color options in your Site Styles.
Style Individual Sections
This is one of the simplest and most helpful features we cannot get enough of. To change the style of an entire section, simply select it and have a look through the new options.
Head into format to change the height, alignment, & layout.
Select Background to customize the colour, image, video, or artwork of your section.
Click over to colors and you can flip though a variety of style options to complement the content perfectly.
The best part? The changes made to this section won’t affect the style settings anywhere else on the page!
New Block & Section Spacing Options
Fluid Engine has come with one particular update that has us extra excited: Independent Sections. No more spacer blocks or finicky automatic changes when you update something else on your page. Within each section, a perfectly spaced grid is the only guide and any changes made within it will have no effect on anything else on your page!
The new editor has also introduced FIT and FILL options for blocks and images. If you’d like to fill out a whole block with your image, select FILL and the image will automatically fill the block area. Alternatively, if you’d like to resize your image to fit inside your block and maintain its aspect ratio, you can select FIT and it will click perfectly into place.
Independent Mobile Editor
Squarespace is known for its beautifully optimized mobile sites that basically build themselves based on your desktop template. We love this feature and now with Fluid Engine, you can customize the look of your mobile site without it having any effect on your desktop version!
One thing to note that we aren’t so in love with: All the blocks on your website will now show in the mobile version in the order they were added to each section. We’d definitely suggest having a look through your mobile site to ensure everything is where you want it. We’ve heard that Squarespace is aware of this little nuance and is working to offer a more intuitive top-down approach to the blocks in the future.
How Do I Start Using Fluid Engine?
> If You’re Using Squarespace Version 7.1
Fluid Engine should already be active and any new sections or pages you create will have the features readily available to you. You can check if your website is running the new editor already by selecting a few sections and looking for the Grid Layout.
If you don’t see a Grid, you may need to update your existing sections or pages by following the guide below:
Head to the Squarespace Editor and in the home menu, click Pages.
Select the page you’d like to update and click Edit
Add a Section
Mouse over the new section and click Upgrade.
Once you’ve gone through these steps, the Grid Layout should appear along with all the other new exciting features available to you!
If you don't see the Update option, Fluid Engine is already awaiting you.
> If You’re Using Squarespace 7.0
Unfortunately, the new Fluid Engine Editor is not available for websites built in Version 7.0. If you’d like to take advantage of the new features, now is the perfect time for an update to your website in the new editor!
Looking for some help? Let’s Work Together! We are here to help you design a website that you are PROUD to show off.
A few important things to note:
Updating to Fluid Engine is IRREVERSIBLE. Consider making a copy of your website and playing around with the update before converting your existing sections to the new editor.
Only websites created from July 2022 onwards will have Fluid Engine enabled automatically.
Fluid Engine will eventually become the standard. While we can’t speak as to when, the new editor will eventually phase out the previous version. We’d highly recommend exploring the new editor and getting comfortable with it.
Not all blocks and sections are compatible with Fluid Engine yet. You’ll still see the Classic Editor options for some features including Blog Posts, Event Descriptions, & Product Additional Information.
Are Your Custom Templates Optimized for Fluid Engine?
Absolutely! All of our Squarespace Templates have been designed to work seamlessly with Fluid Engine in 7.1 and we are including a Full Video Walkthrough and Tutorial on Fluid Engine with all of our template purchases!
You’ll be set up with a stunning design, easy setup, & full support to help you create your dream website.
Ready to get started? Discover our Beautiful, Custom Squarespace Templates.
We are so excited about these new features and we can’t wait to see the incredible designs that will now be possible with this new creative freedom!
Did you enjoy this blog post? Consider following us on Instagram @OpalCreativeCo for more content like this.
