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 custom bullet points in Squarespace
In this tutorial, we are going to use a little simple CSS to create custom bullet points in Squarespace. But we are even going to go a step further and customize them for each different text type! This works in all versions of Squarespace, including the new 7.1
How to Create a Full Width Instagram Feed in Squarespace
This tutorial will show you how to create a full-width Instagram feed in Brine, Bedford & site built with version 7.1
Creating A Three Column Footer Layout in Squarespace 7 (Brine Theme)
This tutorial will show you how to create a flexbox footer so you can have two and three column footer layouts on your Squarespace site!
How to Replace Your Mobile Menu Icon in Squarespace 7
This tutorial will show you how to change your mobile menu to an image without losing any of the menu functionality! This is specific for Squarespace 7 sites.
How To Create A Gradient Index Page in Squarespace - Brine Theme Only
In this tutorial, we are going to add a gradient overlay to the banners on an index page in a Brine template
How to create image zoom hover effects for Squarespace
In this tutorial, I will show you how to create a zoom-in hover effect for on-page images in Squarespace, both version 7 and the new 7.1
How to create filter hover effects for image galleries in Squarespace 7
This tutorial shows you how to create filters and hover effects for on-page image slideshows in Squarespace 7 sites, like Brine and Bedford theme templates.
How to change the color of gallery arrows in Squarespace 7
This tutorial shows you how to change the color of the gallery arrows for on-page image slideshows in Squarespace 7 sites like Brine theme templates.
How to show a second image on a hover in Squarespace
This tutorial shows you how to show a second image on a hover using a combination of CSS and an on page code blocks.
How to change your mobile font size in Squarespace
In this tutorial, we are getting into some more mobile magic, talking specifically about how to change the size of your mobile fonts.
How to create a button hover effect in Squarespace
Learn just how easy it is to create any button hover effect you can imagine in Squarespace!
How to create vertical text in Squarespace
This tutorial will show you how to turn any specific text type 90 degrees so it aligns vertically, but only on desktop and table, making sure mobile is still readable.
How to remove the header + footer from a single page in Squarespace
A lot of people use this code to turn a regular page into a landing page, giving you a bit more functionality than a regular cover page. In this tutorial I cover how to add this code to your entire site or to single out an individual page.
How to style selected text in Squarespace
Did you know that you can use CSS to change the look of anything highlighted on your website? Your browser refers to it as a selection, and this tutorial is all about how to customize it.
How To Style Squarespace Blog Comments
Learn how to use CSS to change the style of comments on your Squarespace blog posts.
How to use your own font in Squarespace
This quick tutorial will show you how to use your own font on your Squarespace website!
How to customize your Squarespace blog navigation links
Change up the style of the previous and next options displayed on your individual blog articles.
How to customize the search bar in Squarespace
This tutorial will teach you how to turn an ordinary search bar into one that matches your unique brand style using some simple custom CSS!
How to remove automatic hyphens on Squarespace mobile
One master code to overwrite them all - no more hyphens on mobile!! Check out this tutorial to get a breakdown of the code, and to learn how to add it to your own site.
How to center your mobile menu (Bedford & Brine)
In this tutorial, I am showing you how to create a centered mobile navigation in Bedford and Brine theme templates, and how to make that navigation take up the whole screen.