LET’S MAKE SQUARESPACE UNIQUELY YOURS
Free custom CSS codes for Squarespace
Squarespace is called a "no code" platform - but without code, a lot of Squarespace websites look like the same boring template. 😬
Custom CSS is how the pro's make one of a kind sites that sell for thousands. But I'll let you in on a little industry secret . . . you don't have to be a pro designer to use code! All you need is an expert (that's me) to show you the ropes. The blog is a collection of my step-by-step custom code tutorials for Squarespace. If you want to change one little thing to make your site perfect - and the design menu just won’t cut it - this where you’ll find the info you need!
explore by category
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.
How to turn blog category & tag links into clickable buttons
Learn how to transform Squarespace blog categories and tags into interactive buttons using custom CSS.
How to add a tagline to Squarespace 7.1
Add a tagline to your Squarespace site with this simple custom code!
Creative Ways to Customize Your Squarespace Product Page
Learn five creative ways you can customize your Squarespace product page with code.
How to hide one content block on mobile or desktop
Learn how to hide any Squarespace content block on mobile devices (or desktop!) with a simple code snippet.
How to improve site search results with Monocle
Transform your Squarespace site's search functionality with Monocle Search! Learn how to easily implement powerful search features in this step-by-step tutorial.
How to add an image inline with text in Squarespace
This tutorial will show you how to use a markdown block to place an image in a line of text in a Squarespace website.
How to add a border to your gallery section images
Learn how to add custom borders to Squarespace gallery images using simple CSS code - perfect for photographers, designers, and business owners looking to enhance their portfolio or product displays.
How to customize your website header button
Learn how to customize your Squarespace navigation button with CSS. This step-by-step tutorial shows you how to change button colors, add hover effects, and style both desktop and mobile versions. Perfect for creating stylish CTAs that match your brand – no coding experience required!
How to create a two line gallery caption
In this tutorial, you’ll learn how to use custom CSS to create two-line image descriptions in your gallery section.
How to make a dropdown title clickable in Squarespace
A folder of content in your Squarespace menu creates a drop-down, but that folder doesn't have a URL so it can't be a clickable link. But with a little bit of creative CSS, we can make it clickable anyway!
How to create a multiple-column dropdown in Squarespace
This Squarespace tutorial guides you step-by-step through creating a user-friendly, two-column dropdown menu. Learn how to organize your website content logically, improve navigation, and provide a smoother browsing experience for your visitors. Boost usability and make your Squarespace website shine!
How to create split navigation in Squarespace 7.1
In this tutorial, you’ll learn how to use CSS to create the illusion of two navigation menus, showing half to the left of the logo and half to the right.
How to create a custom mobile layout in Squarespace
This is one of the simplest ways to create a mobile layout in Squarespace! In this tutorial, you’ll see how two lines of code can create a super customized look specifically for mobile.
How to create anchor links in Squarespace
Anchor links work by naming a section of a page, and when clicked, pulls that "anchor" to the top of the browser window. Learn how to easily create on using Squarespace in this tutorial from InsideTheSquare!
How to customize your blog post pagination links in Squarespace 7.1
In this tutorial, you’ll learn to modify fonts, add text, change colors, and replace icons for your blog post pagination. This tutorial includes mobile optimization tips and code samples for easy implementation.
How to create image overlay hover effects for Squarespace
Learn how to create custom hover effects for your Squarespace image blocks in this free code tutorial from InsideTheSquare.