We're introducing a new editing experience on version 7.1 sites called Fluid Engine. Fluid Engine is the content editor for page sections that use blocks.
With Fluid Engine, you'll have more flexibility and options for block placement, resizing, and overlap, opening up new possibilities for creative layouts never possible before in Squarespace.
Fluid Engine is available for all areas that use page sections on English 7.1 sites. Fluid Engine isn't currently supported on:
- Block areas that don't use page sections, like blog posts, event descriptions, and product additional information
- Sites started in a language other than English, even if the site language is changed to English
- Version 7.0 sites
Watch a video
Am I using Fluid Engine?
Fluid Engine is the new editing experience for page sections that use blocks. It's supported on version 7.1 sites in:
- Block sections on any page
- Footers
- Portfolio sub-pages
When you click Edit on the page, Fluid Engine sections have an Add Block button in the top-left corner. When you click and drag a block, a grid should appear in the background.
Tip: Make the grid stay visible by pressing G. Press G again to hide the grid.
If no button or grid appears, this block area uses the classic editor.
Classic editor
Even if your site supports Fluid Engine, some areas of your site still use the classic editor, including:
- Blog posts
- Event descriptions
- Product additional information
- Block sections added before Fluid Engine's release
Add a Fluid Engine section
To add a Fluid Engine section to a page:
- Click Edit on the page.
- Click Add Section.
- Click Add Blank + to add a blank Fluid Engine section, or click a category to find pre-built sections. Keep in mind, if the section has an i icon in the top-right corner, it's an auto layout that doesn't use Fluid Engine.
To change the height of the section's grid, click and drag the blue arrow icon in the bottom-right corner. Keep in mind, the amount and placement of blocks may prevent you from decreasing the height. Each Fluid Engine has a limit of 100 rows.
Upgrade classic editor sections
Note: After upgrading a section to Fluid Engine and saving the page, it's not possible to revert it to the classic editor. If you're not sure you want to use Fluid Engine with a section, we recommend duplicating the section before upgrading just in case.
If you added block sections that use the classic editor before Fluid Engine's release, you can convert them to Fluid Engine sections. To do this:
- Click Edit on the page.
- Click Upgrade in the top-left corner of any classic editor section.
- The classic editor section becomes a Fluid Engine section. If the classic editor height exceeds the 100-row grid limit, it will be split into multiple Fluid Engine sections.
If you decide you don't want to use Fluid Engine with that section, click Undo before saving.
Add blocks
To add blocks to a Fluid Engine section:
- Click Edit on the page.
- Click Add Block in the top-left corner.
- Select the block you want to add. To learn more about different kinds of blocks, visit Adding content with blocks.
After adding blocks, you can move and resize them by clicking and dragging, building unique and creative layouts. You can place blocks alongside each other or overlapping. Edit the section's mobile layout to set how it appears in mobile devices.
Note: Spacer blocks aren't supported in Fluid Engine. Spacer blocks are used in the classic editor to add space between blocks, but with Fluid Engine, you can add space between blocks by clicking and dragging the blocks to new positions in the section.
Add block background color
When blocks with a lot of text overlap with other content, make the text more readable by adding a block background color. To learn more about how color palettes and themes work, visit Changing colors.
Fit or fill blocks
To set padding between image blocks and button blocks, set them to fit or fill. If a block is set to fill, the image or button takes up the entire block space, so the borders of the image or button will be flush with adjacent blocks. If a block is set to fit, extra space surrounds the image or button.
To set image or button blocks to fit or fill:
- Click an image or button block, click the pencil icon, then click the Design tab.
- Click Fit or Fill. Image blocks are set to fit by default, while button blocks are set to fill.
- If you select Fit, alignment options appear below, or in the block's toolbar.
- After making changes, hover over Done and click Save.
Mobile layout
In Fluid Engine sections, mobile layouts display the same content, but you can arrange the mobile layout and resize its blocks independently of the computer layout. To set your section's mobile layout:
- Click Edit on the page, then click the Mobile View icon in the top-right corner.
- Arrange and resize your blocks as desired. To move a block above or below an adjacent block automatically, click the block, then click ↑ or ↓. This is a great way to quickly rearrange blocks in your mobile layout without having to click and drag.
- After making changes, hover over Done and click Save.
Any changes you make to block placement or size won't affect the computer layout, including using the blue arrow icon to increase or decrease the height of the grid, but keep in mind any changes to the block content or section styles are global, affecting both mobile and computer layouts.
For example, moving a text block so it overlaps an image block on the mobile layout won't change the computer layout. If you change what the text says or the text's color, those changes affect both layouts.
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. If Edit Section doesn't appear, you may have a block selected. Click the section background to make Edit Section appear.
- In the Format tab, make style changes to the spacing and padding of the section. We recommend trying out different settings to get a sense of how they affect the look of your site. Learn about your options below.
- Click Background to change the background settings. To learn more, visit Section background images, Adding background videos, and Section background art.
- Click Colors to change the section's color theme. To learn more, visit Changing colors.
- Hover over Done in the top-left corner and click Save.
Format options
Change the following style settings in the Format tab:
- Row Count - Set the number of rows in the section's grid. This is the only section style option where you can have different settings on the computer and mobile layout, but the minimum number of rows is also dependent on how many blocks you've added and how they're arranged.
- 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 ... to set custom vertical and horizontal gaps.
- Fill Screen - Enable this setting for more control over the height and alignment of your content. If you don't want padding around the section content, leave it disabled. The following options only appear if Fill Screen is enabled.
- Height - Add padding to your section outside the section grid. You can choose between small, medium, or large height, or click ... to set a custom height.
- Alignment - Set where the extra height padding appears. Align content to the top to add padding below the content. Align content in the center to add padding above and below the content. Align content to the bottom to add padding above the content.
Best practices
While Fluid Engine is great for building more complex and creative layouts, keep these best practices in mind to ensure your design doesn't interfere with your content:
- If you're making blocks overlap, ensure the content of all blocks is still visible and usable by visitors. Think about how different block elements might interact. For example, if you have a form block, you may not want to place a button block on top of it, because visitors might be unsure which button is for submitting the form.
- If you're placing text over other kinds of content, ensure it's readable. This might mean adding a color background to a block, changing the color of text so it stands out on an image, or moving the text to a place where it's still readable.
- There's no hard limit for the number of blocks you can add to a section or page, but we recommend adding no more than 60 blocks per page, as too much content can cause your site to load slowly. Mobile browsers in particular may have issues downloading pages with a lot of content.
More help
This guide covers the basic features and options specific to Fluid Engine. Visit the following guides to learn more about other content and style settings that appear in your Fluid Engine sections:
- To learn how to move, duplicate, and delete sections, visit Page sections
- To learn about different types of blocks, visit Adding content with blocks
- To learn about moving blocks and arranging layouts, visit Moving blocks to customize layouts
- To learn how to resize blocks, visit Resizing blocks
- To learn how to set your site's global styles, visit Making style changes