Overlapping multiple blocks on Squarespace Fluid Engine [Updated + Mobile optimised]

Fluid Engine has allowed us to do so much when it comes to designing Squarespace websites. One of the best things is the ability to overlap blocks. 

Overlapping multiple blocks is something I get asked about a lot, so I thought why not make a tutorial on it?

If you want to find out more, keep reading!

Watch the video

Check out the YouTube video below 👇

Head to the page you want to edit and add a blank Fluid Engine section. Add a block to this section e.g. an image, and using the Fluid Engine drag and drop, position the block where you want it within the section and alter the size accordingly. 

View fullsize

Next, add your second block aka the block you want to overlap with the first. This could be another image, or text etc. 

Once you’ve added the item, drag and drop it into the position you want it on the page, overlapping the original block. 

View fullsize

You can play around with how your overlapping blocks appear by altering font colours so they stand out and even choosing the move backward option that ensures your selected block sits behind the other. 

---

📩 Join the inner circle to get exclusive code updates

---

If you’re adding multiple blocks that all overlap each other, the move backward and move forward icons that appear when you select the block are lifesavers. You can use these to move each individual element until you get the overlap that you’re looking for.

View fullsize

Once you’re happy with how your overlapping blocks look, hit save. You then need to check how your section appears on mobile devices. 

Within the mobile view you can do the exact same thing you’ve just done for desktop. Drag and drop the elements, change their size and position and use the move forward and move backward tools to create the overlap you want.

View fullsize

Once you’re happy, hit save and you’ll have overlapping blocks on both the desktop and mobile versions of your website.  

Be sure to bookmark this article so you can refer back to it for future reference!

---

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?