CSS FOR SQUARESPACE
custom code tutorials
step-by-step tutorials to help you customize your squarespace website design with code
How to customize the hyperlinks in your Squarespace text blocks
Transform boring default hyperlinks into eye-catching design elements with these 3 simple CSS tricks. Learn how to create custom-colored underlines, background highlights, and wavy effects that match your brand and enhance your Squarespace website's user experience.
How to create a countdown timer in Squarespace
Squarespace doesn't have a built-in countdown timer, but with this simple code snippet, you can add a fully customizable countdown to create urgency and excitement on your site!
How to customize your search bar & search results page in Squarespace
Transform your basic Squarespace search bar into a branded design element with simple CSS tricks. These custom codes make your website more professional and uniquely yours.
How to move your mobile menu links to the top
With a simple code snippet, you can move the links in your mobile menu to the top of the screen instead of the middle.
How to customize archive blocks
Learn how to add backgrounds, borders, custom fonts, and interactive hover effects to create eye-catching archives that match your brand. Step-by-step tutorial with copy-paste code examples!
How to change the style of your blog post title
Learn how to create stunning gradient, outline, and splice effects for your Squarespace blog titles. Step-by-step CSS tutorial with code examples and Site Styles tips.
How to Customize Individual Elements in Squarespace 7.1
In this blog post, you'll learn how to customize individual elements on your Squarespace website using CSS, no matter what plan you're on.
Squarespace List Sections: The Ultimate Guide to People Sections in Squarespace 7.1
Learn how to use Squarespace list sections in version 7.1. Step-by-step guide to layouts, design options, and custom code tips for creating professional content displays.
How to Customize Squarespace Buttons: The Ultimate Guide for 2025
Learn how to transform your Squarespace buttons using site styles and custom CSS. From basic design tweaks to advanced hover effects, master button customization today!
How to add an H5 & h6 text type to Squarespace (and how to customize it with code!)
Add H5 and H6 headings to your Squarespace site using markdown or code blocks, plus learn how to customize their appearance with CSS for perfect typography hierarchy.
Two creative ways to animate a Squarespace announcement bar
Transform your static Squarespace announcement bar into an attention-grabbing animated element with two simple CSS code snippets. Perfect for highlighting sales, events, or important updates!
How to add images to your Squarespace dropdown
Transform your Squarespace navigation with custom dropdown menus featuring multiple columns, section headers, and branded icons. Learn how to create an organized, visually appealing navigation system.
How to use a custom font in Squarespace
Transform your Squarespace website with custom fonts using three powerful methods: a secret font menu trick, Google Fonts integration, and custom font files. Learn professional implementation strategies for unique typography that matches your brand.
How to customize the chart block in Squarespace
In this tutorial, you’ll learn how to create custom borders and backgrounds for a chart block in Squarespace.
How to create a full screen menu on all devices
In this tutorial, I am going to walk you through the step by step process you can take to create a full-screen menu on the desktop version of your Squarespace website.
How To Create A Text Popup in Squarespace
Showing additional info in a popup is a great way to give visitors more information without cluttering your page. It's also an effective way to make sure your user experience is as smooth as possible. But did you know that you can create custom text-only popup using CSS?
Creative customizations for your mobile menu icon
From adding a circular background and changing line colors to rounding corners and replacing the icon with your own image, this tutorial will show you creative ways to customize the mobile menu icon for your Squarespace site.
How to Customize the "View Event" Button on Squarespace
In this tutorial, you’ll learn how to modify the style of the view event button in Squarespace with your own custom code.
How to Add a Gradient Overlay to Squarespace Background Images
Learn how to add professional gradient overlays to Squarespace page section backgrounds using custom CSS code. This step-by-step tutorial shows you how to enhance your hero images with customizable gradients that improve text readability and create stunning visual effects on your Squarespace website.
How to Use Your Own Icon for the Accordion Block in Squarespace
In this tutorial, you’ll learn how to use your own custom icons for the accordion block in Squarespace, both the open & closed states.