Squarespace 7.1 fluid engine Editor (detailed guide)

Goodbye, restrictive designs; welcome limitless customization options! If you are yet to hear, Squarespace has recently launched its Fluid engine, which allows you to customize your website and drag elements to wherever you want them to be! You can now use your favorite website builder without worrying about customization restrictions. That is a point lost by other website builders who claim to offer unrestricted customization options because Squarespace Fluid Engine isn't here to joke.

If you are wondering what the buzz about this new fluid engine editor is about and its capabilities in coming up with stunning designs, this article is for you!

We've covered everything you need to know about the fluid engine, its capability, and how to harness its feature to create the design you want on your Squarespace site. Without further ado, let's get started!

Check out these Squarespace templates if you want to speed up your website design process.

What is the Squarespace Fluid Engine Editor?

Originally, Squarespace came with a classic editor on version 7.0 and 7.1 that allowed you to design and customize your website based on professional standards. In other words, there was some restrictive customization you could not achieve without the need for code (and sometimes, no amount of code will help you). Some customizations, such as mobile view design, bulk block editing, and flexible grid systems, were unavailable.

So, in one word, Fluid Engine gives you more control over the designs and customization of your website, which is perfect for small business owners, DIY or professional designers, and developers!

Note: The new Fluid Engine Editor is currently unavailable on Squarespace 7.0 sites. You'll need a 7.1 website to experience these new editing features.

Fluid Engine Features To Get Accustomed To

Mobile View Editing Experience

One of the most prominent features the new fluid engine editor boasts of is its mobile design capabilities. Although the Squarespace website is fully responsive, and every template automatically comes with a mobile version and adapts to the viewing screen, there are times that a few elements may look weird or out of place because of the resizing. Now, the Fluid engine allows you to design a desktop version and a mobile view. In other words, you can customize your website using the Fluid engine mobile view, resize elements and make necessary adjustments.

If you are unsatisfied with how a heading or block looks on the mobile layout, you can easily switch the mobile editor and make changes. Also, the Fluid Engine section tells you to check out an element or block out in the mobile layout when designing by putting a blue dot on top of the mobile icon. It is just a way of telling you to confirm the mobile layout of the element or block you just placed.

Considering how other website builders, such as Wix, already have these features and have served as a selling point for them, the Fluid Engine editor has done a great job in giving every 7.1 users access to the mobile layout feature.

Grid System & Layout

Another feature you will get with the Fluid Engine editor is its new set of grid systems. If you are a web designer or developer, you'll agree that it can be a pain in the ass when you have to use code to place elements at specific parts of the screen. The new Squarespace fluid engine grid consists of a 24-column grid system which is a significant improvement compared to the 12-grid system that came with the classic editor. This improvement translates to the ability to drag elements to the edge of the screens without restrictions or customizations.

You can also adjust your elements based on the grid system, and all the changes stay the same on the desktop version. This feature alone makes designing super easy and customization more fun to deal with.

Overlapping Blocks & Elements

Overlapping blocks and elements is usually a pain in the ass on Squarespace's classic editor, and you'll have to use custom code to achieve that result. One of the biggest pet peeves I had when designing Squarespace websites is the issue of overlapping, but you and I wouldn't have to worry about this any longer because you can overlap elements in the Fluid engine section by simply dragging and dropping the elements. For instance, you can easily move a text block behind an image or vice versa. You can also overlay any element on your photos and tweak them to your satisfaction. Another thrilling news for web designers is that you can tweak the blending mode for your images, making designing easy, especially for graphic designers.

Concerning fitting images in the shape block, Fluid Engine has introduced a new fit and fill feature that allows you to fit an image into a shape without cropping it and align it to your satisfaction. You can also decide to fill the shape block.

That's not all; you can move multiple blocks simultaneously! This feature alone makes designing easy and faster.

Full Bleed Sections

Your images can now fill the image blocks without hassle, and you can also opt-in for a full bleed image section that goes across your screen. Thinking of this new Fluid Engine Editor has succeeded in drastically reducing the need for custom code. You don't need to rely on code or settle for less in your web design journey!

Selecting & Editing Multiple Elements

Unlike the classic editor, you can now select multiple elements, align them, or even group and delete them in the new editor. This feature makes duplicating and reusing elements on other pages' sections easy. So, rather than moving one element at a time, you can select all and move; life is easy!

Saved Sections

This is another favourite of mine because it makes designing super easy. If you have an already created Fluid engine sections you want to be able to use on another page within your website, all you need to do is to save the section. To do this, open your new fluid engine editor and select the section you want to reuse; you'll see a small heart icon. Click on the heart icon to save the section. Once you do that, go to the page you want to replicate the section and add a new section. Once you do that, click saved sections and select the section that you've already saved. There you go! You've successfully replicated the section on the new page.

This feature is cool because it can serve as a way to save templates and layouts for your website, especially if you are a web designer who works on a lot of clients' projects. Also, it will save you the stress of designing from scratch.

Bye, Bye Spacer Blocks!

Unlike the classic editor section, where you need to add a spacer block to separate elements and sections, the fluid engine gives you a chance to drag and drop elements anywhere, so you can decide the amount of space you want to give to the previous block or section by just dragging the element below it! So, you don't have to add spacer blocks to provide extra space to your designs.

There are more features that Squarespace's Fluid Engine comes with that have not been covered in this article. However, it is essential to note that if you open a new Squarespace website, you automatically get the fluid engine. Still, you'll need to upgrade from the classic editor to the Fluid engine editor if you already have an existing site.

Note: Some sections still use the classic editor to avoid unnecessary misalignment and designs. these existing classic editor sections are

• Event descriptions

• Blog posts

• Product Additional information

• Block sections were added before the Fluid engine

Apart from these sections, you have the power to edit any block or section using the fluid engine editor.

related article: 25 Best Squarespace Templates For Virtual Assistants

Pros & Cons of the Fluid Engine Editor

Although we've listed all the beautiful features that come with the Fluid Engine editor, it won't be complete if there is no comprehensive comparison between its Pros & Cons. So, if you are still wondering about the benefits of these features, and the cons to look out for, then we are ready to supply you with that information.

Pros of Squarespace Fluid Engine Editor

• Easy Drag and Drop Experience: 

  Fluid engine-enabled customization experience makes drag and drop super easy. Fixed spaces no longer restrict you; you can drag your elements to any part of the page.

• More Customization options: 

  As a Squarespace web designer, the fluid engine has made it easy to work on clients' websites and develop more stunning sites. You are no longer restricted on what you can do on most parts of your websites. You can add full-bleed images, text backgrounds, saved sections, and more.

• Mobile Site Edit: 

  Although all Squarespace templates are mobile responsive, some elements may look out of place. You have the autonomy to design a customized mobile experience for your viewers. You can switch the positions of elements, resize them and add necessary edits. This feature alone ensures that your website is good-looking on any screen size.

• Lesser need for Custom Code: 

  Another great pro of the Fluid Engine is that you don't have to worry about adding custom code to achieve some effects. This is a relief for those with no technical background who don't want to waste time scavenging the internet for code lines.

related article: Squarespace Email Marketing: Is It A Fit For Your Business?

Cons of Squarespace Fluid Engine Editor

• More time spent designing a website:

  Some users have complained of having too many options to work with, increasing the design time. If you are a DIY designer, it is better to stick to a template and swap content rather than design from scratch because you can be overwhelmed by the many options.

• New Learning Curve:

  Another con of the fluid engine is that you'll have to get accustomed to its features and design process, especially if you are used to the classic editor. However, Squarespace comes with many guides to help you along the way.

• No Tablet View:

  Another con is that it doesn't have a tablet view. While I won't say that is much of a con, and I believe the Squarespace team is still perfecting the Fluid engine, it takes a point away.

related article: How To Set Up Donations On Squarespace

How To Use The Fluid Engine Editor

If you are already used to the classic editor, you will be able to get the hang of things easily. The Fluid engine editor works similarly to the classic editor, but if you are new to Squarespace, then you should check out how to build a website on Squarespace.

Adding Blocks & Sections

Adding sections with the Fluid Engine editor is similar to the classic editor. The first thing to do is click on Edit and hover over the page; you will see Add block. Select Add a block, and you can create any type of block you'd like to add.

Repeat the same process if you want to add sections. You'll see Add section, click on it, and you can decide to add a blank section or choose from the categories.

Editing Grid layout

You can increase your grid's row count and the gap, alignment and viewport. The first thing you should do is to hover over a section and click Edit Section; a small menu will pop up; go under the Grid tab, and you can edit your grid system for the section.

Note: Grids appear for individual editable sections, not the whole page.

Aligning & Moving Blocks

The fluid engine comes with alignment options for your blocks. Once you've created your block, a block toolbar will appear, and you'll be greeted with various customization options. You can align the block anywhere on the screen by dragging it with respect to the grid line.

However, you can move a particular block forward or backward when you overlap blocks. In a text or image block, you get options to align in the center, left, right, bottom, and top of the section.

To move multiple blocks or elements, all you need is to click on the screen and drag through the blocks you want to move. You are going to see a blue square encompassing all the elements you've dragged through. Once the blue box appears, you can select the block groups and move to any part of your screen. Also, you can delete the block by clicking on the red trash icon.

related article: Squarespace Member Area: Step-By-Step Guide To Set Up Your Squarespace Membership Site

Upgrading To Fluid Engine

If you want to upgrade a section to fluid engine, hover over the section, and you will see Upgrade. Select Upgrade, and the section will be automatically upgraded. However, you should put in mind that you cannot change an upgraded section back to the classic editor section. If you are unsure about your preferences, duplicate the block before upgrading to the fluid engine section.

related article: Podcasting With Squarespace: The Ultimate Guide

Tips For Mobile Design on Fluid Engine

To edit your mobile view on the Fluid engine, first, edit a page and click on the mobile icon at the top right corner of the screen. You will automatically start viewing your website in the mobile version. Put in mind that the mobile editor is the same as the desktop editor; it is just the screen size that is different so that you can edit normally without hassle.

• Stay within the grid: The first tip to consider when designing the mobile view is to avoid extending text and images beyond the grid. It will mess up the text and make it hard to read. Also, ensure that the fonts you use for the website are legible and not so condensed that they will lose their sharpness in the mobile view.

• Avoid overlapping text and button blocks: Another tip to remember is to give enough whitespace for your text blocks and buttons. when they are too close, they can look messy and misaligned.

• If needed, extend the grid: The fluid engine allows you to extend the grid system if it isn't giving you enough space to work with. So, extend your grid instead of extending the blocks beyond the grid system.

• Crosscheck your website on a mobile device: I give DIY designers a friendly tip to check their desktop and mobile view on a mobile device and then readjust if necessary.n Do not start sharing your website's link or make it public to your audience until you are sure both views are correctly aligned and oriented.

• Update sections on both desktop and mobile view before duplicating: If you are interested in duplicating and reusing sections, ensure that the mobile and desktop view is satisfactory before reusing them on other pages. Doing that will eliminate the stress of editing the layout one after the other.

• Add blocks in the order you want them to appear on the mobile view: To avoid unnecessary stress, ensure you add the blocks, elements and sections on your desktop view in the order you want them to appear on mobile. The best way to do this is to have a rough layout for your website and know the sequence of how you want to add each block and section.

• Keep it simple: The final tip is to keep your design simple and aesthetically pleasing. Avoid overlapping too many blocks or ad too many video backgrounds. This can lead to a slower loading speed and a clumsy mobile look. Therefore, ensure you allow enough white space between each element, and take into consideration your website's loading speed.

related article: 37 Squarespace Website Design Tips: Elevate Your Online Presence

It's A Wrap!

Finally, we've come to the end of this article. The Squarespace fluid engine is a great addition that will significantly benefit your website if you get the hang of it. While it can be hard to move from the classic editor you are already accustomed to, it is worthwhile. My suggestion is to duplicate your pages and sections and try the fluid engine out before finally upgrading your editor. If you love it, you can upgrade because there is no turning back once you upgrade to the Squarespace fluid engine editor.

Another way to do this is to create a demo site and design it away. Demo sites allow you to get your hands dirty and decide if the new editor is for you. Regardless, Squarespace really did a great job, and it is worth the shot.

related article: Squarespace Video: Ways To Use Video On Your Website

FAQs

Is Squarespace Fluid Engine Good?

Yes! It comes with many new features that give you limitless customization options. You can now drag and drop elements anywhere on your screen without being restricted, edit your mobile view, and add background images and videos. However, the Fluid engine may not be the preference of everyone since it is relatively new and most old Squarespace users are used to the classic editor.

How Do I Turn on the Fluid Engine?

Edit a page on Squarespace, and hover over a section. You will see an Upgrade option. Select the option, and you can now edit on the fluid engine. However, the fluid engine editor doesn't operate on some pages, such as event descriptions and blog posts.

Which one is better, the classic editor or the fluid engine?

The first thing to remember is that the Flud engine and classic editor work the same way. The only difference is that the fluid engine comes with more customization options and gives you more control over your site. You can drag and drop elements anywhere and edit your mobile view. So, based on features, the fluid engine offers more promising customization. However, if you are already used to the classic editor, you can stick with it and test the fluid engine by either creating a demo site or duplicating your pages.

related article: Squarespace Forms: Create, Edit, And Customize Them