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 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.
How To Create A Dropdown Menu in Squarespace 7.1
In this tutorial, you’ll learn how to create a dropdown menu in Squarespace 7.1 I'll walk you through the step-by-step process of creating a dropdown menu, in your navigation & adding pages to that. menu. Then – the fun part – customizing it with a touch of code magic!
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 Create A Landing Page in Squarespace: Easy To Follow Squarespace Landing Page Tutorial
This advanced training will show you how to create a landing page in Squarspace with it’s own header & footer navigation!
How to build a website with AI: Squarespace Blueprint Review
This tutorial will show you how to use Squarespace Blueprint to build a website using AI.
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 Create A Transparent Header in Squarespace
In this tutorial, you’ll learn how to create a transparent header in Squarespace using the built in settings and custom CSS.
How to create a blog post sidebar in Squarespace
This tutorial will show you how to add a simple sidebar to your Squarespace website using a summary block.
How to create a back to top button in Squarespace
This tutorial will show you how to add a back to top or scroll to top button on any page in your Squarespace website.
How to customize the digital product block in Squarespace
In this tutorial, you’ll learn how customize the digital product block in Squarespace using CSS.
How to Change Squarespace Blog Post Paywall Text: A Step-by-Step Squarespace CSS Tutorial
In this tutorial, you’ll learn how change the automatic text on a blog post paywall.
How to use multiple fonts in your Squarespace announcement bar
In this tutorial, you’ll learn how to feature multiple text styles in your announcement bar using custom CSS. What we’ll do is isolate characters based on their text type: bold and italicized fonts.
How to create a multiple-column dropdown in Squarespace
This Squarespace tutorial guides you step-by-step through creating a user-friendly, two-column dropdown menu. Learn how to organize your website content logically, improve navigation, and provide a smoother browsxing experience for your visitors. Boost usability and make your Squarespace website shine!
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.