You have no idea how helpful this tutorial was. I've been searching for what feels like hours and watching multiple videos to explain how to overlap sections. Everytime I would try to move the shape block down to meet the next section, the section would expand with it. The key part all the other videos and tutorials missed was to turn off the padding. Thank you sooo much for this video 😭
This is GOLDEN! Thanks so much for sharing. I didn’t think about this. I used to use background images to do the overlapping before fluid image. This is so easy to do. This is awesome!!!
Wow - man, I remember creating background images in Canva, downloading them, and then uploading them as banner images in SS to get this effect. This is SO much easier. So much more custom. So excited to see the updates happening in SS. Thank you for sharing Erica!
Hi! Thanks so much for this helpful tutorial. I wanna ask though - I played around with the screen and when I made the screen small, the overlapping image and the background go all out of whack. Any idea on how to fix this to make it responsive so that it stays in the same spot?
Yes because Squarespace is responsive if will change when you make the screen bigger and smaller. Use the Image Block Alignment settings, play around with Image Block Fit and Fill too. The Shape block should stay where it's supposed to stay as it just fits to the grid. It will always change on different screen sies but using the different alignment features will help it look better. And remember that on mobile view you can independently edit so you'll need to adjust it there too.
Love this tip!👏🏼For some reason I am unable to stretch the shape block to fully reach the bottom, there's still a small gap between the sections.. do you have any idea why that might be? or how to fix that? thank you💕
Click EDIT SECTION to open your section settings and make sure the settings look the same as mine (check Fill Screen and make sure you have minimized the Rows as much as possible) :)
Love this! Restricted to the shapes they provide, I would love to do an overlapping shape that is like a half triangle with curved edged so combined with a rectangle long page shape it ads a different look, any ideas? thank you x
I'm not exactly sure what you're trying to achieve but you could always create an image and use it like a shape block instead :) Just make sure it's aligned to whatever else you're trying to create the overlap effect!
Adding any blocks to your desktop site will affect the mobile layout. You'll just need to go in and adjust it on mobile to however you want it to look after you add it, like any block! :)
@@BigCatCreative This is great! Affects the mobile version indeed. I tried to adjust the mobile version but it's still not looking great (small, shapes are floating, etc) Great idea though!
@@nk_171 Hmm you have control over where the shapes go on mobile/desktop independently so there's no reason they should look bad. You can create the same overlap effect on mobile :)
this works great on desktop, but what about mobile? the editing controls don't work the same on mobile so you can't do the same thing. Since alot of people will only see the site on mobile its pretty important.
It actually does work exactly the same on mobile, the editing controls are the same with the grid, shape blocks and moving elements forward and back. So you can use this on mobile too
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
You have no idea how helpful this tutorial was. I've been searching for what feels like hours and watching multiple videos to explain how to overlap sections. Everytime I would try to move the shape block down to meet the next section, the section would expand with it. The key part all the other videos and tutorials missed was to turn off the padding. Thank you sooo much for this video 😭
Aw yay so glad it helped!
I'm so glad I found you! New subscriber here and your tutorials have been a lifesaver! Thank you!
This is GOLDEN! Thanks so much for sharing. I didn’t think about this. I used to use background images to do the overlapping before fluid image. This is so easy to do. This is awesome!!!
Me too! So much easier :)
Thank you bookie! 💕
Wow - man, I remember creating background images in Canva, downloading them, and then uploading them as banner images in SS to get this effect. This is SO much easier. So much more custom. So excited to see the updates happening in SS. Thank you for sharing Erica!
Me too! Feels great to not have to do that anymore!
I just couldn’t figure this out, but you made it easy! Thanks
I was trying to figure this out! Thanks a million ❤
Hi! Thanks so much for this helpful tutorial. I wanna ask though - I played around with the screen and when I made the screen small, the overlapping image and the background go all out of whack. Any idea on how to fix this to make it responsive so that it stays in the same spot?
Yes because Squarespace is responsive if will change when you make the screen bigger and smaller. Use the Image Block Alignment settings, play around with Image Block Fit and Fill too. The Shape block should stay where it's supposed to stay as it just fits to the grid. It will always change on different screen sies but using the different alignment features will help it look better. And remember that on mobile view you can independently edit so you'll need to adjust it there too.
Love this tip!👏🏼For some reason I am unable to stretch the shape block to fully reach the bottom, there's still a small gap between the sections.. do you have any idea why that might be? or how to fix that? thank you💕
Click EDIT SECTION to open your section settings and make sure the settings look the same as mine (check Fill Screen and make sure you have minimized the Rows as much as possible) :)
@@BigCatCreative thank you so much!☺️💕
Very helpful! thanks for sharing.
Love this! Restricted to the shapes they provide, I would love to do an overlapping shape that is like a half triangle with curved edged so combined with a rectangle long page shape it ads a different look, any ideas? thank you x
I'm not exactly sure what you're trying to achieve but you could always create an image and use it like a shape block instead :) Just make sure it's aligned to whatever else you're trying to create the overlap effect!
Great idea. Thanks!
Is it possible to do a gradient in the shape block?
It's likely possible with some CSS code! Not a built-in feature though
@BigCatCreative Thank you! Now I won't hunt around the site for that. But I might look to see if I can find some CSS code
Thank you so much for this, your tutorials are always great! I was wondering if this could mess up the mobile layout?
Adding any blocks to your desktop site will affect the mobile layout. You'll just need to go in and adjust it on mobile to however you want it to look after you add it, like any block! :)
@@BigCatCreative This is great! Affects the mobile version indeed. I tried to adjust the mobile version but it's still not looking great (small, shapes are floating, etc) Great idea though!
@@nk_171 Hmm you have control over where the shapes go on mobile/desktop independently so there's no reason they should look bad. You can create the same overlap effect on mobile :)
Hi! What is the header font used in the demo site if you don't mind me asking?
Hey! The Font was New Spirit Condensed :)
Thank you for this and for the great tutorial!!@@BigCatCreative
this works great on desktop, but what about mobile? the editing controls don't work the same on mobile so you can't do the same thing.
Since alot of people will only see the site on mobile its pretty important.
It actually does work exactly the same on mobile, the editing controls are the same with the grid, shape blocks and moving elements forward and back. So you can use this on mobile too
Thanks… tried again it works. I had some internet issues that was creating the issue.