The Codebase
Browse all Resources!
Look up that Squarespace tutorial, plugin, snippet or course that’s gonna help you customize your current personal or client project.
Custom font for title (7.0 & 7.1 CE) - Image Block Card
Make the title of your Card Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
Custom font for subtitle text (7.0 & 7.1 CE) - Image Block Card
Make the subtitle text of your Card Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
Same height for image and content (7.0 & 7.1 CE) - Image Block Card
If you’re working with a Card Image Block and want to have the satisfying feeling of evenness when looking at it, then this snippet is for you. Copy/paste this code and you’ll automatically get the image and content side of your cards matching in height across the site!
Minimal design with hover mode (7.0 & 7.1 CE) - Image Block Card
Looking for a quick way to spruce up your Card Image Blocks? You got it! This code snippet will allow you to create a rounded minimal style in no time, and allow you to adjust the background color, border radius, shadow intensity, space around the content and hover mode position.
Alternative image on hover (7.0 & 7.1 CE) - Image Block Card
Set up an alternative image on hover mode for Card Image Blocks with this copy/paste code. The snippet will allow you to set any image you want just with its URL, and it’ll take care of the rest of the animation for you.
Multi-column spotlight design (7.0 & 7.1 CE) - Image Block Card
Create a highly custom look for your Card Image Block with this copy/paste snippet. You’ll be able to modify the image offset, column number, overall border style and even choose when the mobile layout sets in, to have full control over the look of your cards at all times.
Custom font for title (7.0 & 7.1 CE) - Image Block Collage
Make the title of your Collage Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
Custom font for subtitle text (7.0 & 7.1 CE) - Image Block Collage
Make the subtitle text of your Collage Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
Content side border (7.0 & 7.1 CE) - Image Block Collage
Create a minimal look for your Collage Image Block with this short snippet. You’ll be able to add a border with the style of your choosing to the content side by just copy/pasting the code.
Alternative image on hover (7.0 & 7.1 CE) - Image Block Collage
Set up an alternative image on hover mode for Collage Image Blocks with this copy/paste code. The snippet will allow you to set any image you want just with its URL, and it’ll take care of the rest of the animation for you.
Custom font for title (7.0 & 7.1 CE) - Image Block Overlap
Make the title of your Overlap Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
Custom font for subtitle text (7.0 & 7.1 CE) - Image Block Overlap
Make the subtitle text of your Overlap Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
Alternative image on hover (7.0 & 7.1 CE) - Image Block Overlap
Set up an alternative image on hover mode for Overlap Image Blocks with this copy/paste code. The snippet will allow you to set any image you want just with its URL, and it’ll take care of the rest of the animation for you.
Custom font for title (7.0 & 7.1 CE) - Image Block Stack
Customize the title of your Stack Image Blocks with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
Custom font for subtitle text (7.0 & 7.1 CE) - Image Block Stack
Make the subtitle text of your Stack Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
Alternative image on hover (7.0 & 7.1 CE) - Image Block Stack
Set up an alternative image on hover mode for Stack Image Blocks with this copy/paste code. The snippet will allow you to set any image you want just with its URL, and it’ll take care of the rest of the animation for you.
Skewed newsletter block (7.0, 7.1 CE & 7.1 FE) - Newsletter Block
Change up the default Newsletter Block style with this copy/paste code snippet. Achieve a funky skewed look in just a few minutes and adjust the colors, borders and “skewdness” by playing with the existing CSS properties or adding in your own!
Adding a description (7.1) - Portfolio Page Grid Overlay
Get your hands on this code snippet to add a little description under the title of your Portfolio Page items, when set to the Grid: Overlay layout! Include any text you like, and modify, add or remove CSS properties from the code to style the color, font size, font family and any other font styles you want.
Adding a button (7.1) - Portfolio Page Grid Overlay
Add a button to your Portfolio Page slides with this quick code snippet. You’ll be able to modify the background color, font styles, border look and even hover mode, to make it match the rest of your design!
Custom font for source (7.0, 7.1 CE & 7.1 FE) - Quote Block
Using Quote Blocks on your Squarespace site and are looking for a way to customize the font of your testimonial source? Then grab this code snippet to make it happen! You’ll be able to set the font family, color and alignment right away.