Squarespace Fluid Engine vs Classic Editor

What Is the Squarespace Fluid Engine?

The Fluid Engine is Squarespace's current page editor that uses a flexible grid system for content placement. Instead of snapping blocks to fixed column positions, you drag blocks to any position on the grid and resize them by dragging their edges. Blocks can overlap, span custom widths, and be positioned with precision that the Classic Editor does not allow.

Key Fluid Engine features: drag-and-drop block placement on a visible grid, custom block sizing (any width, any height), overlapping elements (text over images, images over sections), separate desktop and mobile layout editing, and real-time visual preview as you build.

What Is the Squarespace Classic Editor?

The Classic Editor is Squarespace's original page builder used on 7.0 templates and early 7.1 sites created before the Fluid Engine launched. It uses a fixed column system where content blocks snap to predefined positions - typically in one, two, three, or four column layouts. Blocks cannot overlap, custom widths are limited, and mobile layout is determined automatically based on the desktop arrangement.

The Classic Editor is simpler but more restrictive. If your design needs fit within standard column layouts, it works fine. If you need custom positioning, overlapping elements, or precise spacing control, the Fluid Engine is significantly better.

Key Differences Between Fluid Engine and Classic Editor

Layout Flexibility

Fluid Engine: Blocks can be placed anywhere on the grid. Custom widths, custom heights, and overlapping elements. Full creative control over positioning.

Classic Editor: Blocks snap to column positions. Limited to standard column widths. No overlapping. Layout is constrained by the template's grid structure.

Mobile Editing

Fluid Engine: Separate mobile layout editor lets you rearrange elements specifically for mobile without affecting the desktop layout. You control how content stacks and positions on small screens.

Classic Editor: Mobile layout is generated automatically from the desktop layout. You cannot rearrange elements for mobile independently - the template determines how content stacks.

Block Sizing

Fluid Engine: Drag block edges to any size. A text block can span 30% of the page width or 80% - whatever your design requires. Image blocks can be any aspect ratio.

Classic Editor: Block widths are limited to the column grid - full width, half, third, or quarter. Fine-grained sizing requires Custom CSS workarounds. For CSS techniques, our guide to adding custom CSS to Squarespace covers layout overrides.

Design Precision

Fluid Engine: Visible grid lines during editing show exactly where blocks will land. Snap-to-grid keeps elements aligned. The visual feedback makes precise layouts achievable without code.

Classic Editor: Less visual feedback during editing. Achieving precise layouts often requires trial and error or Custom CSS. For design strategies on the Classic Editor, our Squarespace design tips guide covers visual hierarchy principles that work on both editors.

How to Check Which Editor Your Site Uses

Open any page in the editor and look at how content blocks behave when you click and drag them. If blocks snap to column positions and you cannot overlap elements, you are using the Classic Editor. If blocks move freely on a visible grid and can be resized by dragging edges, you are using the Fluid Engine.

You can also check your Squarespace version. 7.0 sites always use the Classic Editor. 7.1 sites created after the Fluid Engine launch use the Fluid Engine. 7.1 sites created before the launch may use either - check a page section to confirm.

Should You Upgrade to the Fluid Engine?

When to Upgrade

You need custom layouts. If your design requires non-standard column widths, overlapping text on images, or asymmetric arrangements, the Fluid Engine handles these natively. The Classic Editor requires CSS hacks for the same results.

You want mobile control. The Fluid Engine's separate mobile editor is a significant advantage if mobile traffic is important to you (it should be - over 60% of web traffic is mobile). For mobile optimization, our guide to Squarespace mobile optimization covers responsive design strategies.

You are building new pages. Any new section you create on a 7.1 site uses the Fluid Engine by default. If you are adding content to your site regularly, you are already working with the Fluid Engine on new sections.

When to Stay on Classic

Your site works well as-is. If your current design looks good on all devices and you are not planning significant layout changes, upgrading introduces risk without clear benefit.

You have extensive Custom CSS. Custom CSS written for the Classic Editor may not work correctly after upgrading to the Fluid Engine because the underlying HTML structure changes. Upgrading means auditing and potentially rewriting your CSS.

You are on Squarespace 7.0. The Fluid Engine is not available on 7.0 templates. Upgrading requires migrating to 7.1 first, which is a significant change that affects your entire site structure.

Upgrading Sections to the Fluid Engine

On 7.1 sites, you can upgrade individual sections from Classic to Fluid Engine without changing the entire site. Click on a section, look for the "Upgrade to Fluid Engine" option in the section settings, and click it. Squarespace converts the section's layout to the Fluid Engine grid.

After upgrading, review the section's layout - content may shift slightly during conversion. Adjust block positions and sizes to match your intended design. Check the mobile preview and adjust the mobile layout separately if needed. For layout techniques on the Fluid Engine, our guide to Squarespace custom layouts covers advanced positioning.

Fluid Engine Tips and Best Practices

Use the grid. The visible grid lines help you keep elements aligned. Snap blocks to grid lines for a clean, organized layout. Freeform placement is powerful but can lead to messy layouts if you ignore the grid entirely.

Edit mobile separately. After finalizing your desktop layout, switch to the mobile editor and adjust. Desktop layouts rarely translate perfectly to mobile - text blocks may be too wide, images may stack awkwardly, or spacing may feel off.

Start with structure. Place your main content blocks first (headings, text, images), then fine-tune their positions and sizes. Building the structure before the details prevents frustrating rearrangements later.

Use overlapping intentionally. The Fluid Engine lets you overlap elements (text over images, shapes over sections), but use this sparingly. Overlapping creates visual interest when done with intention - it creates visual chaos when overused. For design principles, our Squarespace design tips guide covers visual hierarchy and composition.

Keep Custom CSS minimal. The Fluid Engine handles most layout needs natively. If you find yourself writing extensive CSS for positioning, you may be using CSS for something the Fluid Engine can do through the visual editor. Check the editor's capabilities before writing code. For CSS best practices, our guide to Squarespace custom CSS covers when to use CSS and when to use the editor.

Choose the Right Editor for Your Needs

The Fluid Engine is objectively more capable than the Classic Editor - it gives you more layout control, better mobile editing, and the design precision that modern websites require. If you are building a new site or adding new sections, you are already using it.

If your existing Classic Editor site works well, there is no urgency to upgrade. But when you need a layout the Classic Editor cannot produce, the Fluid Engine is the answer - and converting individual sections makes the transition gradual and low-risk.