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 image filter hover effects in Squarespace
In this tutorial I am going to show you how to use custom CSS to apply an image filter specifically on a hover for your on page images in Squarespace.
How to add color behind an image in Squarespace
In this tutorial I am going to show you how to use custom code to create a block of color slightly offset behind an image in Squarespace.
How to rotate an image title in Squarespace
In this tutorial I am going to show you how to rotate an image title in your Squarespace website using a little custom CSS. This tutorial covers both version 7.1 an older sites built with the Brine theme in version 7.
How to place an image between index pages in Squarespace (Brine Theme Templates)
In this tutorial you'll learn how to use custom CSS to pull an image up so it hovers between two index pages in your Brine theme Squarespace site.
How to place an image between sections in Squarespace version 7.1
In this tutorial I am going to show you how to use custom CSS to pull an image up so it hovers between two sections in Squarespace version 7.1
How to Resize Images on Mobile in Squarespace
In this tutorial, you'll learn how to use custom CSS to change the size of an image specifically on mobile devices.
How to Center Footer Text on Mobile in Squarespace
In this tutorial I am going to show you how to use some custom CSS to center all the text in your Squarespace footer specifically on mobile devices. This tutorial covers both version 7.1 an older sites built with the Brine theme in version 7.
How to create equal-width buttons in Squarespace
In this tutorial I am going to show you how to use some custom CSS to create equal width buttons in your Squarespace site, and how to apply this code to just the mobile version too!
How to edit the mobile folder icon in Squarespace
Learn how to use custom CSS in Squarespace to change the color of the folder arrows on your mobile menu, and how to change it to something completely different!
How to use a different background image on mobile in Squarespace
Learn how to use custom CSS in Squarespace to change a section background image on mobile devices.
How to create a frosted glass header in Squarespace
In this tutorial I am going to show you how to use some custom CSS to create a frosted glass website header on your Squarespace website.
How to give buttons a frosted glass effect in Squarespace
In this tutorial I am going to show you how to use some custom CSS to create a frosted glass buttons with a hover effect on your Squarespace website.
How To Create Anchor Links in Squarespace
Anchor links work by naming a section of a page, and when clicked, pulls that "anchor" to the top of the browser window. Learn how to easily create on using Squarespace in this tutorial from InsideTheSquare!
How to create custom background text for page sections in Squarespace 7.1
This tutorial will show you how to create background text for sections in Squarespace 7.1. That’s text that will show up behind images and other text on your site, but in front of your section background color and/or images.
How to focus blurry text on a hover in Squarespace
This tutorial will show you how to use text shadow effects to create blurry text that will focus on a hover.
How to create a typing text animation in Squarespace
This tutorial will show you how to create a typing text effect in Squarespace, where a block of text will appear to be typed onto the page after it loads.
How to change your header social icon colors in Squarespace
This tutorial will show you how to change the color of your social media icons inthe header of your Squarespace website.
How to show a different logo on a single page in Squarespace - Brine Theme
This tutorial will show you how to change the logo on a single page on a Squarespace website built with the Brine theme.
How to add a mobile menu background image in Squarespace
This tutorial will show you how to use an image for your mobile menu background in Squarespace, both 7 & 7.1!
How to create offset image borders in Squarespace
This tutorial will show you how to create a border or frame for an image in Squarespace that sits slightly offset from the image itself.