Fluid Engine is the primary content editor for sites on Squarespace version 7.1. In all page types, portfolio sub-pages, and your site's footer, block sections use Fluid Engine.
Fluid Engine is available for all block sections on 7.1 sites. Fluid Engine isn't currently supported on:
- Block areas that don't use sections, like blog posts, event descriptions, and product additional information
- Sections that don't use blocks, like auto layouts, collection sections, and gallery sections
- Version 7.0 sites
On the Squarespace app, it's not currently possible to add or edit blocks on Fluid Engine sections.
Watch a video
Quick start with Fluid Engine
Fluid Engine is the editing experience for page sections that use blocks in version 7.1 sites. If your site is on version 7.1, you can start using Fluid Engine anytime by adding a layout page, adding a block section to an existing page, or editing your footer. If your site has block sections made before Fluid Engine's release, you can upgrade them.
With Fluid Engine's flexible grid, place blocks anywhere, even overlapping other blocks, and resize them directly on the page. Keep in mind, you'll create two layout designs: one for visitors who view your site on a computer, and one for mobile devices. Click the device icons in the top-right corner to set the different layouts.
For more in-depth details, review the rest of this guide.
Am I using Fluid Engine?
Fluid Engine is supported on version 7.1 sites in:
- Block sections on any page
- 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.
All block areas on version 7.0 use the classic editor. On version 7.1 sites, some blocks areas still use our classic editor, including:
- Blog posts
- Event descriptions
- Product additional information
- Block sections added before Fluid Engine's release
To learn more about the differences between Fluid Engine and the classic editor, review Fluid Engine vs. classic editor.
Add a Fluid Engine section
To add a Fluid Engine section to a page:
- Click Edit on the page.
- Click Add Section.
- Click Add a blank section to add an empty 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, which 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: It's not possible to revert a section to the classic editor after upgrading it and saving the page. 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.
Because of the differences between the classic editor and Fluid Engine, your layout may change slightly or blocks may become misaligned when upgrading. Not all layouts in classic editor will have an exact equivalent in Fluid Engine. However, upgrading can be a great opportunity to reimagine your block layouts with Fluid Engine's new options and increased flexibility.
If you decide you don't want to use Fluid Engine with that section, click Undo before saving.
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.
There's no hard limit for the number of blocks you can add, 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.
After adding blocks, you can:
- Duplicate blocks already in the section
- Copy and paste blocks to and from other Fluid Engine sections
- Move and resize blocks by clicking and dragging
- Edit the mobile layout to set how it appears in mobile devices
- Learn best practices for making your Fluid Engine sections accessible, especially if you're overlapping blocks
Note: Spacer blocks aren't supported in Fluid Engine. In the classic editor, spacer blocks 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.
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.
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. 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.
Fluid Engine vs. classic editor
This table outlines the differences between Fluid Engine and the classic editor. Though they share many qualities and features, the possible layouts vary, and often only Fluid Engine has the most up-to-date options.
|Feature||Fluid Engine||Classic Editor|
|Layout and arrangement||Flexible click-and-drag grid where you can place blocks anywhere, even overlapping other blocks.||Fixed click-and-drag grid where blocks can only be placed alongside other blocks, with some exceptions like floating blocks in text.|
All blocks except spacer blocks, which aren't necessary in Fluid Engine. Create space by clicking and dragging blocks to new places.
|All blocks except shape blocks, which are exclusive to Fluid Engine.|
|Duplicating blocks||Duplicate one or more blocks at the same time, or copy and paste blocks to other Fluid Engine sections.||It's not possible to duplicate blocks or copy and paste blocks. You can duplicate pages, posts, or sections instead.|
|Moving blocks||Click and drag to move blocks anywhere in the Fluid Engine section. Overlap other blocks and use guidelines to center blocks.||Click and drag to move blocks alongside other blocks in grids of up to 12 columns. Blocks can't overlap other blocks, and the spacing between blocks is fixed.|
|Resizing blocks||Click and drag from block borders and corners to resize any block. The amount and type of content may affect how a block can be resized.||Use other blocks in the layout to resize blocks. Some blocks also have cropping handles.|
|Mobile design||Design your mobile layout independently from your computer layout.||Block placement on computer sets the mobile layout with responsive design. It's not possible to arrange the mobile layout independently.|
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 move, duplicate, and delete sections, visit Page sections
- To learn about different types of blocks, visit Adding content with blocks
- To move blocks and arrange layouts, visit Moving blocks to customize layouts
- To resize blocks, visit Resizing blocks
- To set your site's global styles, visit Making style changes