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 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 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!
Creating Shapes in Squarespace
In this Squarespace tutorial, you’ll learn all about the brand-new Shape content block in Squarespace! I’ll show you how to add it to a page section on your site, how to change the shape and color, how to add a drop shadow, and how to layer it with other content.
How to use an image for list item in Squarespace
List sections are auto layouts that can have an image, title, description, and button. They can have a unique background color, and they can have an image too, thanks to the codes in this tutorial!
How to create a frosted glass effect for a list item in Squarespace
One of my favorite CSS tricks is the frosted glass effect - showing a slightly transparent background that blurs the image behind it. In this tutorial, I’ll teach you how to create that effect for a list item in Squarespace.
How to create list item shapes in Squarespace
Just because it’s built with Squarespace, doesn't mean a list section has to be square ;) In this step-by-step tutorial, you’ll learn how to create a unique shape for a list item using custom CSS.
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!
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.
How To Create A Split Page List Section in Squarespace 7.1
This tutorial will teach you how to use CSS to create a split page list section in Squarespace, showing the banner image on one half of the screen and the content on the other.
How to use multiple fonts in a list section title in Squarespace
In this tutorial you’ll learn how to use custom code to target the bold and italic font styles in your list section header so you can combine multiple font styles on one line!
How to create a two column list section on mobile
In this tutorial you’ll learn how to use custom code to target the bold and italic font styles in your list section header so you can combine multiple font styles on one line!
How to create list image hover effects in Squarespace 7.1
In this tutorial you’ll learn how to create custom hover effects for list item images in Squarespace 7.1
How to customize list section cards in Squarespace
In this tutorial you’ll learn how to create custom styles for list item cards in Squarespace.
How to customize list section buttons in Squarespace
In this tutorial you’ll learn how to create custom buttons for individual items in a list section in Squarespace.