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 curved collage card corners in Squarespace
In this tutorial, you’ll learn how to add a curved edge to an image card in Squarespace.
How to create button hover effects in Squarespace
In this tutorial, you’ll learn how to create a custom button hover effect in Squarespace.
Add image inline with text in Squarespace
This tutorial will show you how to use a markdown block to place an image in a line of text in a Squarespace website.
Image Overlay Hover Effect for Squarespace
In this tutorial, you’ll learn how to create a color overlay hover effect in Squarespace.
Add An Icon to a Button in Squarespace
In this tutorial, you’ll learn how to add an icon to a button in Squarespace.
How To Add An Inset Border to Images in Squarespace
In this tutorial, you’ll learn how to create an inset border for images on your Squarespace site.
How To Add Google Icons to Squarespace
In this tutorial, you’ll learn how to use Google Material Symbols (formerly Google Material Icons) on any Squarespace site.
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 Create A Full-Width Dropdown Menu in Squarespace
This tutorial will teach you how to create a full width drop down menu in Squarespace 7.1
How To Create A Split Page Layout in Squarespace
This tutorial will teach you how to use CSS to create a split page layout in Squarespace, showing the background image on one half of the screen and the content on the other.
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 Create A Fixed Mobile Header in Squarespace 7.1
This tutorial will teach you how to use CSS to make sure the header of your site is always visible on mobile devices.
How To Create A Fixed Footer in Squarespace 7.1
Sometimes you’ll have important information and links inside the footer of a website, and making that visible all the time can be really important! This tutorial will teach you how to use CSS to make sure the footer of your site is always visible.
How To Create A Full-Width Scrolling Marquee in Squarespace
The scrolling marquee content block is brand new (April 2022) and in this tutorial, you’ll learn how a little bit of custom CSS for Squarespace can make that block full width, showing scrolling text from one side of the screen to the next!
How To Change Scrolling Marquee Font in Squarespace
The scrolling marquee content block is brand new (April 2022) and in this tutorial, you’ll learn how easy it is to customize the text with code!
How to add a background image to a page in Squarespace
This tutorial will teach you how to upload your own image to use as the background of a page on your Squarespace site, no matter how many page sections you have!
How to customize the login button for a Squarespace member area
When you build a member area in Squarespace, you’ll get the option to add a “login” link to the top of your site. While that’s great, it’s a super boring text link! Luckily this tutorial will help you change that. 😎
How to create an overlay scroll effect for page sections
In this tutorial, you’ll learn how to create an overlay scroll effect in Squarespace, where a page section will get “stuck” at the top of a browser, and the other content will cover it as you scroll down the page.
Summary Block Hover Effects
In this tutorial we’ll use some custom code to change the look of summary blocks so they stand out on a hover.
How to Customize Summary Blocks in Squarespace
As great as the summary block feature is, the built in design can be pretty...well, boring! In this tutorial, we’re going to check out the selectors behind these summary blocks and use some custom code to make them look awesome.