Tutorials
Find a new fix, CSS trick, workflow tip, or resource recommendation for your Squarespace client projects.
(Part 2) Stop code from working in the backend of a Squarespace 7.1 site
Learn how to stop custom CSS from working in the backend of Squarespace 7.1 while keeping it active on the Live Site. In this tutorial you’ll learn how to use .sqs-edit-mode and the :not() pseudo-class to control when your code applies. Let’s do it!
(Part 1) Disable code automatically while editing a Squarespace 7.1 site
Learn how to apply custom code only while in Edit Mode or only on the Live Site in Squarespace 7.1. This tutorial will show you how to use .sqs-edit-mode, .sqs-edit-mode-active, and the :not() pseudo-class to control when your CSS runs and when it shouldn’t. Get started with the first part!
Fixed background image effect for sections in Squarespace 7.1 (aka, Parallax)
Squarespace includes a native parallax option, but if you’ve ever used it, you’ve probably noticed that background images still move, just more slowly than the rest of the content. If what you’re really after is a completely fixed or layered background effect, the native tools won’t quite get you there.
In this tutorial, you’ll learn how to create a true fixed-background parallax effect in Squarespace 7.1 using CSS only. We’ll replace the section’s default image behavior, pin the background in place, and allow the content to scroll smoothly over it.
Show adjacent slides on mobile for 7.1 Auto Layout Carousels
In this tutorial, you’ll learn how to bring the desktop adjacent slides effect for Auto Layout Carousels to mobile. We’ll walk through how Squarespace controls overflow on small screens, why adjacent slides disappear, and how to override those rules without affecting the desktop layout, just with CSS.
Quick Masonry layout for Product pages in Squarespace 7.1
Want to create a Masonry-style product layout in Squarespace with CSS? In this tutorial, you’ll learn how to do that by using column-count to condense the spacing, override the native grid, prevent item breaks, and make the layout fully responsive across desktop, tablet, and mobile devices.
Multiple aspect ratios for Product page images in Squarespace 7.1
Squarespace Product pages don’t support mixed image aspect ratios at the moment… but CSS does.
This tutorial shows you how to remove the forced crop, restore native image proportions, and make sure everything works on the live site (not just in edit mode!).
Custom button for Portfolio items in Squarespace 7.1
Want to add buttons to your Squarespace Portfolio items with a simple CSS trick?
This method will show you not just how to create custom buttons, but also how to sync them with your existing button styles using Squarespace variables. Take a look!
Easy custom cursor for specific elements or sections in Squarespace
Learn how to add a custom cursor to Squarespace, but display it only where you want it to show.
This tutorial walks you through how to target specific elements or sections using just three lines of CSS, so you can implement a quick interactive modification to client sites in a few minutes.
Custom arrows for Summary Block Carousels in Squarespace
Learn how to replace the default Summary Block Carousel arrows in Squarespace with custom image-based arrows using CSS. This tutorial breaks down the structure of the carousel controls and shows how to override them cleanly and easily.
Squarespace 7.1 Auto Layout Lists: Spotlight Hover Effect
Learn how to create a spotlight-style hover effect for Auto Layout Lists in Squarespace 7.1 using CSS only. This subtle interaction fades surrounding cards while keeping the hovered card in focus!
+5 awesome 2025 Black Friday deals for BUSY Squarespace designers
This Black Friday offer roundup is made for busy Squarespace designers with packed calendars, like you. Inside this hand-picked collection of time-saving plugins, mini-courses, and services, you’ll find different options to streamline your workflow with minimal time investment.
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.
Removing the space under code blocks in Squarespace when using Fluid Engine (7.1)
Want to get rid of the extra space under that code block in Squarespace 7.1 where you just added a widget with a script? Ok! Let’s do it.
Keeping centered navigation links in one single line, in Squarespace (7.1)
Struggling to keep your 7.1 navigation links in one single line? Not anymore! With this week’s CSS trick you’ll be able to fix that little issue in a hearbeat.
How to center-align the last two items of a Portfolio page in Squarespace (7.1)
For this week’s CSS trick, we’ll be using the same grid-altering method from a previous tutorial but with a small modification to the way we target those last two slides so that, if you or your client have a ton of items, you don’t have to count them all.
How to create “Read More” dropdowns inside Auto Layouts (7.1)
Have you ever wanted to show/hide information inside the description area of Auto Layouts in 7.1 on click? If yes, you won’t want to miss out on this tutorial!
Styling and bottom-aligning ‘Read More’ links for the Basic Grid Blog in Squarespace (7.1)
Want to style the basic grid blog Read More links in Squarespace 7.1? Then today’s CSS trick is the one you’ve been looking for! Check it out.
How to modify the space between the header social icons in Squarespace (7.1)
Looking to modify the spacing between social icons in Squarespace 7.1’s header? Then take a look at today’s CSS trick!
Stopping portfolio page thumbnails from getting cropped in Squarespace (7.1)
Not your everyday issue, but an annoying one when it comes up unexpectedly when working with Portfolio pages in Squarespace 7.1. Check out how you can fix it in less than 2 mins!