BIGGEST Squarespace Update: Fluid Engine
Image Source: Squarespace
Squarespace was created to be a creative space that made a revolutionary impact on hosting and website building within the American marketplace. These days, the company continues to innovate and push the envelope to allow website owners to produce viable content faster and more efficiently. Fluid Engine is one of their latest and largest creations. It was crafted with the purpose of allowing website owners a much faster, more efficient way to create their content.
Fluid Engine is an Engine Used by the Unreal Engine 3 Engine
When it comes to Fluid Engine, it uses a number of different engines to run the engine. However, it is not available for:
Block areas that don't use page sections, like blog posts, event descriptions, and additional product information.
Sites that were launched in a language other than English. This is true even if the site is later translated into English.
Version 7.0 sites
Table of Contents in Detail Hide
How Do You Turn on Fluid Engine?
One of the top benefits of using Fluid Engine is that it allows content creators more flexibility in terms of block placement, resizing, and overlapping. This creates new possibilities by allowing them to reimagine how they design and use their Squarespace website.
Several steps must be taken when it comes to turning on Fluid Engine. They are as follows:
Compatibility: The first step of the process is to make sure you’re using Fluid Engine. This is because this new editing experience is only available for page sections that use blocks. This means it is only supported on version 7.1 sites in the block sections on any page and portfolio sub-pages and footers.
Identify Fluid Engine Sections: Fluid Engine is not available in every section of your website. Instead, sections such as 'additional product information,' 'event descriptions,' and others will likely not be compatible with Fluid Engine. Therefore, you may want to take the time to hover over each area to see which areas are compatible with Fluid Engine. (More details in next step.)
Click Edit: In order to begin the editing process, you must click ‘edit’ in any of the mentioned sections. From there, you will notice that Fluid Engine sections have an ‘add block’ button, which enables you to click and drag a block in order to edit the sections.
How Do I Add a Fluid Engine Section?
Image Source: Squarespace
Adding a new Fluid Engine section to your website is simple. All you need to do is:
Edit: Start by clicking ‘edit’ on the page.
Add a Section: From there, you will click the 'add section.’ After that, you will need to click ‘add blank +’ to add a blank Fluid Engine section. Alternatively, you can simply click a category to find pre-built segments. Also, if a section has an ‘I’ icon in the top-right corner, it’s an auto layout that is incompatible with Fluid Engine.
Make Adjustments: Lastly, you will want to make the proper adjustments to ensure the sections are created to your liking. To do so, you simply choose whether you wish to increase or decrease the grid height for each section. This process is easy. Simply click and drag the blue arrow icon in the bottom-right corner. Also, the more placement blocks used, the less you will be able to adjust the height of each grid section to your liking.
Add a Block in Fluid Engine
If you need help adding blocks, simply complete the following steps:
First, click the ‘edit’ button.
Then, click Add Block in the top-left corner.
Choose the block you want to add. If you are not familiar with the various types of blocks, visit Adding content with blocks for more information.
Once the blocks have been added, you can move and resize them by clicking and dragging them. This makes it possible to build unique and creative layouts. You can also place blocks alongside each other or even allow them to overlap. Lastly, simply focus your attention on the mobile site. To do so, edit the section's mobile layout to arrange how it will appear on mobile devices.
Focus on adding a block background color. This is imperative when creating lots of blocks that overlap. Add a block background color to ensure the text is legible.
Fit or Fill Fluid Engine Blocks
In order to properly set the padding between image blocks and button blocks with Fluid Engine you’ll need to set them to fit or fill.
Filled Blocks: When blocks are set to fill, the image or button takes up the entire block space. This means the borders of the image or button will be flush with adjacent blocks.
Fit Blocks: When blocks are set to block, the extra space surrounds the image or button.
To set image or button blocks to fit or fill:
Click a block or image button, click the pencil icon, then click the Design tab.
Click Fit or Fill. The difference between the two is; Image blocks are set to fit by default, while button blocks are set to fill.
When choosing Fit, the alignment options will appear below or in the toolbar.
When you are finished making changes, hover over Done and click Save.
Fluid Engine Editor
There are all sorts of tweaks that can be made to your Fluid Engine sections. For instance, you can add or change the colors being used. It is also possible to change the background. Once you’ve created a block, you can simply start writing.
You can also adjust the text to align to the box's left, right or center. This is an excellent feature for those who are knowledgeable about text placement and how and why certain text groups are more enticing than others. You can even scale the text up or down, make the text as big or small as you'd like, add buttons, and much more.
Either way, there are lots of functions and features that can be personalized when you are using Fluid Engine. How you use them is totally up to you and your personal preferences for your website.
Here are some best practices to help you optimize Fluid Engine:
Overlapping Blocks: Making your blocks overlap can be a great style choice that makes your website more engaging and enticing to users. Nevertheless, when making blocks overlap, you need to take the time to ensure the content in each block is still visible and functioning for users. For instance, if you are adding blocks that need to be filled out by users, it may be best not to overlap those with others. Doing so could destroy the functionality of the block and frustrate/deter users.
Readability: Moreover, focusing on design over general readability is also a common mistake made by web designers of all skill levels. This is because the content may still be fully visible while editing but may partially disappear once you have completed the process and saved the changes. Therefore, if you're placing text over other kinds of content, take the time to ensure that the text will remain legible. It is highly possible to add an opaque picture, which could cover up parts of the content once you are finished. Likewise, you could also use the wrong color scheme for the block and text, which can make it next to impossible for anyone to read.
Limiting Your Number of Blocks: Lastly, although there's no hard limit for the number of blocks you can add to a section or page, we strongly recommend adding no more than 60 blocks per page. Failing to heed this recommendation can result in a page being overloaded with content, which can cause your site to lag or load much slower than usual. This is especially the case when dealing with mobile browsers. Generally speaking, traditional browsers can hold far more blocks than mobile ones. Keep this in mind when designing your site, and make sure you check the overall functionality of each page before going live.
Mobile View in Fluid Engine
Image Source: Squarespace
Trying mobile view is an essential part of the process. This is because the majority of companies these days get the bulk of their leads and business via mobile sites and apps. When trying Fluid Engine in mobile view, switch to 'mobile view,' which will show you how the text and section appear on mobile devices of all kinds. This is a fantastic feature to have because most web designers use mobile view to make the final decision in terms of how the website will be designed.
When viewing on mobile, you may decide to add or delete buttons, increase or decrease the size of the text, and more. However, you will need to return to the traditional view to make such edits. You can also make adjustments to make your mobile site different from the conventional view. For instance, since mobile websites are typically more interactive and often used by younger demographics, you can add pictures and graphics that make the website more engaging when using the mobile view.
However, web designers should be advised that although there are many new features, they should be careful not to overuse them. Too much overlapping and creating convoluted spaces can result in glitches, slow down site load times, and much more. Therefore, web designers must take the time to view the tweaks in both traditional and mobile views and make adjustments as needed. Also, remember that Fluid Engine is not available in all sections, so if you want to ensure that all pages are uniform, you may need to edit some parts using the traditional editor.
Style Fluid Engine Sections
To style Fluid Engine sections:
Click Edit on the page, then click Edit Section in the top-right corner of the section you want to style. You may have a block selected if the Edit Section doesn't appear. Next, click the section background to make the Edit Section appear.
In the Format tab, make style changes to the spacing and padding of the section. Again, trying out different settings to understand how they look and impact the site is a highly recommended practice. You can learn about your options below.
Click Background to change the background settings. To learn more, visit the following sections: Adding background videos, Section background images, and Section background art.
If you want to change the colors, click ‘Colors’ which will allow you to change the color theme of each section. To learn more, visit Changing colors.
Once you are done, hover over ‘Done’ in the top-left corner and click ‘Save.’
Format Options
To change style settings, visit the Format tab to adjust the following:
Row Count: Next, you can set the number of rows in the section's grid. Remember that the minimum number of rows depends on how many blocks you've added and their arrangement.
Gap: Set the space between units in the grid to control how much space there will be between blocks. You can choose no gap, a preset gap, or click on the three dots to set custom vertical and horizontal gaps.
Fill Screen: Enabling the fill screen setting provides increased control over the alignment and height of your content.[Text Wrapping Break]
Height: Add padding to your section outside the section grid. You can choose between small, medium, or large heights or click the three dots to set your own custom height.
Alignment: We advise users to set the alignment where the extra height padding appears.
The Limitations of Fluid Engine
Although Fluid Engine has lots of new features, bells, and whistles, it is by no means an infallible application. Instead, it does have some limitations to take note of. For instance, Fluid Engine is not compatible with every aspect of your website. So, for example, if you are building an eCommerce site, Fluid Engine will likely be unavailable when you edit areas such as product pages. Therefore, you would need to edit these areas using the traditional editor.
Generally speaking, this applies to any page that includes collections or any random group of pictures, products, descriptions, etc. This is very important to take note of when designing other pages. Although it’s entirely acceptable to only have certain features on certain pages, you definitely don’t want the pages edited by Fluid Engine to be too different from the others on your website.
Need More Help?
Still getting the hang of Fluid Engine? Launch Happy is here to help.
We have experts on hand ready to answer all your Fluid Engine and Squarespace questions to help you build the perfect site for your business.
We have free guides available and a weekly newsletter covering all tips Squarespace, web design and SEO related. If you’re a visual learner you might find our weekly tutorials useful., including our recent walk-through of Fluid Engine.
