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 align content in Squarespace
Aligning objects within a single content block as well as between multiple content blocks is now easier than ever before in Squarespace thanks to the new alignment feature!
How To Create A Text Popup in Squarespace
Showing additional info in a popup is a great way to give visitors more information without cluttering your page. It's also an effective way to make sure your user experience is as smooth as possible. But did you know that you can create custom text-only popup using CSS?
How to embed an Instagram reel into Squarespace
In this Squarespace tutorial, you'll learn how to add an Instagram reel to a blog post. I use a 7.1 version site in this tutorial, but the process is the same for older versions of Squarespace.
How To Update The Year Automatically in Squarespace
In this Squarespace tutorial, you’ll learn how to add code to the footer of your website that will automatically update the year using HTML & Javascript.
How To Hide The Announcement Bar Close Icon in Squarespace
In this Squarespace tutorial, you’ll learn how to hide the close icon from an announcement bar in Squarespace.
How to keep the announcement bar at the top of the page in Squarespace
In this Squarespace tutorial, you’ll learn how to keep your announcement bar at the very top of the screen in your Squarespace site, so it’s always visible, even when people scroll down the page.
How to set up your announcement bar in Squarespace
In this Squarespace tutorial, you’ll learn how to set up your announcement bar in Squarespace 7.1
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 make a folder clickable in Squarespace
A folder of content in your Squarespace menu creates a drop-down, but that folder doesn't have a URL so it can't be a clickable link. But with a little bit of creative CSS, we can make it clickable anyway!
How to remove the menu link underline in Squarespace
You might have noticed that on your Squarespace site, there is always a line under the page you are currently looking at. This is the default style for an active link, but thanks to CSS, we can remove that underline and change that text to look even more unique!
How to change the background of a menu block in Squarespace
A premium feature for business and commerce plans, the menu block is a content block type that can display text in unique layouts featuring different sections with titles, items, descriptions and prices. This tutorial will teach you how to customize the background of that menu block, adding a solid color, gradient, and your own image.
How to create hover effects for the main menu in Squarespace
In this Squarespace tutorial, you’ll learn how to create unique hover effects for the links in main menu of your website. There are four types of links you can have in your main navigation, and the codes for each one of them are listed below.
How to add text before a price in Squarespace
The product content block in Squarespace makes it easy to promote a product on any page, and in this tutorial, you’ll learn how to customize it even more. In this tutorial, we are going to use some CSS to add text both before and after the price.
How to highlight text in Squarespace
Text Highlight in Squarespace is a new feature that lets us add a creative color & design to the content inside a block of text! This video covers all 12 new design options and their settings.
How to add a border to the promo pop-up in Squarespace
In this super quick tutorial, you'll learn how to use one simple line of code to add a border to the promo pop-up in Squarespace.
How to change the promo pop-up fonts in Squarespace
You can use the special design menu to change the fonts for every single element of your promotional pop-up, or you can use one line of code to change them all at once!
How to create a marketing popup in Squarespace
In this video, I show you how to use the Squarespace Promo Pop Up. This is a great way to get more subscribers and customers for your business. I'll walk you through each step of setting it up so that you can start using it right away!