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 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 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 customize a markdown block in Squarespace
Markdown blocks are a creative way to add content to your site, and this tutorial will help you customize it so the content inside can have its own unique style!
Create a Squarespace Social Media Icon Sidebar
With a little clever CSS, you can keep your social media links visible on the side of your Squarespace site no matter how much content there is to scroll through!
How to change the scrollbar color in Squarespace
Scroll bar styles are a super easy thing to customize in your Squarespace site and this tutorial will teach you how!
How to create an alternating color accordion block in Squarespace
Squarespace Accordion blocks don’t have to be basic! You can use custom code to create a colorful one, and this tutorial will teach you how.
How to add a button to an accordion block in Squarespace
Did you know that you can change the active link in an accordion block to look like an actual clickable button, hover effects, and all?! It’s actually super simple and super customizable, and this tutorial will teach you how.
How To Add An Inset Border to Anything in Squarespace
In this tutorial, you’ll learn how to create an inset border for literally anything in your Squarespace site.
How to change the color of header social icons on a hover
This tutorial will teach you how to change the color of the header social icons on a hover in Squarespace 7.1
How to Customize Category Links in Squarespace
In this tutorial, you’ll learn how to customize the category links displayed on a blog post in Squarespace using CSS.
How to Customize Archive Blocks in Squarespace
In this tutorial, you’ll learn how to customize the archive block in Squarespace using CSS.
How to create gradient text in Squarespace
This tutorial will show you how to turn any text style in Squarespace into a gorgeous gradient with some clever CSS code! This works in all versions of Squarespace, including the new 7.1
How to create outline & offset text in Squarespace
In this free Squarespace tutorial, you'll learn how to create an outlined text with an offset color using custom code!
How to create a low highlight text effect in Squarespace
Sometimes called a “half highlight”, this tutorial will show you how to create text that has a solid color behind only the lower half of it.
How to customize the mobile product page in Squarespace
In this tutorial, we’ll use custom CSS to change the look of your product pages specifically on mobile devices in Squarespace 7.1
How To Customize Variant & Quantity in Squarespace
In this tutorial you’ll learn how to use custom CSS to change the look of the quantity and variant options on a product page in Squarespace 7.1