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 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 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 change the color of social media icons in your Squarespace menu
In this tutorial, you’ll learn how to use CSS to change the colors of the social media icons in your Squarespace menu, including cool hover effects!
How to create site title hover effects in Squarespace
In this tutorial, you’ll learn how to create hover effects for the title or log of your Squarespace website.
How to create a split color page section background in Squarespace
In this Squarespace tutorial, you’ll how to use custom CSS to create a split color page section background that works on mobile too!
How to customize a horizontal line block in Squarespace
In this Squarespace tutorial, you’ll learn different ways to enhance your line block, including adding a shadow, changing its height, creating a double line, and even creating a dotted line using custom CSS.
How to create a multi color list section in Squarespace
Discover how to create stunning multicolor list sections in Squarespace with this comprehensive tutorial. Learn how to use CSS to customize the background of individual list items, odd and even items, and even create repeating patterns. Watch the video and explore the provided code snippets to enhance the design of your Squarespace website. Perfect for Squarespace tutorial enthusiasts!
How to change read more links on summary blocks in Squarespace
In this tutorial, you’ll learn how to change the read more link in a summary block to anything you want it to be.
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 create gradient buttons in Squarespace
In this tutorial, you’ll learn how to create a unique gradient background for the buttons on any Squarespace website.
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!
How to turn Event Calendar Links into Buttons
In this tutorial, you’ll learn how to turn the event Google and iCal event links in Squarespace into buttons using CSS.
How to set up your announcement bar in Squarespace
In this Squarespace tutorial, you’ll learn how to set up your announcement bar in Squarespace 7.1
How To Customize Mobile Info Bar Colors
In this Squarespace tutorial, you’ll learn how to customize the color of the Squarespace mobile info bar.
How To Add A Click To Call Button To Squarespace Mobile Menu
The CTA button in your Squarespace website can be a link to a phone number, but no one needs that on desktop! This tutorial will teach you how to create that link for mobile only.
How to remove the menu link underline in Squarespace
You might have noticed that on your Squarespace site, there is always a line under the page you are currently looking at. This is the default style for an active link, but thanks to CSS, we can remove that underline and change that text to look even more unique!
How to change the background of a menu block in Squarespace
A premium feature for business and commerce plans, the menu block is a content block type that can display text in unique layouts featuring different sections with titles, items, descriptions and prices. This tutorial will teach you how to customize the background of that menu block, adding a solid color, gradient, and your own image.
How to create hover effects for the main menu in Squarespace
In this Squarespace tutorial, you’ll learn how to create unique hover effects for the links in main menu of your website. There are four types of links you can have in your main navigation, and the codes for each one of them are listed below.
How to highlight text in Squarespace
Text Highlight in Squarespace is a new feature that lets us add a creative color & design to the content inside a block of text! This video covers all 12 new design options and their settings.