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 Customize Squarespace Navigation Link Colors
In this tutorial, you'll learn how to customize the navigation link colors on your Squarespace website using simple code. We'll update all the links, the dropdown links, the account login link, and the mobile links separately. I'll also show you how to add this code to a single page.
How To Create A Dropdown Menu in Squarespace 7.1
In this tutorial, you’ll learn how to create a dropdown menu in Squarespace 7.1 I'll walk you through the step-by-step process of creating a dropdown menu, in your navigation & adding pages to that. menu. Then – the fun part – customizing it with a touch of code magic!
How To Create A Transparent Header in Squarespace
In this tutorial, you’ll learn how to create a transparent header in Squarespace using the built in settings and custom CSS.
How to create a multiple-column dropdown in Squarespace
This Squarespace tutorial guides you step-by-step through creating a user-friendly, two-column dropdown menu. Learn how to organize your website content logically, improve navigation, and provide a smoother browsxing experience for your visitors. Boost usability and make your Squarespace website shine!
How to change your logo on a specific page in Squarespace
In this tutorial, you’ll learn how to use custom code to replace the logo on specific pages of your Squarespace website.
How to change the color of social media icons in your Squarespace menu
In this tutorial, you’ll learn how to use CSS to change the colors of the social media icons in your Squarespace menu, including cool hover effects!
How to create split navigation links for Squarespace 7.1
In this tutorial, you’ll learn how to use CSS to split your main menu links, showing half to the left of the logo and half to the right.
How to create site title hover effects in Squarespace
In this tutorial, you’ll learn how to create hover effects for the title or log of your Squarespace website.
How To Create a Floating Header in Squarespace
In this free Squarespace tutorial, you’ll learn how to create a floating header in your Squarespace website. This will place your logo and links above the content of your page on both desktop and mobile.
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 create custom cart icon hover effects in Squarespace
Squarespace has a built-in hover effect for the cart icon in the header of your website, and this tutorial will teach you how to make it even better!
How to create a scroll to stick header in Squarespace
This Squarespace tutorial will show you how to move your header to the bottom of the screen when your site loads. As your website visitor scrolls down the page, your header will then stick to the top of the page, creating this scroll-to-stick effect.
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 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 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!
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 use a custom background image for your Squarespace header
In this Squarespace tutorial, you'll learn how to use your own image for the background of the header menu (aka main navigation) of your Squarespace website.
How to create a frosted glass header in Squarespace
In this tutorial I am going to show you how to use some custom CSS to create a frosted glass website header on your Squarespace website.
How To Create Anchor Links in Squarespace
Anchor links work by naming a section of a page, and when clicked, pulls that "anchor" to the top of the browser window. Learn how to easily create on using Squarespace in this tutorial from InsideTheSquare!