How to overlap blocks on Squarespace Fluid Engine

Previously on Squarespace, when you added a block and dragged it where you wanted it, it would automatically snap into place, aligning with other blocks already on the page. 

A new update from Squarespace however has changed this. Now you can drag and drop a block into the exact position you want it, even overlapping it with other blocks. You even have the control over which blocks appear in the foreground and which are sent to the back of the overlap. 

To overlap blocks head to ‘edit’ in your dashboard as usual and use a Fluid Engine section. If you’re using Classic Editor, select ‘upgrade’ to switch to Squarespace Fluid Engine.

select ‘upgrade’ to switch to Squarespace Fluid Engine

Watch the video

Add your section and then add your block. You’ll see straight away that with Fluid Engine, you have full control about where you drag and drop your blocks. Select your block and you can drag it and drop it into literally any part of the section. 

simply need to drag and drop the block you want to overlap

If you want to overlap, for instance you might want to have a text block that slightly overlaps an image block, you simply need to drag and drop the block you want to overlap and put it where you want it. Sounds simple doesn’t it? That’s because it really is!


📩 Join the inner circle to get exclusive code updates


In order to change the position of your overlapping blocks (e.g. to move the one that sits on top to the back) just hover over the block and select the move backwards option. 

It’s a really simple process but the best way to get to grips with it is to have a play around yourself, dragging and dropping blocks and moving them forwards and backwards until you create the layout and design you want. 

A super quick and simple Squarespace tutorial but one that can change the game when it comes to the design of your web page! Check out the YouTube video below 👇


Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.


Want more?

Sam Crawford

This article was written by Sam Crawford, one of the world’s leading Squarespace website designers.

Sam is an official Squarespace Expert, official Squarespace Partner, official Squarespace Community Leader, official Squarespace blog contributor, official Squarespace panelist, Squarespace educator and multi-award winning Squarespace designer.

https://bycrawford.com
Previous
Previous

Hamburger menu on desktop Squarespace 7.1

Next
Next

Change font size on mobile for Squarespace website