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 use an image for a button background in Squarespace
This tutorial will show you how to use an image for a button background in Squarespace and works for both version 7 and 7.1
How to create a floating newsletter block in Squarespace
In this tutorial, you'll learn a popular layout trick where we use layering to create a newsletter block between two sections in Squarespace.
How to add a background image to the header in Squarespace
This tutorial will show you how to use an image as the background of your header in Squarespace 7.1 and older sites built with 7.0 on the Brine theme
How to create two columns of text in Squarespace
In this tutorial, I am going to show you how to create multiple columns of text in any version of Squarespace!
How to create a text shadow in Squarespace
In this tutorial, I am going to show you how to add a shadow to any text style in Squarespace with some clever CSS code!
How to create custom bullet points in Squarespace
In this tutorial, we are going to use a little simple CSS to create custom bullet points in Squarespace. But we are even going to go a step further and customize them for each different text type! This works in all versions of Squarespace, including the new 7.1
How to Create an Instagram Link Page in Squarespace
In this tutorial I wanted to show you how you can turn a regular page into an Instagram landing page, featuring your business name or logo and a few important buttons.
How to Create a Full Width Instagram Feed in Squarespace
This tutorial will show you how to create a full-width Instagram feed in Brine, Bedford & site built with version 7.1
How To Create a Three Column Footer in Squarespace 7.1
This tutorial will show you how to create a flexbox footer so you can have two and three column footer layouts on your Squarespace site!
Creating A Three Column Footer Layout in Squarespace 7 (Brine Theme)
This tutorial will show you how to create a flexbox footer so you can have two and three column footer layouts on your Squarespace site!
How to Create Page Section Borders in Squarespace 7.1
Learn how to create unique borders between individual sections of a page in Squarespace 7.1 sites.
How to use an image for your mobile menu icon in Squarespace 7.1
This tutorial will show you how to change your mobile menu to an image without losing any of the menu functionality! This is specific for Squarespace 7.1 sites.
How to Replace Your Mobile Menu Icon in Squarespace 7
This tutorial will show you how to change your mobile menu to an image without losing any of the menu functionality! This is specific for Squarespace 7 sites.
How To Create Gradient Page Sections in Squarespace 7.1
This tutorial will show you how to create gradient section backgrounds in Squarespace 7.1 using a clever CSS trick called a psuedo class.
How To Create A Gradient Index Page in Squarespace - Brine Theme Only
In this tutorial, we are going to add a gradient overlay to the banners on an index page in a Brine template
How to Create Zoom Hover Effects for Image Galleries in Squarespace 7.1
This tutorial will show you how to create a zoom-in hover effect for gallery images specifically in Squarespace 7.1
How to create image zoom hover effects for Squarespace
In this tutorial, I will show you how to create a zoom-in hover effect for on-page images in Squarespace, both version 7 and the new 7.1
How to create filter hover effects for image galleries in Squarespace 7
This tutorial shows you how to create filters and hover effects for on-page image slideshows in Squarespace 7 sites, like Brine and Bedford theme templates.
How to change the color of gallery arrows in Squarespace 7
This tutorial shows you how to change the color of the gallery arrows for on-page image slideshows in Squarespace 7 sites like Brine theme templates.
How to change the color of gallery arrows in Squarespace 7.1
This tutorial shows you how to change the color of the gallery arrows on image slideshows in Squarespace 7.1