CUSTOM CSS FOR SQUARESPACE
Custom Layout Tutorials
CSS changes the look of a site, but not the functionality, making it perfect for creating unique layouts that aren’t standard in Squarespace. From header and footer codes to split pages and more, this collection of code tutorials will help you create a unique looking site!
Brand new to custom CSS?
In this tutorial, I'll show you how to add custom excerpts to your chapter titles using a bit of CSS magic.
In this tutorial, you'll learn how to customize the navigation link colors on your Squarespace website using simple code. We'll update all the links, the dropdown links, the account login link, and the mobile links separately. I'll also show you how to add this code to a single page.
In this tutorial, you’ll learn how to create a dropdown menu in Squarespace 7.1 I'll walk you through the step-by-step process of creating a dropdown menu, in your navigation & adding pages to that. menu. Then – the fun part – customizing it with a touch of code magic!
This video tutorial shows you how to embed & customize multiple images within Squarespace accordions using simple code. Learn to adjust image size, placement, and even remove images from specific items. Perfect for showcasing products, portfolios, or adding visual interest to your FAQs.
This advanced training will show you how to create a landing page in Squarspace with it’s own header & footer navigation!
This tutorial will show you how to use Squarespace Blueprint to build a website using AI.
Background images are a powerful design tool, adding personality, depth, and visual interest to your Squarespace website. In this tutorial, you'll learn two ways to add captivating background images to your Squarespace pages.
In this tutorial, you’ll learn how to create a transparent header in Squarespace using the built in settings and custom CSS.
This tutorial will show you how to add a simple sidebar to your Squarespace website using a summary block.
This tutorial will show you how to add a back to top or scroll to top button on any page in your Squarespace website.
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!
In this tutorial, you’ll learn how to use custom code to replace the logo on specific pages of your Squarespace website.
In this tutorial, you’ll learn how to use CSS to change the colors of the social media icons in your Squarespace menu, including cool hover effects!
In this tutorial, you’ll learn how to use CSS to split your main menu links, showing half to the left of the logo and half to the right.
In this tutorial, you’ll learn how to create hover effects for the title or log of your Squarespace website.
In this free Squarespace tutorial, you’ll learn how to create a floating header in your Squarespace website. This will place your logo and links above the content of your page on both desktop and mobile.
In this quick tutorial, learn how to customize the lesson footer in your Squarespace course with CSS! You'll learn how to change the color and position of the footer button and alter the footer's background color to match your site's design.
Learn how to change the order of text in your blog grid with CSS in this step-by-step tutorial from InsideTheSquare.co
Learn how to create a custom font style for your Squarespace blog title in this step-by-step tutorial from InsideTheSquare.co
Learn how to create a full-width blog image in Squarespace with this tutorial. Perfect for bloggers and website owners looking to enhance their design.
This tutorial teaches you how to customize product variant buttons on your Squarespace online store with CSS. Learn how to change the size, shape, color, and font of the buttons, as well as create hover effects to make them pop. This code can be customized for any Squarespace website so it looks uniquely yours.
In this tutorial, you’ll learn how to use CSS to change the look of the shopping cart page in Squarespace. We’ll be editing the colors, fonts, and event modifying the layout with custom code.
In this tutorial, you’ll learn how to create more dynamic layers in Squarespace by adding custom shadows to shape blocks! This tutorial will teach you how to create the code, add it to your site, and customize it so it’s uniquely yours.
In this tutorial, you’ll learn how to use CSS to stack blog pagination on mobile screens for a Squarespace website.
In this tutorial, you’ll learn how to use custom CSS to change the color of the lightbox for image blocks and galley sections on a Squarespace website.
With a gallery section and some clever custom CSS, you can make an eye-catching horizontally scrolling set of images in Squarespace!
In this tutorial, you’ll learn how to add text to the previous and next links in your Squarespace blog. This is a great way to personalize your website and make it uniquely yours!
In this tutorial, you’ll learn how to turn the event Google and iCal event links in Squarespace into buttons using CSS.
In this tutorial, I'll show you how to customize the width of a blog post for tablet screen sizes.