CSS FOR SQUARESPACE
custom code tutorials
step-by-step tutorials to help you customize your squarespace website design with code
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.
Creative codes for custom event lists in Squarespace
Learn how to use custom CSS to customizing the look of event pages inside Squarespace
How to add a timezone to your Squarespace events
This super quick Squarespace code tutorial will show you how to add a time zone after the time listed for events in your Squarespace website.
How to create a colorful Squarespace blog post background
Learn how to use custom CSS to change the color of a blog post background in this simple code tutorial.
How to create vertical list sections in Squarespace
Learn how to use custom CSS in Squarespace to display horizontal list sections vertically on desktop and tablet, with optimized mobile alignment. Perfect for web designers seeking advanced layout control.
How to use an image for your Squarespace mobile menu icon
Learn how to replace the mobile menu icon with your own image in this tutorial.
How to use two font styles in the same line of text in Squarespace
Learn how to combine multiple font styles within one line of text on Squarespace.
How to create a drop cap letter in Squarespace
A drop cap character is the first letter of a block of text that is larger than the rest, designed to elevate the style of your website content. It's easy to create in Squarespace with a little custom code, and that's exactly what you'll learn how to do in this tutorial!
How to change read more link text on a Squarespace summary blocks
Change the automatic text link for a summary block with the codes from this tutorial!
How to customize the quote block in Squarespace
Learn how to modify colors and fonts in Squarespace quote blocks using CSS. Go beyond default options to create unique, eye-catching quotes that match your brand.
How to customize the newsletter block in Squarespace
Learn how to transform your Squarespace newsletter block with code. You'll be able to update fonts, colors and more with the codes from this tutorial.
How to customize a horizontal line in Squarespace
In this Squarespace tutorial, you’ll learn different ways to enhance your line block, including adding a shadow, changing its height, creating a double line, and even creating a dotted line using custom CSS.
How to add a background image to a Squarespace form
Learn to enhance your Squarespace forms by adding a custom background image.
How to customize the file upload field in a Squarespace form
Learn how to easily add a file upload feature to your Squarespace form. This step-by-step guide includes CSS customization tips for a seamless user experience. Boost your form functionality today!
How to customize Squarespace contact form fields
In this tutorial, you’ll learn how to customize the colors used in a Squarespace contact form block.