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.
Highlights: The Website Designer Summit 2025
If you’re a Squarespace designer, you may have heard about the second edition of Liz Ellery’s Website Designer Summit that just took place yesterday, February 27, 2025. Aaand if you’re a VIP of my email list, you most certainly did! However, if you did not get a chance to catch it – nor have watched the replays – I want to share with you the truth-bombs, golden nuggets and overall amazing insights the speakers casually dropped in their presentations and talks.
Creating a scrolling text header button in Squarespace (7.1)
Want to make the header button of your Squarespace project unmissable? Then why not turn it into a mini scrolling marquee with today's CSS trick! Let's get to it.
Creating an animated loading screen for Squarespace (7.0 & 7.1)
Let’s tackle how to build a loading screen or splash page for Squarespace sites that’s totally animated!
How to create a business info bar above the header in Squarespace (7.0 & 7.1)
In today’s tutorial, we’ll be creating a business info bar that carries the hours, email and phone number of a hypothetical company with the help of HTML and our friend, CSS.
Changing the accordion block icon when a dropdown is open (7.0, 7.1 CE & 7.1 FE)
If you want to add a little fun customization to your client’s accordion block, then this tutorial is for you! We'll be looking at how to use two custom icons for the accordion block items in Squarespace: one when the dropdowns are open and a different one when they are closed. Spoiler alert: the customization is easier than you think!
How to create responsive text, WITHOUT media queries, in Squarespace (7.0 & 7.1)
In today's video, we'll be tackling how to handle responsive text in Squarespace with ONE line of code and no media queries. Take a look!
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!
5 tips to troubleshoot your Squarespace code
In today’s video, I want to share with you 5 different things you can look for when the code you added to your client’s Squarespace site isn’t working. These troubleshooting tips cover a vast majority of the issues you’ll encounter when using code in Squarespace or any other platform, so let’s jump right in!
4 tips to improve your Squarespace customization workflow
This week we’ll look at 4 ways we can improve our customization workflow in Squarespace to save time, and make our code a lot easier to tweak when rounds of revisions come along!
Why is there extra spacing around headings on my live Squarespace site? (7.0 & 7.1)
Want to find out how to remove that odd spacing that shows up on some Squarespace headings, only on live mode? Then take a look at today’s CSS trick!
Create quick jumps or anchor links in Squarespace (7.0 & 7.1)
Today's code trick is all about how to create quick jumps (aka anchor links or anchor points) in Squarespace 7.0 and 7.1, using index pages or regular pages. AND how to stop your fixed navigation from getting in the way…
Why your Google Font isn't showing up in your Squarespace site on mobile (7.0 & 7.1)
Today we’re taking a closer look at the reasons why your Google Font may not be showing up on your Squarespace site on mobile, and what you can do to fix it!
5 most useful types of page ID in Squarespace (7.0 & 7.1)
Let’s take a look at 5 of the most useful types of Squarespace ID we can use in our projects to customize specific areas or pages of our site!
Adding a fixed background to your Squarespace site (7.0 & 7.1)
Have you ever seen those gorgeous site examples where everything seems to just float on top of the background image while scrolling? Well, if you’ve been inspired by them at some point and would like to implement the look in your client’s design, today’s tutorial is for you!
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 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!
Change the color of your loading screen background (Brine 7.0)
You know when you’re loading your site and you see a flashing or fade-in background color before the content on your page fully loads? This may not be happening on all of your pages – or even if you’re using a template outside the Brine family – but…
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!
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…