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 Bullet Points in Squarespace
Are you tired of using those same boring bullet points on your Squarespace website? Have you ever wished that customizing them was as easy as changing font color, style and something a little more unique than a dot? Well, now it is!
How to Create a Jump-To-Recipe Button on Your Squarespace Blog
Adding a Jump To Recipe button on your Squarespace blog is simple and straightforward once you know how! By utilizing the code block in Squarespace to create your anchor link, you can quickly create an organized website with helpful features to keep readers engaged with all of the delicious recipes posted on your site.
Squarespace vertical video hack: how to use vertical video in Squarespace 7.1 (updated for 2024)
Have you ever wondered how to change the video block size in Squarespace? If so, this blog post is for you! In this post, we'll walk through the steps of changing video block size using custom CSS.
New Video Block Options in Squarespace
Blink, and you’ll miss it - another Squarespace update happened! Video blocks got a huge upgrade and I’m breaking down everything you need to know about the update in my latest blog post!
Rotating Content Blocks in Squarespace with CSS
In this Squarespace tutorial, you’ll learn how to use some simple CSS to rotate literally anything on your Squarespace website!
How to make anything transparent in Squarespace
Have you ever wanted to make something on your Squarespace website transparent? With the opacity property in CSS, you can easily do that, and this tutorial will teach you how!
How to curve the corner of every image in Squarespace
In this free Squarespace tutorial, you’ll learn how to curve the corners of any and every image on 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 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.
How To Customize The Sale Label in Squarespace 7.1
When you have an item on sale in your Squarespace store, the product will get a SALE label next to its price. This video will show you how to change the color and size of that label, and how to move it above the image on desktop and mobile!
How to change a text block background in Squarespace
In this Squarespace tutorial, you’ll learn how to change a text block background color. We’ll use CSS change to color, create a gradient color, and you’ll learn how to upload your own image to use for the background of a text block.
How to create custom cart icon hover effects in Squarespace
Squarespace has a built-in hover effect for the cart icon in the header of your website, and this tutorial will teach you how to make it even better!
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.
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.
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 add a countdown timer 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 a countdown timer in Squarespace using Elfsight.
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.