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 create a split layout with section dividers in Squarespace
In this free Squarespace tutorial, you’ll learn how to create a split page layout in Squarespace that responds to a section divider
How to highlight text in Squarespace
Text Highlight in Squarespace is a new feature that lets us add a creative color & design to the content inside a block of text! This video covers all 12 new design options and their settings.
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 use an image for list item in Squarespace
List sections are auto layouts that can have an image, title, description, and button. They can have a unique background color, and they can have an image too, thanks to the codes in this tutorial!
How to create a frosted glass effect for a list item in Squarespace
One of my favorite CSS tricks is the frosted glass effect - showing a slightly transparent background that blurs the image behind it. In this tutorial, I’ll teach you how to create that effect for a list item in Squarespace.
Change a page section background on a hover
Make your Squarespace site even more eye-catching with this hover effect! Learn how to change the color of a page section background on a hover in this tutorial.
How to create a pattern background in Squarespace
A background pattern can make your Squarespace site even more unique, and this tutorial will teach you how to create one with code!
How To Create A Split Page Layout in Squarespace
This tutorial will teach you how to use CSS to create a split page layout in Squarespace, showing the background image on one half of the screen and the content on the other.
How To Create A Split Page List Section in Squarespace 7.1
This tutorial will teach you how to use CSS to create a split page list section in Squarespace, showing the banner image on one half of the screen and the content on the other.
How to create an overlay scroll effect for page sections
In this tutorial, you’ll learn how to create an overlay scroll effect in Squarespace, where a page section will get “stuck” at the top of a browser, and the other content will cover it as you scroll down the page.
How to hide the background art pause button in Squarespace
In this tutorial, you’ll learn how to hide or customize the background art play/pause button in Squarespace using custom CSS.