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 An Inset Border to Anything in Squarespace
In this tutorial, you’ll learn how to create an inset border for literally anything in your Squarespace site.
How To Create A Full-Width Dropdown Menu in Squarespace
This tutorial will teach you how to create a full width drop down menu in Squarespace 7.1
How To Create A Split Page Layout in Squarespace
This tutorial will teach you how to use CSS to create a split page layout in Squarespace, showing the background image on one half of the screen and the content on the other.
How To Create A Split Page List Section in Squarespace 7.1
This tutorial will teach you how to use CSS to create a split page list section in Squarespace, showing the banner image on one half of the screen and the content on the other.
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 A Fixed Footer in Squarespace 7.1
Sometimes you’ll have important information and links inside the footer of a website, and making that visible all the time can be really important! This tutorial will teach you how to use CSS to make sure the footer of your site is always visible.
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 add a background image to a page in Squarespace
This tutorial will teach you how to upload your own image to use as the background of a page on your Squarespace site, no matter how many page sections you have!
How to customize the login button for a Squarespace member area
When you build a member area in Squarespace, you’ll get the option to add a “login” link to the top of your site. While that’s great, it’s a super boring text link! Luckily this tutorial will help you change that. 😎
How to create an overlay scroll effect for page sections
In this tutorial, you’ll learn how to create an overlay scroll effect in Squarespace, where a page section will get “stuck” at the top of a browser, and the other content will cover it as you scroll down the page.
Summary Block Hover Effects
In this tutorial we’ll use some custom code to change the look of summary blocks so they stand out on a hover.
How to Customize Summary Blocks in Squarespace
As great as the summary block feature is, the built in design can be pretty...well, boring! In this tutorial, we’re going to check out the selectors behind these summary blocks and use some custom code to make them look awesome.
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!
Sticky Category Links for Video Collection Pages
In this tutorial we’ll use CSS to create “sticky” links that stick to the top of the browser window when you scroll through categories on a video collection page, or your online store in Squarespace 7.1
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 have multiple buttons on an image block in Squarespace
In this tutorial, you’ll learn how to create multiple buttons for one image block in Squarespace.
How to use a custom font in Squarespace
In this tutorial, you’ll learn how to install your own font in Squarespace.