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 second button to your Squarespace menu
In this tutorial, you'll learn how to add a second button to your Squarespace website.
How to use an image for your Squarespace mobile menu icon
In this tutorial, you'll learn how to swap out the default mobile menu icon for your very own custom image.
How to customize blog post width on tablet screens
In this tutorial, I'll show you how to customize the width of a blog post for tablet screen sizes.
How to add a chapter description to a course overview page
In this tutorial, I'll show you how to add custom excerpts to your chapter titles using a bit of CSS magic.
How to create a numbered accordion block in Squarespace
This tutorial will show you how to create a stylish numbered accordion in Squarespace.
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.
10 creative ways to customize your Squarespace course lesson page & sidebar navigation
Learn how to use custom CSS to customize the course lesson page and sidebar navigation style in Squarespace.
How to customize the donation block in Squarespace
Learn how to use custom CSS to customize the content inside a Squarespace donation block, including alignment and colors.
How to Customize Your Squarespace Cookie Alert
In this tutorial, you'll learn how to customize your Squarespace cookie alert. We'll adjust the text, button labels, disclaimer text size, and color themes directly within the editor. Then we'll dive into custom coding to further personalize your cookie alert, including changing background colors, button styles, and the Manage Cookies overlay.
How to create hover effects in Squarespace
Learn how to use custom CSS to create interactive buttons and images that change color, reveal hidden details, and more. This beginner-friendly tutorial provides step-by-step instructions to add a touch of interactive magic to your site.
File Upload for Squarespace Forms: How To Create & Customize File Upload Field in Squarespace
Learn how to easily add a file upload feature to your Squarespace form. This step-by-step guide includes CSS customization tips for a seamless user experience. Boost your form functionality today!
How to Change your mobile menu font size in Squarespace 7.1
Frustrated with limited Squarespace mobile menu options? This video unlocks the power of CSS to customize font size, spacing, vertical alignment, and even folders for a perfect mobile experience! Learn the code & best practices for accessibility.
How to Change "View Event" Button Text on a Squarespace Event List Page
This tutorial shows you how to change the text of the view event button in a Squarespace event collection.
How to Customize the "View Event" Button on Your Squarespace Event List with Cool Hover Effects!
This tutorial shows you how to change the style of your view events button, including how to create custom hover effects.
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.
How to add a symbol between links in your Squarespace navigation
In this tutorial, you'll learn how to add a symbol or character between the text links in your main navigation.
How To Create Vertical Video Collections in Squarespace
In this tutorial, you'll learn how to create a video collection layout that is designed for vertical videos, recorded at a 9:16 ratio.
How To Add A Button To A Video Collection Item
In this tutorial, you'll learn how to turn a simple text link into a clickable button using custom CSS.
How To Customize Squarespace Navigation Link Colors
In this tutorial, you'll learn how to customize the navigation link colors on your Squarespace website using simple code. We'll update all the links, the dropdown links, the account login link, and the mobile links separately. I'll also show you how to add this code to a single page.