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 create a pattern background in Squarespace
A background pattern can make your Squarespace site even more unique, and this tutorial will teach you how to create one with code!
How to add a countdown timer to Squarespace
Squarespace can do a lot, but it can’t do it all! That’s where Elfsight comes in handy. In this video, you’ll learn how to create, customize, and install a countdown timer in Squarespace using Elfsight.
How to add an animated number counter to Squarespace
Squarespace can do a lot, but it can’t do it all! That’s where Elfsight comes in handy. In this video, you’ll learn how to create, customize, and install an animated number counter in Squarespace using Elfsight.
How to add a border to Squarespace
You can add a border to anything in a Squarespace site using custom CSS, even the whole page! This tutorial will teach you how.
How to wrap text around an image in Squarespace
In Squarespace, you can add an image on top of a text block, but when it resizes everything gets changed! This tutorial will teach you how to wrap text around that image so it will look great on every size device.
How to create a horizontal timeline in Squarespace
Timelines are a popular design choice for all kinds of websites, but Squarespace doesn’t have that feature built into their program. Luckily, this tutorial will teach you how to make your own using a list section in Squarespace 7.1 and a little bit of custom CSS!
Reveal Text on Hover in Squarespace Fluid Engine
Hover over an image - see some text. Sounds simple right? Well thanks to CSS, it totally is. And this tutorial will teach you how to create that hover effect in Squarespace using Fluid Engine!
How to customize a calendar in Squarespace
Calendar blocks can display blog posts, products, images, and events that are scheduled or have already happened. There are not many options for customizing the look of this Calendar in Squarespace, but with the codes in this video, you’ll be able to update a calendar block with colors, borders, and more!
How to create a scroll to stick header in Squarespace
This Squarespace tutorial will show you how to move your header to the bottom of the screen when your site loads. As your website visitor scrolls down the page, your header will then stick to the top of the page, creating this scroll-to-stick effect.
How to add an SVG to Squarespace
SVGs are scalable vector graphics; image files that can be resized without getting pixilated or distorted. In Squarespace, we can’t add them to an image block, but we can still use them on your site, and this tutorial will teach you how!
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 keep event info visible on a scroll in Squarespace
This quick tutorial will show you how to create “sticky” event info so that it stays at the top of the screen on an individual event page.
How to customize event date tags in Squarespace
This tutorial will teach you how to change the style of the date tag on your event list in Squarespace.
How to customize event list titles in Squarespace
In this tutorial, you’ll learn how to customize event titles in Squarespace using CSS.
How to create knockout text in Squarespace
In this tutorial, you’ll learn how to create a knockout text effect in Squarespace.
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 create list item hover effects in Squarespace
In this tutorial, you’ll learn how to create two unique list section hover effects in Squarespace.