Why Your Website Needs Squarespace's Fluid Engine
Remember when building a website was like fitting fixed puzzle pieces?
Back before their update, Squarespace's Classic Editor was reliable but limited, as you could only stack blocks in a straight line, and creating a unique design often needed custom code.
Everything changed with Squarespace’s Fluid Engine. It wasn’t just an update, it’s a whole new way to design and build your site. Fluid Engine is a powerful, grid-based drag-and-drop editor that gives you way more creative control.
What this means for clients
You run a business, so you won’t necessarily have time to learn web design. Fluid Engine lets an expert build a custom website for you quickly and simply, without tricky tools.
Bespoke design? No problem: We can create a website that suits your brand perfectly. By adding text over images, overlapping design parts, and placing content exactly right, your site will be unique. This helps us build a smart design that shares your brand’s story clearly and turns visitors into customers.
Looking perfect on every device: The worst part of the old system was not being able to control how your site looked on mobile. With Fluid Engine, we can create a mobile layout that's different from the desktop one. This makes sure your site looks great and works well on mobile, which is important since more than half of web traffic comes from mobile devices.
An easier experience for you: Fluid Engine helps you create detailed designs and manage them easily. Once your layout is ready, you can update content quickly without messing up the design. It’s a powerful tool with an easy-to-use dashboard, avoiding those unnecessary headaches and giving you that peace of mind.
So what is Fluid Engine?
If you enjoy building your website yourself, Fluid Engine has everything you need to get stuck in and play around to see what works best for you. Here are some key features you should know:
The 24-column grid: The new grid has 24 columns on desktop and 8 on mobile, letting you place elements precisely. Press G in the editor to see the grid and position blocks easily.
Independent mobile editing: This is arguably the biggest win when looking at all the new features. Once you design your desktop layout, you can switch to mobile view and move, resize, or hide parts without changing the desktop version. This helps make your site fast, neat, and easy to use on phones.
Overlapping & layering: Previously impossible, you can now layer text on top of images, or place images over other design elements. This allows for rich, modern, magazine-style layouts. Just be mindful of how your design translates to smaller screens.
New design controls: Text and image blocks now have new design settings. You can add a background colour to a text block for emphasis or use "Fit" and "Fill" settings for images to control how they display within their container.
Tips to Master Fluid Engine
Even with more flexibility, here’s a few good habits that can really help:
Don't forget the mobile view: This is non-negotiable. Always check your mobile layout and make adjustments. The freedom to design separately means you have to take the time to do so.
Tidy up your containers: Dragging and dropping can leave extra space around blocks. Always click each block and drag its edges to resize. This keeps your design neat and avoids overlap on different screens.
Use the "Fill Screen" setting: To create bold, full-height sections, turn on "Fill Screen" in the section settings. This makes the section fill the entire browser height, ideal for a striking hero or full-screen image.
So what next?
Squarespace's Fluid Engine shows Squarespace’s dedication to helping users. It offers tools to create more dynamic and personalised websites. For DIY builders, it’s a creative space to try new ideas. Want a great-looking website that helps grow your business? A professional web designer can create the perfect, high-performing Squarespace site for you.
