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 add a second button to your Squarespace menu
In this tutorial, you'll learn how to add a second button to your Squarespace website.
How to use an image for your Squarespace mobile menu icon
In this tutorial, you'll learn how to swap out the default mobile menu icon for your very own custom image.
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 stack blog pagination on mobile screens
In this tutorial, you’ll learn how to use CSS to stack blog pagination on mobile screens for a Squarespace website.
How To Change The Size Of A Squarespace Gallery Section On Mobile
In this tutorial, you’ll learn how to use CSS to change the size of gallery sections on smaller screens.
5 creative ways to customize your Squarespace mobile menu
In this tutorial, you’ll learn five creative ways to customize your Squarespace mobile menu.
How To Show A Squarespace Project Title On Mobile Devices
In this tutorial, you’ll learn how to use some super simple code to make sure your Squarespace project titles are visible on smaller screens.
How to move the header to the bottom of the page on mobile
In this tutorial, you’ll learn how to use CSS to change the layout of your Squarespace site, moving the header to the bottom of the page when your site is viewed on mobile devices.
How To Customize Mobile Info Bar Text
In this Squarespace tutorial, you’ll learn how to customize the font used for the mobile info bar labels in Squarespace.
How To Customize Mobile Info Bar Colors
In this Squarespace tutorial, you’ll learn how to customize the color of the Squarespace mobile info bar.
How To Setup a Mobile Information Bar in Squarespace
In this Squarespace tutorial, you’ll learn how to set up your mobile info bar. I’ll teach you how to update your business info, enable it, and explore how it works.
How To Add A Click To Call Button To Squarespace Mobile Menu
The CTA button in your Squarespace website can be a link to a phone number, but no one needs that on desktop! This tutorial will teach you how to create that link for mobile only.
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!