Ever tried moving an image or text box in Squarespace, only to realize your layout doesn't look quite right?
Maybe your headline feels too far from your button. Perhaps your images aren't lining up, or your mobile layout looks completely different from what you imagined.
If that sounds familiar, you're going to love understanding how Fluid Engine works.
Squarespace Fluid Engine is a flexible, drag-and-drop editor that gives you greater control over how content is arranged on your website.
You can move blocks, resize images, create columns, and customize layouts without writing code.
But having more design freedom also means knowing how to use it thoughtfully.
In this beginner-friendly Squarespace Fluid Engine tutorial, we'll walk through the essentials and show you how to create beautiful, organized layouts.
1. What Is Squarespace Fluid Engine?
Fluid Engine is Squarespace's modern content editing system for supported block sections on version 7.1 websites.
It uses a flexible grid that allows you to position and resize content blocks directly within a section.
Think of it as arranging elements on a design canvas.
Instead of relying entirely on predetermined positions, you can decide how your text, images, and buttons fit together.
What can you do with Fluid Engine?
•
Move and resize content blocks.
•
Create custom columns and rows.
•
Arrange text alongside images.
•
Adjust spacing between elements.
•
Build more flexible section layouts.
•
Customize desktop and mobile arrangements separately.
The biggest advantage? You can create a more personalized website without needing advanced design or coding skills.
2. How to Open Fluid Engine in Squarespace
Getting started is straightforward.
If you're using a Squarespace 7.1 website, Fluid Engine is available in supported block sections.
Follow these steps
When you drag a block, you'll notice a grid appearing in the background.
This grid helps you align elements and organize your layout.
You can also press G while editing to toggle the grid's visibility.
Quick tip: Some older sections and content areas still use Squarespace's classic editor, so their editing controls may look different.
3. Add and Customize Content Blocks
Blocks are the building pieces of your website.
They can contain text, images, buttons, forms, videos, and other types of content.
To add a block, open a Fluid Engine section and select Add Block.
Choose the type of content you want to include.
For example, a simple homepage hero section might contain:
Text Block: Your main headline.
Text Block: A short supporting description.
Button Block: A clear call to action.
Image Block: A photograph or website mockup.
Once you've added your blocks, you can arrange them within the grid.
Double-click a block or use its editing controls to change its content.
Design strategy tip: Start with your content before experimenting with complicated layouts. It's easier to create a balanced design when you know what needs to fit.
4. Move and Resize Blocks Like a Designer
This is where Fluid Engine becomes especially useful.
You can drag blocks into different positions and resize them directly on the page.
How to move a block
To resize a block, select it and drag one of its resize handles.
You can make an image wider, give a paragraph more room, or adjust a button's position.
Squarespace also provides alignment indicators that help you match block dimensions.
A practical example
Imagine you're creating a two-column hero section.
Place your headline, description, and button on the left.
Position a large image on the right.
Adjust the block widths until the content feels balanced.
Remember: A good layout isn't about filling every available grid space. It's about creating clear relationships between elements.
Tags:#Squarespace Fluid Engine tutorial#Squarespace Fluid Engine#Squarespace custom layouts#Squarespace drag and drop editor#Fluid Engine mobile editing#Squarespace website design#Squarespace block editor