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 add a Background Image to A Squarespace Gallery Section
Learn how to add a custom background image to your Squarespace gallery section with this easy-to-follow tutorial.
How to create a full width event page in Squarespace 7.1
This tutorial shows you how to create a full width event page in Squarespace version 7.1 using custom CSS
How to create filter hover effects for image galleries in Squarespace 7.1
This tutorial shows you how to create filter effects for gallery images in Squarespace 7.1 and how to use them for really cool looking hover effects.
Squarespace Gallery Section Tutorial
This tutorial shows you how to create filter effects for gallery images in Squarespace 7.1 and how to use them for really cool looking hover effects.
How To Customize Squarespace Product Add-On
Learn how to change background colors, add curved borders, customize fonts, adjust thumbnail sizes, and even create hover effects for your product add-on options using Squarespace CSS.
Five Creative Header Button Hover Effects
This short tutorial video will walk you through 5 unique code snippets that add a touch of flair to your header buttons. The goal here is to grab your visitors' attention and encourage them to click. Each one of these codes can be updated to match the style of your unique website, and in this video you’ll learn exactly how to use them.
How to customize Squarespace list item fonts
Squarespace list sections have limited options when it comes to fonts, unless you use custom CSS! In this tutorial, you’ll learn how to update your Squarespace list section style by changing the font for individual parts of a list item.
How to use custom images for Squarespace list section arrows
Squarespace list sections are a great way to showcase content, but the default arrows might not always match your website's unique vibe. You can change the color using the design settings in Squarespace, and you can do even more with custom CSS!
How to add an image inside an accordion block
This video tutorial shows you how to embed & customize multiple images within Squarespace accordions using simple code. Learn to adjust image size, placement, and even remove images from specific items. Perfect for showcasing products, portfolios, or adding visual interest to your FAQs.
How to add a full background image to Squarespace - including the header & footer!
Background images are a powerful design tool, adding personality, depth, and visual interest to your Squarespace website. In this tutorial, you'll learn two ways to add captivating background images to your Squarespace pages.
How to customize a light box contact form in Squarespace
In this tutorial you’ll learn how to customize the look of a light box contact form on your Squarespace website. We’ll be using custom CSS to change the overlay color, add a border, and update the style of the form title.
How to add a background image to a Squarespace form
In this tutorial, you’ll learn how to use custom code to add a background image to contact forms on your Squarespace website.
How to customize active form fields in Squarespace
In this tutorial, you’ll learn how to use custom code to remove the automatic outline for active form fields and customize it to match your own unique style.
How to create a sliding page animation in Squarespace
In this tutorial, you’ll learn how to use custom code to create a sliding page animation for your Squarespace website.
How to use a custom logo for your mobile menu
In this tutorial, you’ll learn how to use custom code to show an alternative version of your logo when your mobile menu is open.
How to change your logo on a specific page in Squarespace
In this tutorial, you’ll learn how to use custom code to replace the logo on specific pages of your Squarespace website.
How to add a background to your announcement bar
In this free Squarespace tutorial, you’ll learn how to use an image for the background of your announcement bar in Squarespace
How to feature an image on your announcement bar
In this free Squarespace tutorial, you’ll learn how to feature an image on your announcement bar.
How to create a two line gallery caption
In this tutorial, you’ll learn how to use custom CSS to create two-line image descriptions in your gallery section.
How to create hover effects for portfolios in Squarespace
In this tutorial, you’ll learn how to use custom CSS (Cascading Style Sheet) code to create unique style changes that will happen when someone hovers their cursor over a project thumbnail image on a portfolio grid on your Squarespace website.
We’ll create text effects and image filter ideas that you can customize to make your portfolio grid uniquely yours.✨