The Codebase
Filter through all the code
Find the Squarespace tutorial, plugin or snippet that’s going to help you fix or customize your client’s site in a heartbeat.
Coding for Mobile in Squarespace (7.0 & 7.1 CE)
Learn how to fix the most common and annoying issues on your Squarespace site that pop up on smaller screens, without affecting your desktop layout.
Controlling gallery block grid images per row in mobile (7.0, 7.1 CE & 7.1 FE)
I want to walk you through a nifty little CSS trick that you can use to rearrange your gallery block grid images in smaller devices, so you can choose how many thumbnails or slides to display per row!
How to create a multi-column text block in Squarespace, without using separate blocks (7.0, 7.1 CE & 7.1 FE)
This depends on the font you’re using and the styles you’ve set for it, but most often than not, you feel you need just a bit more space between both columns. The problem is if you shove a spacer in there, the gap looks more like an airport runway than anything else.
Custom Squarespace templates: a tour behind the scenes (7.0 & 7.1)
Wondering what it would be like to use a custom Squarespace template created by a third-party? Not sure if using one of these templates could work for your client projects? Take a look at this tour behind the scenes of one of Ghost Plugin templates to see what it’s all about!
How to target entire blog pages vs individual blog posts (7.0 & 7.1)
If you’re using blog pages on your client site for different purposes, you may want to be able to customize the content (posts) of just ONE of those blog pages and not the other. A very common situation is when you have a blog page as an actual blog, and another blog page as a portfolio to showcase previous work.
Adding a hover effect to summary and gallery blocks in Squarespace (7.0, 7.1 CE & 7.1 FE)
Today we’re going to break down a FANTASTIC way to wow your visitors and your clients by adding a “lifting” effect to the items in your Summary Block and Gallery Block.
Add a floating 'Book Now' button to Squarespace (7.0 & 7.1)
If you’re running or working on a business website, you’ll surely find today’s customization pretty handy! Besides back to top buttons, an extra menu header, and a custom social icons header, there are other types of floating elements you can add to your…
Grayscale to color hover mode for image blocks (7.0 & 7.1 CE & 7.1 FE)
Adding a hover effect to image blocks can be a fun way to spice up your client’s design without too much hassle. So today, we’re going to be looking at how we can give a really cool grayscale to color + rotating + scaling effect to any images of your site on hover!
Customize Squarespace forms (7.0, 7.1 CE & 7.1 FE)
If you’re using Squarespace forms on your site – instead of or along with other information collection methods like Dubsado – then today’s tutorial is for you! Because if you’re looking to make your site more on-brand or unique, customizing your Squarespace forms…
Add custom 'Read More' links to your Summary Blocks (7.0, 7.1 CE & 7.1 FE)
Have you ever wished you could replace the ‘Read More‘ link from your Summary Blocks for something else? Not just change its color and turn it into a button, but actually change what it says and… why not, change it for a custom image?!
How to create a simple fade in animation (7.0 & 7.1)
You know when you load your Squarespace site and you can see some of the blocks rearranging their content for a few seconds before everything snaps into place? (e.g the carousel block). Well, we’re going to be adding a super simple fade in animation to make it load nicer!
Add a gradient in Squarespace to only one word in your heading (7.0, 7.1 CE & 7.1 FE)
Let’s give a gradient to a single word in your heading! The method is pretty simple, however we have to tackle some compatibility issues to make sure the word is readable in as many browsers as possible. So, why don’t we get started?
Adding a background color to summary excerpts (7.0, 7.1 CE & 7.1 FE)
In today’s tutorial, we’ll be looking at how to add a background color to those Summary Blocks with summary excerpts you have hanging around your site… AND how to make sure the colored portions have THE SAME HEIGHT. Oooh, intriguing right?
Custom testimonial carousel arrows with Summary Block (7.0, 7.1 CE & 7.1 FE)
So you’re using a Summary Block in your Squarespace site as a testimonial carousel, but you want a way to make it look less like… you’re using the Summary Block in Squarespace as a testimonial carousel, lol.
Create vertical lines in Squarespace (7.0, 7.1 CE & 7.1 FE)
Today’s tutorial will be quick an painless, and it will help you create those nice vertical lines you keep seeing everywhere that can be used to guide the eye further down the page, or simply as decoration!
Turning the Gallery Block title into a colorful label (7.0, 7.1 CE & 7.1 FE)
If you’re using a Gallery Block as category thumbnails for your blog, to redirect to your different service packages, or anything else that works best with an identifying label, you’re gonna love today’s customization! We’ll be turning the Gallery Block slide titles…
Creating a simple overlay for your Summary Blocks (7.0, 7.1 CE & 7.1 FE)
Want to see and learn how to do a reaaaaaally cool Squarespace customization? Then you’re in the right place my friend because today we’ll be going through how you can create or add a nice overlay to your summary block thumbnails!
“Podcastifying” Squarespace’s Summary Block (7.0, 7.1 CE & 7.1 FE)
Podcasts are pretty much THE THING right now. So, if you or your client has a podcast that wants to promote on their site, what better way to do that than customizing one of Squarespace’s block to neatly display them?
Meet Ghost: your new resource for free Squarespace plugins (7.0 & 7.1)
Ghost is a digital marketplace for designers to download plugins and code specifically for the Squarespace platform, and I invited Cody – the brains behind the project – to answer a few of the questions that I’m sure popped into your head when reading…
Creating vertical text in Squarespace (7.0, 7.1 CE & 7.1 FE)
Oh I know you wanna jump in the vertical text wagon. In fact, you probably already did! Right now you may be using images to contain your vertical text because let’s face it… it’s way easier than figuring out how to it with code.