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 two columns of content for the mobile version of Squarespace
Learn how to create two column of content for collection pages in Squarespace - products, videos, and blogs!
How to create a custom layout for mobile in Squarespace 7.1
This is one of the simplest ways to create a mobile layout in Squarespace! In this tutorial, you’ll see how two lines of code can create a super customized look specifically for mobile.
How to replace your mobile menu icon with text in Squarespace
You can replace your mobile menu icon with custom text in Squarespace and this tutorial will teach you how, step by super simple step!
Sticky Category Links for Video Collection Pages
In this tutorial we’ll use CSS to create “sticky” links that stick to the top of the browser window when you scroll through categories on a video collection page, or your online store in Squarespace 7.1
Mobile Menu on Desktop in Squarespace 7.1
In this tutorial we’ll make the mobile menu of your Squarespace site visible on desktop, and use a little code to customize it even further.
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 a custom background image for your Squarespace header
In this Squarespace tutorial, you'll learn how to use your own image for the background of the header menu (aka main navigation) of your Squarespace website.
How to use a custom font for the mobile menu in Squarespace 7.1
In this tutorial, you’ll learn how to assign a new font family to every link in the menu, including your site title and header button, and you’ll learn how to isolate just the links or just the button if that is all you want to change.
How to change the color of the social media icons in a Squarespace mobile menu
Customize the mobile menu icon color in Squarespace 7.1
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 change the color of the header button on a hover
This tutorial will teach you how to change the color of the header button on a hover in Squarespace 7.1
How to change the color of header social icons on a hover
This tutorial will teach you how to change the color of the header social icons on a hover in Squarespace 7.1
How to add a watermark to gallery images in Squarespace
This tutorial will teach you how to add a custom watermark overlay to gallery images in Squarespace 7.1
How to add a background image to a blog post in Squarespace 7.1
This tutorial will teach you how to upload your own image for blog post backgrounds in Squarespace 7.1
How to customize the read more blog post links in Squarespace
In these tutorials you’ll learn how to customize the read more links in Squarespace, turning them into a button and even replacing the words “Read more” with your own text!
How to customize gallery captions in Squarespace 7.1
In this tutorial you’ll learn how to customize the gallery captions in Squarespace 7.1