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.
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!
How to create a simple timeline in Squarespace (7.0, 7.1 CE & 7.1 FE)
In today’s tutorial, we’ll be going through how to build a simple timeline in Squarespace, that’ll be incredibly easy for you and your clients to update.
Creating cool text effects in Squarespace with CSS (7.0, 7.1 CE & 7.1 FE)
This is a fun one! Today we’ll be looking at how we can create 3 awesome text effects in Squarespace, with just a little bit of CSS.
Fixing uneven spacing inside a narrow Squarespace section with one block (7.0 & 7.1 CE)
In today’s post, we’ll be tackling a quick fix to help you even out the misalignment on those thinner index/page sections, where there’s only one block involved.
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!
Changing the placeholder text color of form and newsletter blocks (7.0, 7.1 CE & 7.1 FE)
A few members inside the Club recently asked about how the placeholder text color of form and newsletter blocks could be altered via CSS so, in case you’ve been wondering the same thing, today I wanted to share with you how to achieve that for your own client projects!
Labeling products on a shop page in Squarespace (7.0 & 7.1)
Have you ever wanted to highlight products on a shop page to visually indicate which are new, vegan, on-demand, or up for pre-order, etc? If so, then today’s tutorial is for you!
How to easily create an alternated column blog layout (7.0 & 7.1)
In today’s post, we’ll be going from the regular grid layout we always see on the main blog pages in Squarespace, to an alternated column layout that makes things more visually interesting!
Creating an extended logo illusion in Squarespace (7.0 & 7.1)
With just a little bit of CSS, we can create the illusion that that background extends all the way out to the edge of the browser window, without having to move things from their place!
Add multi-line descriptions to any Gallery Section in Squarespace (7.1)
In today’s post, I want to show you a super easy workaround to display a title AND a short description in your 7.1 Gallery Section captions! This little trick works for all of the different Gallery Section layouts, but we’ll be breaking down the logic behind the tweak for the Slideshow: Reel layout.
How to adjust your page/index section height on mobile (7.0 & 7.1 CE)
If you like creating really immersive designs for your clients, chances are you love setting your index sections (7.0) or page sections (7.1) to the full height of your screen. The effect looks amazing on desktop but, on smaller screens, that extra space can be a little bit too much…
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…
How to make any block full width in Squarespace (7.0 & 7.1)
So, your client’s design includes some blocks that should be displayed in full width, while others stick to the boundaries of the site. And you’ve been trying to make that happen for the past couple of hours (days?) without luck? If so, then today’s tutorial is for you!
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!
Creating a simple hover mode for Gallery Strips (7.1)
We’ve covered different kinds of hover modes for blocks on this blog, but we haven’t yet touched page sections like the Gallery Sections from Squarespace 7.1… until now.
Turning a header into outline text in Squarespace (7.0, 7.1 cE & 7.1 FE)
Today’s tutorial is a fun little trick inspired by a question asked by a member inside the Club. We’ll be looking at how you can turn any heading on your client’s site into outline text! This will be a quick one, so let’s dive right into it!
Adding an image to buttons in Squarespace (7.0, 7.1 CE & 7.1 FE)
Have you ever wanted to add something extra to Squarespace buttons to make them look a bit more custom with very little effort? If so, today’s CSS trick is for you!
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!
Adding an image behind a heading in Squarespace (7.0, 7.1 CE & 7.1 FE)
For today’s CSS trick, we’ll go through how you can add an image as a background to headings on your site, so you can create a more custom design without having to sacrifice the benefits of using real text!