Squarespace Circle

View Original

How to Prepare Your Clients for Fluid Engine

Squarespace is now powered by Fluid Engine, a content editing system that allows you to drag and drop elements anywhere on your version 7.1 website(s) with confidence. Fluid Engine offers total design control, with the highest level of customization and potential for creative expression in our platform's history.

As more users transition from our classic editor to Fluid Engine, your clients will likely have questions about how it will affect their website. Here’s everything you need to know to prepare them for Fluid Engine. 

What exactly is Fluid Engine?

Fluid Engine is our newest drag-and-drop editor that helps you intuitively position and resize blocks on a grid. This means you can easily add, move, and adjust site elements with simplified axis management on both desktop and mobile. Grid sections stack to create a site canvas, unlocking even more creative freedom via layout on any page, footer, and portfolio sub-page.

Fluid Engine takes things a step further and provides Squarespace users with: 

  1. Limitless Customization: Control every design detail until your site feels true to your vision.

  2. Exceptional Ease-of-use: Drag and drop content anywhere—and make changes whenever and however.

  3. Better Mobile Optimization: Enhance websites on mobile and design to fulfill your consumer experience vision.

Please note: 

  • New 7.1 users will only interact with Fluid Engine sections on websites with English as the selected language. 

  • Existing 7.1 users with English websites will be able to add new Fluid Engine sections or convert existing sections to Fluid Engine. Refer to our official Fluid Engine guide for a full list of sections that do not use Fluid Engine.

  • Existing 7.0 and older users will not be able to add new Fluid Engine Sections, and their site will remain as classic editor sections.

  • All non-English websites will continue to use the classic editor until Fluid Engine is available for these sites at a later date.

So, what’s changing? 

Fluid Engine improves the web design experience for you and your clients, making it possible to do more than you could with the classic editor in a fraction of the time without relying on custom code. New Fluid Engine capabilities let you:

  • Drag and drop elements anywhere on a responsive grid

  • Make mobile layout edits that don't reflect on desktop

  • Precisely move blocks without disrupting your layout

  • Resize content by simply dragging corner handles

  • Layer blocks and site elements

  • Select multiple blocks and move them as a group

  • Stretch content full-bleed, edge-to-edge

  • Fill background colors on text-heavy blocks for increased legibility 

  • Set images to fill their container or retain original dimensions

Keep in mind that some areas of your site will still use the classic editor, including blog posts, event descriptions, and product additional information. 

Adjusting to Fluid Engine 

There are a few things to keep in mind as you and your clients adjust to Fluid Engine. First, it helps to have a design eye for creatively spacing and aligning elements within a grid. The Squarespace Guide to Web Design Basics provides a general overview of web design best practices.

Second, it’s important to have an understanding of the future of mobile web design. Fluid Engine was created to adapt to the growing number of devices where people view and interact with websites, so it helps users visualize websites on various devices with grid and mobile views. You should frequently refer to mobile view and ensure that a website looks as it’s intended during the design process. 

Third, always feel free to consult Circle members and Community Leaders in the Circle Forum if you are a Circle member and have any questions or need ideas. More than 500 Circle members participated in the Fluid Engine Beta and have a great sense of how to use the platform. 

Here are more best practices to implement while using Fluid Engine.

Fluid Engine in action

Check out the recording from our Fluid Engine 101 webinar to view the Fluid Engine experience on 7.1 websites. Skip to 10:40 for a demo of the new editor in action.

Record your own demo

It’s a good idea to create your own demo of Fluid Engine to share with clients after it’s available to all Squarespace users later this year. In addition to showing your expertise and leadership, a demo is a piece of content that adds value to your service offering as a designer. Plus, you’ll learn faster by teaching!

To create a demo, screen record yourself going through the process of redesigning a site and send it to your clients. Check out instructions for recording your screen for Mac and Windows devices. As an alternative, you can also invite clients to a webinar where you redesign a site live. If you're not into making videos, you can write a blog tutorial or send an email tutorial through Email Campaigns

Looking for inspiration? Enjoy an existing portfolio of websites that have been designed with Fluid Engine. (At this time, this page is only accessible to Circle members.) 

How to discuss Fluid Engine with your clients

Now that you understand the benefits of Fluid Engine, it’s time to share this exciting update with your clients! Here are some common questions from clients and quick responses.

What is Fluid Engine?

Fluid Engine is Squarespace’s brand new editing experience. It operates as a drag-and-drop editor, meaning that users can simply drag elements to desired places on their website, giving designers like me more control to fulfill your creative vision.

Does it cost any money?

Fluid Engine is free and automatically rolling out to new version 7.1 websites on Squarespace

What are the benefits?

There are many benefits to Fluid Engine. For starters, it’s easier to use than Squarespace’s classic editor. A grid appears in the background of the page to help with placement. Users can build unique and creative layouts by moving blocks and arranging them in a section, placing blocks side-by-side or overlapping them. 

As an added bonus, mobile layouts display the same as computer content in Fluid Engine. You also have the option to arrange the mobile layout and resize blocks independently of the computer layout for a better digital customer experience.

How do I use it?

Fluid Engine has been designed with all types of users in mind. This guide breaks down all the ways to use the new editor, and I am also here to answer any questions you may have.

You can use this email template to inform your clients that Fluid Engine is officially here and explain why this change was made.

Subject: A new and improved web design experience

Hi [Client name],

An exciting update is coming to Squarespace! The long-awaited drag-and-drop editor is here, and I wanted to break down everything you need to know about Fluid Engine, Squarespace’s new editing experience.

Fluid Engine is designed to make Squarespace easier to use and more adaptable to the changing ways your customers interact with your website. It offers much more control than Squarespace’s classic editor, as users can now move blocks around freely, adjust section settings, and create more visually appealing and impactful designs in less time than ever before. 

Ultimately, Fluid Engine is made to fortify your online presence, boosting your website’s credibility and engagement while simplifying upkeep. You’ll be able to easily hop into the design dashboard and make changes to your website as needed. 

To help you adjust to the new editor, I’ve recorded a demo for you. If you need more information, feel free to book time with me so I can walk you through these changes.  

In the meantime, let me know if you have any questions regarding Fluid Engine – I’m happy to assist during this transition, and I look forward to creating something great for you!

Talk soon!

[Your signature]


Want more?

Check out Squarespace Circle, Squarespace’s program for professional designers. Along with exclusive content, discounts, and other perks, Circle brings professionals together from all across the globe to exchange advice while connecting with new clients and collaborators.