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 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 add social share buttons to a blog post in Squarespace 7.1
In this tutorial, you’ll learn how to install ShareThis social media buttons in a blog post in Squarespace 7.1
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 use the image shapes feature in Squarespace
Learn how to change an image to a specific shape in this Squarespace 7.1 tutorial on image blocks!
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
How to create a page section with two button colors in Squarespace
In this tutorial you’ll learn how to use a block ID to change the background color of a single button in Squarespace 7.1
How to create a simple text border in Squarespace
In this tutorial you’ll learn how to separate a few blocks of text with a small border. On the desktop version of the site, these blocks of text will be separated with vertical lines. On the mobile version, we’ll switch that up to horizontal lines.
How to hide project pagination in Squarespace 7.1
Pagination is the text at the bottom of a project that displays the title of the previous and next articles along with big arrow icons. This tutorial will teach you how to hide the pagination on a project in Squarespace 7.1
How to hide blog pagination in Squarespace 7.1
Pagination is the text at the bottom of a blog post that displays the title of the previous and next articles along with big arrow icons. This tutorial will teach you how to hide the pagination on a blog post in Squarespace 7.1
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.