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 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 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 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 footer of a lesson in a Squarespace course
In this quick tutorial, learn how to customize the lesson footer in your Squarespace course with CSS! You'll learn how to change the color and position of the footer button and alter the footer's background color to match your site's design.
How to reorder the blog list text in Squarespace
Learn how to change the order of text in your blog grid with CSS in this step-by-step tutorial from InsideTheSquare.co
How to customize Squarespace blog title font
Learn how to create a custom font style for your Squarespace blog title in this step-by-step tutorial from InsideTheSquare.co
How to create a full width image in a Squarespace blog post
Learn how to create a full-width blog image in Squarespace with this tutorial. Perfect for bloggers and website owners looking to enhance their design.
How to customize product variant buttons in Squarespace
This tutorial teaches you how to customize product variant buttons on your Squarespace online store with CSS. Learn how to change the size, shape, color, and font of the buttons, as well as create hover effects to make them pop. This code can be customized for any Squarespace website so it looks uniquely yours.
How to customize a Squarespace shopping cart page
In this tutorial, you’ll learn how to use CSS to change the look of the shopping cart page in Squarespace. We’ll be editing the colors, fonts, and event modifying the layout with custom code.
How to add a drop shadow to a shape in Squarespace
In this tutorial, you’ll learn how to create more dynamic layers in Squarespace by adding custom shadows to shape blocks! This tutorial will teach you how to create the code, add it to your site, and customize it so it’s uniquely yours.
How to stack blog pagination on mobile screens
In this tutorial, you’ll learn how to use CSS to stack blog pagination on mobile screens for a Squarespace website.
How to customize the colors of a Squarespace image lightbox
In this tutorial, you’ll learn how to use custom CSS to change the color of the lightbox for image blocks and galley sections on a Squarespace website.
How to create horizontal scrolling images in Squarespace
With a gallery section and some clever custom CSS, you can make an eye-catching horizontally scrolling set of images in Squarespace!
How to add custom labels to your blog pagination
In this tutorial, you’ll learn how to add text to the previous and next links in your Squarespace blog. This is a great way to personalize your website and make it uniquely yours!