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 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 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 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 an alternating color accordion block in Squarespace
Squarespace Accordion blocks don’t have to be basic! You can use custom code to create a colorful one, and this tutorial will teach you how.
How to add a button to an accordion block in Squarespace
Did you know that you can change the active link in an accordion block to look like an actual clickable button, hover effects, and all?! It’s actually super simple and super customizable, 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.
How to create button hover effects in Squarespace
In this tutorial, you’ll learn how to create a custom button hover effect in Squarespace.
Add image inline with text in Squarespace
This tutorial will show you how to use a markdown block to place an image in a line of text in a Squarespace website.
Image Overlay Hover Effect for Squarespace
In this tutorial, you’ll learn how to create a color overlay hover effect in Squarespace.
Add An Icon to a Button in Squarespace
In this tutorial, you’ll learn how to add an icon to a button in Squarespace.
How To Add An Inset Border to Images in Squarespace
In this tutorial, you’ll learn how to create an inset border for images on your Squarespace site.
How To Add Google Icons to Squarespace
In this tutorial, you’ll learn how to use Google Material Symbols (formerly Google Material Icons) on any Squarespace site.
How To Add An Inset Border to Anything in Squarespace
In this tutorial, you’ll learn how to create an inset border for literally anything in your Squarespace site.
How to customize the login button for a Squarespace member area
When you build a member area in Squarespace, you’ll get the option to add a “login” link to the top of your site. While that’s great, it’s a super boring text link! Luckily this tutorial will help you change that. 😎
How to Customize Summary Blocks in Squarespace
As great as the summary block feature is, the built in design can be pretty...well, boring! In this tutorial, we’re going to check out the selectors behind these summary blocks and use some custom code to make them look awesome.
How to have multiple buttons on an image block in Squarespace
In this tutorial, you’ll learn how to create multiple buttons for one image block in Squarespace.
How to use a custom font in Squarespace
In this tutorial, you’ll learn how to install your own font in Squarespace.
How to customize the quote block in Squarespace
In this tutorial, you’ll learn how to customize the look of a quote block in Squarespace.
How to customize the chart block in Squarespace
In this tutorial, you’ll learn how to create custom borders and backgrounds for a chart block in Squarespace.