This is awesome! Is there a way for hover effects to work smoothly on mobile devices? I noticed that my linked images with hover effects require double tapping to access them
Hi Becca! I have a somewhat unrelated question, I use Hubspot for my CRM and email marketing, my email unsubscribe button links to a squarespace landing page for a 2-step email unsubscribe, however, how can I link a squarespace button on my landing page (the unsubscribe) to my Hubspot CRM to notify it when a customer unsubscribes?
I wish I could help but I don't have any recent experience with Hubspot. Hopefully they have a community / tech support live chat who can help. Best of luck with your project!
Hi Becca! Thank you so much for this video! I wanted to ask you, How can I make the corresponding navigation bar text highlight when I hover over an image that is also a link? For example, how can I make the "Home" text in the navigation bar highlight when I hover over an image that links to the homepage?
This is a great question! With CSS, we aren't able to change the style of an object based on the state of another one; they have to be in the same "container" if that makes sense. You'd need javascript or another code language to create this kind of function. I would recommend posting in the Squarespace forum to see if any developers know of a plugin that could do this. I hope that info helps and wish you the best of luck with your project! :)
This is a great question! The trick is to apply to hover effect to the right container. If you mean a list section carousel, you can target the list item or the image inside the list item. For a summary block, you can target the image inside the summary. Hope that explanation makes sense and I hope someday TH-cam will let me reply to a comment with a video 😅
Do you know if there is a way to create a hover affect to change the image to another image, and to make it have a sound clip when hovering or when clicked? Can you make a tutorial on that? I want to add a donate button to my website that is a cat; when you hover it opens its mouth and when you click it will meow~! I want to know if this is at all possible, please!
That is a super specific request and I love it! I don't have a code for that, but if you post about it in the Squarespace forums, you might find a developer who can create one for you. Bets of luck!
What a great tip - thank you very much, I’m really loving all these CSS code tips. As a Graphic Designer there are certain elements within SquareSpace that just don’t look very good, but my difficulty has always been targeting the correct block to work on and giving it the correct name in CSS. In the first example where you change the background colour of the button on hover, you identify the block as ‘.sqs-block-button-element’ - how do you know to call it this? Is there an easy way to identify it and other blocks, buttons etc.? Thank you.
I used to keep a big ol Google doc with a list of selectors & codes that I used to customize Squarespace for my clients. Over the last few years, that doc grew into a 130 page PDF, and then became worlds largest Notion database of Squarespace selectors and code snippets known as the Squarespace CSS cheat sheet! You can get access to it at insidethesquare.co/css
This is awesome! Is there a way for hover effects to work smoothly on mobile devices? I noticed that my linked images with hover effects require double tapping to access them
Hi Becca! I have a somewhat unrelated question, I use Hubspot for my CRM and email marketing, my email unsubscribe button links to a squarespace landing page for a 2-step email unsubscribe, however, how can I link a squarespace button on my landing page (the unsubscribe) to my Hubspot CRM to notify it when a customer unsubscribes?
I wish I could help but I don't have any recent experience with Hubspot. Hopefully they have a community / tech support live chat who can help. Best of luck with your project!
Hi Becca! Thank you so much for this video! I wanted to ask you, How can I make the corresponding navigation bar text highlight when I hover over an image that is also a link?
For example, how can I make the "Home" text in the navigation bar highlight when I hover over an image that links to the homepage?
This is a great question! With CSS, we aren't able to change the style of an object based on the state of another one; they have to be in the same "container" if that makes sense. You'd need javascript or another code language to create this kind of function. I would recommend posting in the Squarespace forum to see if any developers know of a plugin that could do this. I hope that info helps and wish you the best of luck with your project! :)
Great tutorial! Is this also applicable for carousel images or just single image blocks for now?
This is a great question! The trick is to apply to hover effect to the right container. If you mean a list section carousel, you can target the list item or the image inside the list item. For a summary block, you can target the image inside the summary. Hope that explanation makes sense and I hope someday TH-cam will let me reply to a comment with a video 😅
Do you know if there is a way to create a hover affect to change the image to another image, and to make it have a sound clip when hovering or when clicked? Can you make a tutorial on that? I want to add a donate button to my website that is a cat; when you hover it opens its mouth and when you click it will meow~! I want to know if this is at all possible, please!
That is a super specific request and I love it! I don't have a code for that, but if you post about it in the Squarespace forums, you might find a developer who can create one for you. Bets of luck!
What a great tip - thank you very much, I’m really loving all these CSS code tips. As a Graphic Designer there are certain elements within SquareSpace that just don’t look very good, but my difficulty has always been targeting the correct block to work on and giving it the correct name in CSS. In the first example where you change the background colour of the button on hover, you identify the block as ‘.sqs-block-button-element’ - how do you know to call it this? Is there an easy way to identify it and other blocks, buttons etc.? Thank you.
I used to keep a big ol Google doc with a list of selectors & codes that I used to customize Squarespace for my clients. Over the last few years, that doc grew into a 130 page PDF, and then became worlds largest Notion database of Squarespace selectors and code snippets known as the Squarespace CSS cheat sheet! You can get access to it at insidethesquare.co/css