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 👇
Want a framework for designing the perfect homepage?
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.
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.
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.
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.
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.
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!
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
