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 use multiple fonts in your Squarespace announcement bar
In this tutorial, you’ll learn how to feature multiple text styles in your announcement bar using custom CSS. What we’ll do is isolate characters based on their text type: bold and italicized fonts.
How to create a drop cap letter in Squarespace
In this tutorial, you’ll learn how to create drop cap characters in Squarespace with simple custom CSS.
Customize accordion block font in Squarespace
In this free Squarespace tutorial, you’ll learn how to customize the font of an accordion block using simple CSS.
Multiple Font Styles In One Line of Text
With a little clever CSS, you can have two font families in one line of text on your Squarespace website. In this Squarespace tutorial, you’ll learn how to use custom code to change the font family for specific characters in one line of text. Squarespace Expert Becca Harpain will show you how, step by super simple step.
How To Add A Google Font to Squarespace
This Squarespace tutorial will show you how to install a Google font on your Squarespace site and how to use it in your custom code.
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 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 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.
CSS Targeting Tips for Squarespace: How To Change One Thing with CSS
In this Squarespace tutorial, you’ll learn how to use different types of IDs to change individual things in Squarespace with custom CSS.
5 Creative Text Designs in Squarespace
The new editing experience in Squarespace has a LOT of neat design features, especially when it comes to text! This video will show you my five favorite text tricks.
How to customize a markdown block in Squarespace
Markdown blocks are a creative way to add content to your site, and this tutorial will help you customize it so the content inside can have its own unique style!
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 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 create scrolling announcement bar text in Squarespace
In this tutorial, you’ll learn how to create a scrolling text animation for the announcement bar in Squarespace.
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 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 Customize the Search Results Page in Squarespace
In this tutorial you’ll learn what custom codes you can use to make your Squarespace search result page look fabulous.
How to Create An Accordion Text Effect in Squarespace
Learn how to create text sections that expand on a click in Squarespace! Perfect for FAQ sections, the codes from this tutorial will work in any version of Squarespace.