Add content to your site's pages with this fully customizable, drag-and-drop editing system.

Fluid Engine is the primary content editor for sites on Squarespace version 7.1. In all page types, portfolio projects, 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
• Footers
• Portfolio projects

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

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:

1. Click Edit on the page.
2. Click Add Section.
3. 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 section has a limit of 1000 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:

1. Click Edit on the page.
2. Click Upgrade in the top-left corner of any classic editor section.
3. The classic editor section becomes a Fluid Engine section. If the classic editor height exceeds the 1000-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.

Add blocks

To add blocks to a Fluid Engine section:

1. Click Edit on the page.
2. Click Add Block in the top-left corner.
3. 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:

• Pin blocks
• 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.

Pin blocks

Pin one or more blocks in Fluid Engine sections to keep them stationary while your visitors scroll through other content in the section. This is a great way to highlight specific content and give your page a unique design.

To pin a block:

1. Click the block, then click the pin icon in the block's toolbar. Any block type can be pinned.
2. By default, pinned blocks are set to align with the top of the section. Alternatively, you can click the corresponding icons for align center or align bottom.
3. Use the Offset slider to change the distance between the pinned block and the browser border, between 0px and 50px. For example, a pinned block aligned to the top at 0px will stay at the edge of the browser when the visitor scrolls.

We recommend experimenting with different settings to get the effect you want.

Keep in mind:

• Pinned blocks only stay pinned in their section. If your section doesn't have enough content or is very short, the pinned effect may not be visible.
• Blocks pinned in the computer layout won't be pinned in the mobile layout, and vice versa.
• Pinned blocks aren't supported in the classic editor or other types of page sections.
• While there's no limit to the number of blocks you can pin, any section with a lot of content added to it may load slower. We recommend adding no more than 60 blocks, pinned or not, per page. To learn more, visit My site is loading slowly.

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:

1. Click an image or button block, click the pencil icon, then click the Design tab.
2. Click Fit or Fill. Image blocks are set to fit by default, while button blocks are set to fill.
3. If you select Fit, alignment options appear below, or in the block's toolbar.
4. After making changes, click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Fluid Engine and responsive design

All Squarespace sites use responsive design to ensure your site looks great in a variety of browser sizes and devices. Fluid Engine's flexible grid in particular is built so that when blocks are rearranged, resized, or edited, other blocks on the page may move or resize to preserve more complex layouts.

For example, if you place a text block over an image block, then add more text to the text block, the image block may enlarge to accommodate the added text.

If blocks move or resize in ways you don't want, undo your most recent changes, then try moving blocks around before making the changes again. In the above example, if you wanted to add text without the size of the image block changing, you could move the text block off the image block, add the text, then overlay it with the image block again.

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:

1. Click Edit on the page, then click the Mobile View icon in the top-right corner.
2. 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.
3. After making changes, click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Any changes you make to block placement or size won't affect the computer layout. This includes using the blue arrow icon to increase or decrease the height of the grid. 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.

If you add new blocks to your site after editing the mobile layout, our system arranges the new blocks into the mobile layout as similarly to the computer layout as possible. We suggest reviewing the mobile layout as you make changes to your site.

Style Fluid Engine sections

To style Fluid Engine sections:

1. 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.
2. 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.
3. Click Background to change the background settings. To learn more, visit Section background images, Adding background videos, and Section background art.
4. Click Colors to change the section's color theme. To learn more, visit Changing colors.
5. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Design options

Change the following style settings in the Design 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.
• Divider - Add and style a divider at the bottom of the section. To learn more, visit Page sections.

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. Use the layout switcher to try different layouts with content you've added.	Fixed click-and-drag grid where blocks can only be placed alongside other blocks, with some exceptions like floating blocks in text.
Available blocks	All blocks except spacer blocks, which aren't necessary in Fluid Engine. Create space by clicking and dragging blocks to new places.   Image blocks don't have built-in layouts, but you can recreate those layouts and more in Fluid Engine using image blocks, text blocks, and block backgrounds.	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.

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 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
• To help make your site design accessible to the broadest audience possible, visit Accessibility resources at Squarespace.