Fab!! Thank you! may I make 🙋🏻♀semi related tutorial request? borders around shape blocks and shaped image blocks ...so far all I've tried places a square border around the shape, none follow the shape itself ...
Great tutorial! I used CSS to create a transformation effect on hover. My problem is now (lets use what you did in the video) that the hover effect stops, as soon as I would go over the paintbrush element. That really sucks. Is there a way around?
I have an issue of the shape block stretching out and not showing equal space around the image or set of images on mid-sized screens like tablets. I tried to create a set of 4 images (squares) and a shape behind them that overlaps partially. I created it on my desktop and it looks OK, I made the mobile version to look OK as well. But when I check the page on a tablet or turn my mobile in a horizontal position for a wider view, it's not looking good. The background stretches out and even the set of images move apart (have a wide gap between them). Any idea how to fix that?
Great tutorial, thank you! I wonder if you can help me a bit... I am using a semi-transparent shape on top of an image to darken it a bit, with text on top of the shape. This is to emulate the old "Collage" or "Card" style image layout. But putting the shape on top of the image blocks the link that's on the image. How do I set a shape to use a link? Or what is the best way to emulate the non-fluid engine image Designs including a link? Does that make sense. Help!!
Hey Daniel! it does make sense and I wish I had a good workaround for you. The one technique you can try is to add a button with no text, set the button to fill and stretch it to the size of the shape. Then use CSS to make that button transparent. A LOT of effort for a simple link, but it's the best I've got for now. Hope that helps!
@@InsideTheSquare Sounds like there's no way to emulate those old image layouts without a lot of CSS. Thank you for the response. Your videos are awesome and I very much appreciate what you do for the Squarespace community.
Great question! because a shape is created with a clip path, we can't apply a background image linear gradient to the shape, but I'll keep brainstorming to see if I can come up with a workaround. Stay tuned 😉
Hey Charlie! This is a great question, and I’m totally going to add this to my tutorial to do list for later this month! I bet other square spacers want to know how to do this too :-) all you need to do is to change the opacity for that block. There’s a free chrome extension that I use to grab block IDs and a link to it below. Replace #block-123 in this code example with your block ID and adjust the opacity value to whatever suits the style you’re going for. Hope that helps! #block-123 {opacity: 50%} This is the free Chrome extension I use - not affiliated, just a fan! chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en
⭐ Download a list of my top 7 FREE Squarespace tutorials: insidethesquare.co/top7 ⭐
I was literally looking for this last week. Wondering if I could make shapes with a stroke! Yay!!! Thanks so much Becca!!
Wonderful. This is so fun, I'm loving the new shape block. Thanks for this one. 👍
Yay! So happy I could help! 🙌🏻
So glad they added this! Will make life so much easier!
It's fun for sure! have fun playing around! :-)
Fab tutorial as always! Loving the fresh blonde tresses! 💇🏼♀👌🏼
Fab!! Thank you! may I make 🙋🏻♀semi related tutorial request? borders around shape blocks and shaped image blocks ...so far all I've tried places a square border around the shape, none follow the shape itself ...
Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉
@@InsideTheSquare oooh goodie!! 😃
Nice demo and css thanks Becca!
You’re welcome! Happy to help. 😎
Another fun tutorial. Thank you.
Glad you enjoyed it!
Thank you so much for this video. How can I change the border color to a specific hex? Will really appreciate your help. Thanks!
Change where it says "red" "pink" or "white" to your hex value and that should do the trick!
Great tutorial! I used CSS to create a transformation effect on hover. My problem is now (lets use what you did in the video) that the hover effect stops, as soon as I would go over the paintbrush element. That really sucks. Is there a way around?
Great question! Feel free to submit a code help request here: insidethesquare.co/code-help
@@InsideTheSquare Ah, I wish it was something simple I was missing. 😅
I have an issue of the shape block stretching out and not showing equal space around the image or set of images on mid-sized screens like tablets. I tried to create a set of 4 images (squares) and a shape behind them that overlaps partially. I created it on my desktop and it looks OK, I made the mobile version to look OK as well. But when I check the page on a tablet or turn my mobile in a horizontal position for a wider view, it's not looking good. The background stretches out and even the set of images move apart (have a wide gap between them). Any idea how to fix that?
Im having the same issue ...
That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.
Great tutorial, thank you! I wonder if you can help me a bit... I am using a semi-transparent shape on top of an image to darken it a bit, with text on top of the shape. This is to emulate the old "Collage" or "Card" style image layout. But putting the shape on top of the image blocks the link that's on the image. How do I set a shape to use a link? Or what is the best way to emulate the non-fluid engine image Designs including a link? Does that make sense. Help!!
Hey Daniel! it does make sense and I wish I had a good workaround for you. The one technique you can try is to add a button with no text, set the button to fill and stretch it to the size of the shape. Then use CSS to make that button transparent. A LOT of effort for a simple link, but it's the best I've got for now. Hope that helps!
@@InsideTheSquare Sounds like there's no way to emulate those old image layouts without a lot of CSS. Thank you for the response. Your videos are awesome and I very much appreciate what you do for the Squarespace community.
Is it possible to add a gradient to the shape colour?
Great question! because a shape is created with a clip path, we can't apply a background image linear gradient to the shape, but I'll keep brainstorming to see if I can come up with a workaround. Stay tuned 😉
@@InsideTheSquare fingers crossed 🤞
How can i change the opacity of the shape for an image to show through it?
Hey Charlie! This is a great question, and I’m totally going to add this to my tutorial to do list for later this month! I bet other square spacers want to know how to do this too :-) all you need to do is to change the opacity for that block. There’s a free chrome extension that I use to grab block IDs and a link to it below. Replace #block-123 in this code example with your block ID and adjust the opacity value to whatever suits the style you’re going for. Hope that helps!
#block-123 {opacity: 50%}
This is the free Chrome extension I use - not affiliated, just a fan! chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en