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.
Bordered items with hover overlay for Related Products - Shop pages (7.1)
Create a stylish line-look for the related items in your 7.1 Shop Pages with this short code. You’ll have the ability to style the border, overlay color and icon, and even set up a floating title label however you want to make it as prominent or subtle as you wish!
Bordered items with hover overlay - Auto Layout Carousel (7.1)
Give your Auto Layout Carousels a super custom look with this code snippet! It’ll instantly add a border to your list items, create an overlay on hover with the icon of your choice, and you’ll even be able to set up a floating label with whichever text you want to highlight on each slide!
Sleek Masonry Gallery Section design in Squarespace with caption overlay and hover mode (7.1)
Today's CSS trick may come in handy on those projects where you want to use Squarespace Gallery Sections as a portfolio of sorts, where each image leads to a case study, or a post, or even a secondary image gallery.
Adding a simple hover mode to main video pages in Squarespace (7.1)
If you're using 7.1's Video Pages in your client sites and you want to add a fun little customization to the design, then this tutorial is for you!
Alternative image on hover (7.1 FE) - Image block fluid engine
Set up an alternative image on hover mode for 7.1 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.
Flipping Auto List rollover | All2 (7.1)
Looking for something different than a regular hover effect for your Auto Layout List section? Then this plugin is for you! Create an awesome flipping animation for your list items in less than 5 mins with this plugin.
How to create custom shapes for images in Squarespace (7.0, 7.1 CE & 7.1 FE)
Want to know how to create custom shapes for images in Squarespace? Then today’s tutorial is for you! Take a look.
Colliding content Auto List rollover | All1 (7.1)
Create a lovely colliding effect rollover for the content of your auto layout list in Squarespace 7.1 with this mini-course!
How to create a hover mode for anything in Squarespace (7.0 & 7.1)
In this week's video, we'll be looking at the steps behind creating a hover mode for anything you want in Squarespace. Sounds good? Then let’s jump right into it!
Gallery title + link rollover | GBG3 (7.0, 7.1 CE & 7.1 FE)
Add a description and overlay hover mode to your Grid Gallery Blocks in Squarespace with this great little plugin!
Content overlay on hover (7.1) - Auto Layout Carousel
Add a simple yet dynamic hover mode to your Auto Layout Carousels in Squarespace 7.1 with this snappy code snippet. You’ll be able to easily adjust the subtleness or bluntness of the colliding effect, and the overlay transparency level, by making quick tweaks to the values in the code.
Customizing the Post Comment button (7.0 & 7.1) - Blog Page
Style the “Post Comment” button in your Squarespace site’s comment box section with this copy/paste snippet. You’ll be able to change its background color, font family, and other font styles with some quick modifications to the example values.
Solid hover mode for medium outline buttons (7.0) - Button Block
Change up the hover mode for Medium Outline Buttons in Brine (7.0) to solid fill look with this short snippet. You’ll get to choose the new color of the font, background, and border, to match your site’s design!
Outline hover mode for medium solid buttons (7.0) - Button Block
Change up the hover mode for Medium Solid Buttons in Brine (7.0) to an outline look with this short snippet. You’ll get to choose the new color of the font and the border style, to match your site’s design!
Simple title rollover (7.0, 7.1 CE & 7.1 FE) - Gallery Block Grid
Add a quick and simple title rollover to your Grid Gallery Blocks in Squarespace. This snippet will allow you to work with the native Title of the slides, and you’ll get to control the background color, the border styles and even the padding, to make sure the spacing around the text fits your requirements.
Grayscale to color on hover (7.0, 7.1 CE & 7.1 FE) - Gallery Block Grid
Want to add a simple but eye-catching hover mode to your Grid Gallery Block? How about a grey-to-color effect? This short snippet will allow you to set it up in a cinch by simply copy/pasting the code into your site.
Grayscale to color on hover (7.1) - Gallery Section Grid Simple
If you’re looking to add a simple but eye-catching hover mode to your Grid Simple Gallery Sections in 7.1, you can’t go wrong with a grey-to-color effect! This short snippet will allow you to set it up in a cinch by simply copy/pasting the code into your site.
Simple caption rollover (7.1) - Gallery Section Grid Simple
Add a quick and simple caption overlay to your Gallery Grid Simple sections in Squarespace 7.1. This snippet will allow you to work with the native Caption option, and you’ll get to control the background color, the border styles and even the padding, to keep those longer titles in check at all times.
Simple caption rollover (7.1) - Gallery Section Grid Strips
Add a quick and simple caption overlay to your Strips Gallery Section in Squarespace 7.1. This snippet will allow you to work with the native Caption option, and you’ll get to control the background color, the border styles and even the padding, to keep those longer titles in check at all times.
Simple caption rollover (7.1) - Gallery Section Grid Masonry
Add a quick and simple caption overlay to your Grid Masonry Gallery Sections in Squarespace 7.1. This snippet will allow you to work with the native Caption option, and you’ll get to control the background color, the border styles and even the padding, to keep those longer titles in check at all times.