FREE SQUARESPACE TUTORIALS
Learn how to customize Squarespace with CSS
Welcome to my collection of free Squarespace css tutorial videos here InsideTheSquare!
Browse by category below, or search for exactly what you need.
BROWSE BY CATEGORY
- Tablet
- Version 7
- Version 7.1
- accordion
- alert
- align
- animation
- announcement bar
- archive
- audio
- background
- backgrounds
- blocks
- blog
- blur
- border
- borders
- button
- button styles
- buttons
- calendar
- caption
- cart
- chart
- checkout
- collection
- collection page
- color
- colors
- content
- cookie
- cookie alert
- countdown
- countdown timer
- course
- css
- custom
- date
- design
- desktop
- digital product
- divider
- donation
- donation block
- dropdown
- e-commerce
- elfsight
- embed
- event
- events
Brand new to custom CSS?
How to add a chapter description to a course overview page
In this tutorial, I'll show you how to add custom excerpts to your chapter titles using a bit of CSS magic.
How to create a numbered accordion block in Squarespace
This tutorial will show you how to create a stylish numbered accordion in Squarespace.
How To Customize Squarespace Product Add-On
Learn how to change background colors, add curved borders, customize fonts, adjust thumbnail sizes, and even create hover effects for your product add-on options using Squarespace CSS.
Five Creative Header Button Hover Effects
This short tutorial video will walk you through 5 unique code snippets that add a touch of flair to your header buttons. The goal here is to grab your visitors' attention and encourage them to click. Each one of these codes can be updated to match the style of your unique website, and in this video you’ll learn exactly how to use them.
How to customize Squarespace list item fonts
Squarespace list sections have limited options when it comes to fonts, unless you use custom CSS! In this tutorial, you’ll learn how to update your Squarespace list section style by changing the font for individual parts of a list item.
How to use custom images for Squarespace list section arrows
Squarespace list sections are a great way to showcase content, but the default arrows might not always match your website's unique vibe. You can change the color using the design settings in Squarespace, and you can do even more with custom CSS!
How to add an image inside an accordion block
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.
How To Create A Landing Page in Squarespace: Easy To Follow Squarespace Landing Page Tutorial
This advanced training will show you how to create a landing page in Squarspace with it’s own header & footer navigation!
How to build a website with AI: Squarespace Blueprint Review
This tutorial will show you how to use Squarespace Blueprint to build a website using AI.
How to create a blog post sidebar in Squarespace
This tutorial will show you how to add a simple sidebar to your Squarespace website using a summary block.
How to create a back to top button in Squarespace
This tutorial will show you how to add a back to top or scroll to top button on any page in your Squarespace website.
How to align content in Squarespace
Aligning objects within a single content block as well as between multiple content blocks is now easier than ever before in Squarespace thanks to the new alignment feature!
How to embed an Instagram reel into Squarespace
In this Squarespace tutorial, you'll learn how to add an Instagram reel to a blog post. I use a 7.1 version site in this tutorial, but the process is the same for older versions of Squarespace.
How to change the background of a menu block in Squarespace
A premium feature for business and commerce plans, the menu block is a content block type that can display text in unique layouts featuring different sections with titles, items, descriptions and prices. This tutorial will teach you how to customize the background of that menu block, adding a solid color, gradient, and your own image.
How to add text before a price in Squarespace
The product content block in Squarespace makes it easy to promote a product on any page, and in this tutorial, you’ll learn how to customize it even more. In this tutorial, we are going to use some CSS to add text both before and after the price.
Creating Shapes in Squarespace
In this Squarespace tutorial, you’ll learn all about the brand-new Shape content block in Squarespace! I’ll show you how to add it to a page section on your site, how to change the shape and color, how to add a drop shadow, and how to layer it with other content.
How to create list item shapes in Squarespace
Just because it’s built with Squarespace, doesn't mean a list section has to be square ;) In this step-by-step tutorial, you’ll learn how to create a unique shape for a list item using custom CSS.
How to add an animated number counter to Squarespace
Squarespace can do a lot, but it can’t do it all! That’s where Elfsight comes in handy. In this video, you’ll learn how to create, customize, and install an animated number counter in Squarespace using Elfsight.
How to wrap text around an image in Squarespace
In Squarespace, you can add an image on top of a text block, but when it resizes everything gets changed! This tutorial will teach you how to wrap text around that image so it will look great on every size device.
How to create a horizontal timeline in Squarespace
Timelines are a popular design choice for all kinds of websites, but Squarespace doesn’t have that feature built into their program. Luckily, this tutorial will teach you how to make your own using a list section in Squarespace 7.1 and a little bit of custom CSS!