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 a light box contact form in Squarespace
In this tutorial you’ll learn how to customize the look of a light box contact form on your Squarespace website. We’ll be using custom CSS to change the overlay color, add a border, and update the style of the form title.
How to add a background image to a Squarespace form
In this tutorial, you’ll learn how to use custom code to add a background image to contact forms on your Squarespace website.
How to customize active form fields in Squarespace
In this tutorial, you’ll learn how to use custom code to remove the automatic outline for active form fields and customize it to match your own unique style.
How to create a sliding page animation in Squarespace
In this tutorial, you’ll learn how to use custom code to create a sliding page animation for your Squarespace website.
How to use a custom logo for your mobile menu
In this tutorial, you’ll learn how to use custom code to show an alternative version of your logo when your mobile menu is open.
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 two columns of content for the mobile version of Squarespace
Learn how to create two column of content for collection pages in Squarespace - products, videos, and blogs!
How to create a custom layout for mobile in Squarespace 7.1
This is one of the simplest ways to create a mobile layout in Squarespace! In this tutorial, you’ll see how two lines of code can create a super customized look specifically for mobile.
How to replace your mobile menu icon with text in Squarespace
You can replace your mobile menu icon with custom text in Squarespace and this tutorial will teach you how, step by super simple step!
Mobile Menu on Desktop in Squarespace 7.1
In this tutorial we’ll make the mobile menu of your Squarespace site visible on desktop, and use a little code to customize it even further.
How to use a custom background image for your Squarespace header
In this Squarespace tutorial, you'll learn how to use your own image for the background of the header menu (aka main navigation) of your Squarespace website.
How to use a custom font for the mobile menu in Squarespace 7.1
In this tutorial, you’ll learn how to assign a new font family to every link in the menu, including your site title and header button, and you’ll learn how to isolate just the links or just the button if that is all you want to change.
How to change the color of the social media icons in a Squarespace mobile menu
Customize the mobile menu icon color in Squarespace 7.1
How to align your mobile menu left or right (Pacific, York, & Five)
In this free CSS tutorial, I am showing you how to change the alignment of your mobile menu to the left or the right for York, Pacific and Five theme templates.
