Really helpful playlist! Could you let me know how can I apply the same hover effects on a block set of image and text altogether to make it clickable? Maybe adding an overlay button on everything? Do note that this block is not part of a template list. I would really appreciate the help!!
Interesting idea! Technically, we could apply the same technique using the list section button that applies to the whole thing, but it would take some special code creation. Feel free to book a strategy session if you want to explore this idea: insidethesquare.co/strategy
Great tutorial. I copied the code exactly from the description, and left in the code, but the list item still goes black when I hover over it, any idea how I could stop this happening please?
The list item going black is not normal 😵💫 Sounds like you have an older code, potentially an overarching active link hover effect causing this issue. Can you share your entire code here? I'll take a look to see what's messing it up. You can also email me if you would prefer: support--at--insidethesquare.co
This tutorial was 🔥 worked wonders for me to do it as a case study section to link through to a main website.. i have a quick question is there a way i can make the text become a colour rollover instead of the background please? would ideally like my titles to become bold and change colour if possible please
That's a great question - and yes! You can change the color & weight properties for any of the text based selectors inside the list item using the same technique. I have a free list of text/property selectors available at insidethesquare.co/textguide
Interesting question! I had to Google what that was 😅 Squarespace is not an affiliate marketing or link management platform, but you can use pretty links anywhere you use a link. If you want to create a shortened URL based on your domain, you can setup a URL redirect. Here is more info about that: insidethesquare.co/tiny/url-redirect
Awesome videos as always! Is it possible to do something similar to this on portfolios? So far I can only make the buttons clickable but not the images 😞
I'm not sure I understand your issue; portfolios don't have buttons, but the project thumbnail images are clickable. If you're talking about a portfolio section and not a portfolio of projects, that is a list section so this code will work. Hope that info helps with your project.
I don't know what I'm doing wrong. I don't get full opacity when I hover so I can still see the button text. I can adjust the margins, add borders, change the background color, but the opacity is never fully at 0 so the button text and a trace of the button color shows. Got any tips?
@@InsideTheSquare It worked, thank you! You are 100% the best thing that has ever happened to Squarespace. I purchased your cheat sheet and it's been incredibly helpful. I so appreciate you!
HI this is great! I am having issues with the spacing though since i am not using images in the blocks only title and text. I wont center the content and the title is too close to the border. Any suggestions?
You can try turning on the card layout under the style option and then adjusting the padding and alignment using the editor. Hope that workaround helps!
any idea how I can fix the button to go up, it keeps going down no matter if I change the number to a negative or positive. I left the margin-bottom at -28rem. TIA
Love this! How do I apply this to only one section of a page and not the whole site? I tried putting [data-section-id=”123456”] * at the top of the code, but it didn't seem to help. Any ideas?
@@InsideTheSquare Thanks so much! That fixed it. Also, I just noticed that "opacity" is misspelled in this line of the video description: .list-item-content__button:hover{ oapcity:0 }
Also also, I noticed that the height and margin-bottom didn't fit the mobile version of my site. I removed the "!important" from both of those and added the below code, then adjusted the mobile sizes, and it worked! I'm shocked that I was able to figure this out. I've learned so much from your videos and the cheatsheet. Thanks so much for your awesome work 🙌 @media only screen and (max-width:767px) {.list-item-content__button{ height: 45.7rem!important; margin-bottom:-45.7rem!important} }
@@InsideTheSquare Thanks for the video, really helpful as I help a client with their site. Could you explaining a bit more about this issue, effecting a specific page list (as opposed to the entire site). I did see @shawnbuck8134 comment, but I was a bit confused. Where am I placing that "data-section-id.." Is that the main (CSS) target as opposed to targeting ".list-item"?
Hey friends, the section in the description for hiding the button on hover is missing a ; it should look like this: .list-item-content__button:hover{ opacity:0 !Important; }
Fun fact: You don’t need a ; symbol at the end of code unless you’re separating properties! I have a free class on basic CSS if you want to learn more about how to create code: insidethesquare.co/learn
Note to anyone who will be copying and pasting directly from the description: make sure you add !important to this: .list-item-content__button:hover{ opacity:0 } I think it might have been a typo/oversight.
youre really a life saver! thank you! you deserve so much happiness for your hard work!
Thank you so much! :)
Thanks!
You’re so welcome - thank you for your support! 🥰
Really helpful playlist! Could you let me know how can I apply the same hover effects on a block set of image and text altogether to make it clickable? Maybe adding an overlay button on everything? Do note that this block is not part of a template list. I would really appreciate the help!!
Interesting idea! Technically, we could apply the same technique using the list section button that applies to the whole thing, but it would take some special code creation. Feel free to book a strategy session if you want to explore this idea: insidethesquare.co/strategy
Great tutorial. I copied the code exactly from the description, and left in the code, but the list item still goes black when I hover over it, any idea how I could stop this happening please?
The list item going black is not normal 😵💫 Sounds like you have an older code, potentially an overarching active link hover effect causing this issue. Can you share your entire code here? I'll take a look to see what's messing it up. You can also email me if you would prefer: support--at--insidethesquare.co
This tutorial was 🔥 worked wonders for me to do it as a case study section to link through to a main website.. i have a quick question is there a way i can make the text become a colour rollover instead of the background please? would ideally like my titles to become bold and change colour if possible please
That's a great question - and yes! You can change the color & weight properties for any of the text based selectors inside the list item using the same technique. I have a free list of text/property selectors available at insidethesquare.co/textguide
@@InsideTheSquare ahh brilliant thank you, i will check it out now.
Your videos are great! Thank you. I have one question. Is it possible to shorten the links to something similar to what PRETTY LINKS offers?
Interesting question! I had to Google what that was 😅 Squarespace is not an affiliate marketing or link management platform, but you can use pretty links anywhere you use a link. If you want to create a shortened URL based on your domain, you can setup a URL redirect. Here is more info about that: insidethesquare.co/tiny/url-redirect
Awesome videos as always!
Is it possible to do something similar to this on portfolios? So far I can only make the buttons clickable but not the images 😞
I'm not sure I understand your issue; portfolios don't have buttons, but the project thumbnail images are clickable. If you're talking about a portfolio section and not a portfolio of projects, that is a list section so this code will work. Hope that info helps with your project.
I don't know what I'm doing wrong. I don't get full opacity when I hover so I can still see the button text. I can adjust the margins, add borders, change the background color, but the opacity is never fully at 0 so the button text and a trace of the button color shows. Got any tips?
Try adding !important after the 0 for your opacity to force your browser to read your code, like this: opacity:0!important;
@@InsideTheSquare It worked, thank you! You are 100% the best thing that has ever happened to Squarespace. I purchased your cheat sheet and it's been incredibly helpful. I so appreciate you!
HI this is great! I am having issues with the spacing though since i am not using images in the blocks only title and text. I wont center the content and the title is too close to the border. Any suggestions?
You can try turning on the card layout under the style option and then adjusting the padding and alignment using the editor. Hope that workaround helps!
Hi, is there a way to track clicks on photos in the analytics section for sponsored ad purposes?
Great question! You can add a UTM tracking code to the list item link 👍👍
@@InsideTheSquare have you made a video on how to do that? Btw, your video on creating a social share buttons really save the day. Thank you!
any idea how I can fix the button to go up, it keeps going down no matter if I change the number to a negative or positive. I left the margin-bottom at -28rem. TIA
It's hard to say without seeing your code, but you can try a negative margin-top!
Love this! How do I apply this to only one section of a page and not the whole site?
I tried putting [data-section-id=”123456”] * at the top of the code, but it didn't seem to help. Any ideas?
Skip the * and you'll be good to go 😉
@@InsideTheSquare Thanks so much! That fixed it.
Also, I just noticed that "opacity" is misspelled in this line of the video description:
.list-item-content__button:hover{
oapcity:0
}
Also also, I noticed that the height and margin-bottom didn't fit the mobile version of my site. I removed the "!important" from both of those and added the below code, then adjusted the mobile sizes, and it worked!
I'm shocked that I was able to figure this out. I've learned so much from your videos and the cheatsheet. Thanks so much for your awesome work 🙌
@media only screen and (max-width:767px) {.list-item-content__button{
height: 45.7rem!important;
margin-bottom:-45.7rem!important}
}
@@shawnbuck8134 so glad you were able to troubleshoot and got it working for your site - that's awesome! 🙌
@@InsideTheSquare Thanks for the video, really helpful as I help a client with their site. Could you explaining a bit more about this issue, effecting a specific page list (as opposed to the entire site). I did see @shawnbuck8134 comment, but I was a bit confused. Where am I placing that "data-section-id.." Is that the main (CSS) target as opposed to targeting ".list-item"?
Hey friends, the section in the description for hiding the button on hover is missing a ;
it should look like this:
.list-item-content__button:hover{
opacity:0 !Important;
}
Fun fact: You don’t need a ; symbol at the end of code unless you’re separating properties! I have a free class on basic CSS if you want to learn more about how to create code: insidethesquare.co/learn
@@InsideTheSquare I had no idea! I certainly was having some issues with my code, but the tiny little ; fixed it. Maybe I had forgotten the } as well.
Hey bicca i am from Pakistan can you help me to create website in squarespace
Abssolutley! I have a ton of tutorials here, and a course called Squarespace Made Simple that you can enroll in here: insidethesquare.co/start
👍👍
Note to anyone who will be copying and pasting directly from the description: make sure you add !important to this:
.list-item-content__button:hover{
opacity:0
}
I think it might have been a typo/oversight.
Buttons are notorious for needing to be important 😉 thanks for sharing this tip!