Jump to content

Floating / Overlapping Elements

Recommended Posts

Hi everyone, I'm trying to figure out the bet way to bring the attached design to life and I'm lost as to where to start. I've circled in red the section in question. I love how the boxes overlap the two sections, so I would like to keep that. I can do without the icons. Any help to point me in the right direction would be greatly appreciated. 

Screenshot 2024-03-14 at 5.41.11 PM.png

Edited by perry.alexis
Link to comment
  • perry.alexis changed the title to Overlapping Elements
  • perry.alexis changed the title to Floating / Overlapping Elements

I would suggest that the easiest way to set this up is like this; have a background image and the section set to fill, use a shape block (yellow outlined) stretched to the left right and bottom of the section, use text blocks with background enabled for the info (blue outlined), and overlap the icons as image blocks (if you want those):

image.png.f736c7591c7faa7de4a5bcd267d918f2.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.