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?
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 Create A Full-Width Scrolling Marquee in Squarespace
The scrolling marquee content block is brand new (April 2022) and in this tutorial, you’ll learn how a little bit of custom CSS for Squarespace can make that block full width, showing scrolling text from one side of the screen to the next!
How To Change Scrolling Marquee Font in Squarespace
The scrolling marquee content block is brand new (April 2022) and in this tutorial, you’ll learn how easy it is to customize the text with code!
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.
How to create scrolling announcement bar text in Squarespace
In this tutorial, you’ll learn how to create a scrolling text animation for the announcement bar in Squarespace.
How To Use Google Icons in Squarespace
In this tutorial, you’ll learn how to use any of the icons available in the Material icons database from Google in any Squarespace site
How to Customize Category Links in Squarespace
In this tutorial, you’ll learn how to customize the category links displayed on a blog post in Squarespace using CSS.
How to Customize Archive Blocks in Squarespace
In this tutorial, you’ll learn how to customize the archive block in Squarespace using CSS.
How to create gradient text in Squarespace
This tutorial will show you how to turn any text style in Squarespace into a gorgeous gradient with some clever CSS code! This works in all versions of Squarespace, including the new 7.1
How to create outline & offset text in Squarespace
In this free Squarespace tutorial, you'll learn how to create an outlined text with an offset color using custom code!
How to create a low highlight text effect in Squarespace
Sometimes called a “half highlight”, this tutorial will show you how to create text that has a solid color behind only the lower half of it.