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 customize a horizontal line block 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 customize accordion block divider lines in Squarespace
In this tutorial you’ll learn how to turn the solid accordion divider into a unique border or even a fancy linear gradient.
How to create hover effects for portfolios in Squarespace
In this tutorial, you’ll learn how to use custom CSS (Cascading Style Sheet) code to create unique style changes that will happen when someone hovers their cursor over a project thumbnail image on a portfolio grid on your Squarespace website.
We’ll create text effects and image filter ideas that you can customize to make your portfolio grid uniquely yours.✨
How to customize the portfolio project thumbnails in Squarespace
In this tutorial, you’ll learn how to customize the look of a project thumbnail inside a grid portfolio in Squarespace. You’’ learn how to change the shape, give it a border, and even add a simple hover effect with a shadow!
How to add a border to the promo pop-up in Squarespace
In this super quick tutorial, you'll learn how to use one simple line of code to add a border to the promo pop-up in Squarespace.
How to add a border to a product in Squarespace
In this tutorial, we’ll add a border, box-shadow, and curve the corners of the product image with a border-radius.
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 add a border to Squarespace
You can add a border to anything in a Squarespace site using custom CSS, even the whole page! This tutorial will teach you how.
How to customize a calendar in Squarespace
Calendar blocks can display blog posts, products, images, and events that are scheduled or have already happened. There are not many options for customizing the look of this Calendar in Squarespace, but with the codes in this video, you’ll be able to update a calendar block with colors, borders, and more!
How to customize a markdown block in Squarespace
Markdown blocks are a creative way to add content to your site, and this tutorial will help you customize it so the content inside can have its own unique style!
How to change the scrollbar color in Squarespace
Scroll bar styles are a super easy thing to customize in your Squarespace site and this tutorial will teach you how!
How to create curved collage card corners in Squarespace
In this tutorial, you’ll learn how to add a curved edge to an image card in Squarespace.