Easily add those final touches with this curated collection of snippets.

Squarespace 7.1 does many things far better than 7.0 did. The color sections: so awesome, resizing section heights: a breeze, controlling content width: an absolute dream, more heading and paragraph sizes: thank you Squarespace!

But with the move towards simplicity of 7.1, CSS has become more important to add the extra design elements and customizations that can't be styled through the editor.

I have created this collection of 7.1 CSS and code snippets to fill in every gap that Squarespace web designers will face when designing a site.

I have been designing 7.1 sites since it first came out in July of 2019, so I have a pretty good handle on what needed to be in this course. But my needs are not everyone's needs. To make sure this would truly be the best CSS resource, I have taken requests from a Facebook group of over 350 Squarespace web designers and implemented them in this course as well.

This course is a true labor of love where I have collected my favorite 7.1 Specific CSS snippets (created by me for my client sites) that you can use to take your client sites to the next level. It is important to note that this is NOT a course teaching you the inner workings of CSS or JavaScript, instead it is a tool for you to use when designing your sites to quickly add more customization through copy and paste CSS snippets.

My vision is that you will have this course open on one monitor and Squarespace open on the other, and you will be able to copy and paste your way to a more functional, interactive, and aesthetic 7.1 website!

What's in the Squarespace CSS Toolbox Course?

Take a look at the full module breakout below. You will also automatically get access to new snippets as they are added:

  • 01

    1. Course Introduction

    • 1.1 How to Use This Course
  • 02

    2. CSS - The Basics

    • 3.1 CSS Overview - What is CSS?

    • 3.2 CSS Syntax - The 4 Types of Selectors

    • 3.3 Targeting Elements Inside of Other Elements

    • 3.4 Most Common Selectors Used in Squarespace

    • 3.5 Targeting Sections Based on Color Theme

    • 3.6 Using CSS Comments

    • 3.7 Using The !Important Rule

    • 3.8 A Little Trick: Use Borders To Identify The Correct Target

    • 3.9 Organize Your Code Snippets
  • 03

    Add Border to Site

    • Add Border to Site
  • 04

    Header

    • Hide the Header

    • Add Background Image to Header

    • Replace Logo with SVG

    • Change Active Navigation Item Color

    • Remove Active Navigation Item Underline

    • Change Padding on Header Button

    • Make Folders Click Through to Page

    • Style Folder Dropdown

    • Add Multiple Header Buttons

    • Shrink Logo On Scroll

    • Animate Announcement Bar Up on Scroll

    • Change Header Social Icon Color

    • Frosted Glass Header Background

    • Indented Header Bar

    • Vertical Navigation

    • Hamburger Menu on Desktop (Plugin)
  • 05

    Mobile Menu

    • Mobile Menu Changes that Don't Require CSS

    • Change Mobile Navigation Font Size

    • Align Mobile Menu Navigation Items to Top

    • Add a Background Image to Mobile Menu

    • Add Image to Top of Mobile Menu

    • Change Mobile Menu Social Icon Color

    • Alternate Mobile Logo When Mobile Menu is Open
  • 06

    Banner Styles

    • Custom Section Divider

    • Triangle Section Divider

    • Banner Gradient Overlay

    • Section Gradient Background
  • 07

    Text Styles

    • Targeting Headings and Paragraphs

    • Remove Link Underline

    • Load Custom Fonts

    • Use Multiple Fonts Within a Line of Text

    • Custom Bullet List

    • Outlined Text (Stroke Effect)

    • Add Background Image to Text

    • Bonus: Add Animated Background Color to Links
  • 08

    Button Styles

    • Targeting Buttons by Type

    • Targeting a Single Button
  • 09

    Gallery Sections

    • Show Gallery Grid Caption on Hover

    • Black and White Gallery Images - Color on Hover

    • Only One Gallery Grid Image Per Row on Mobile

    • Autoplay Reel Galleries

    • Slideshow:Simple Arrow Styling
  • 10

    Gallery Block

    • Stack Carousel Gallery Block Images on Mobile
  • 11

    Auto Layout Sections

    • Testimonial Carousel

    • Autoplay Carousel

    • Autoplay Slideshows

    • Make Carousel or List Items Clickable

    • Show Carousel Desktop Arrows on Mobile
  • 12

    Image Styling

    • Add Rounded Corners To All Images
  • 13

    Summary Blocks

    • Change Summary Block Read More Text
  • 14

    Quote Block Styling

    • Style the Quote Block

    • Center Quote Block Text
  • 15

    Newsletter and Form Blocks

    • Shorten Newsletter Block

    • Hide Newsletter Block Last Name Field

    • Underlined Newsletter Block

    • Remove Extra Space When Newsletter Fields are Blank

    • Form Style 1

    • Form Style 2

    • Form Style 3

    • Create Your Own Custom Form Style

    • Lightbox Form Styling
  • 16

    Instagram Block

    • Show Instagram Icon over Image on Hover
  • 17

    Blog

    • Add Banner to Blog Posts

    • Set Inset Blog List to Match Content Width

    • Proper Blog Post Content Width
  • 18

    Commerce

    • Go to Specific Page When Product Button is Clicked Instead of Adding to Cart

    • Better Shop Categories
  • 19

    Footer

    • Add Background Gradient to Footer Section

    • Auto Update Copyright Year

    • Add Border to Top of Footer

    • Centered Logo Overlapping Footer
  • 20

    Floating Back to Top Button

    • Floating Back to Top Button
  • 21

    Cookie Popup Styling

    • Cookie Consent Popup Styling
  • 22

    Page Elements

    • Website Background Image

    • Vertical Line
  • 23

    Tablet/Mobile Tweaks

    • Center Left/Right Buttons On Mobile

    • Center Footer Content on Mobile
  • 24

    Split Layouts (Course Discount)

    • Get $30 off Custom Layouts in Squarespace!
  • 25

    Need Assistance with Content in this Course?

    • Join the Private Facebook group

    • Schedule a 1:1 Call with me!
  • 26

    Please Leave a Review!

    • Please leave an honest review, it would be much appreciated!

  • CSS Basics Lesson

    Learn the fundamentals before diving in. A basic understanding will help you make adjustments to the CSS I provide.

  • The Last Resource You Need

    You get a giant library of CSS snippets created by a Squarespace web designer for Squarespace web designers.

  • Mobile Specific Changes

    This course includes all of the mobile changes you will need to make to your client sites.

  • Find the Plugins you Need

    This course also contains a resource hub of the best plugins I use on my client sites.

  • Discounts!

    Get 20% off all plugins in my shop. Plus get $30 off my course Custom Layouts in Squarespace!

So what exactly is included again?

  • A massive library of 7.1 specific CSS snippets to help you take your client sites to the next level

  • Comprehensive, clear design trainings and video instructions

  • Copy and Paste CSS for easy and immediate implementation.

  • Lifetime access to course updates including both video updates and CSS updates

  • A coupon code for 20% off plugins in my shop and $30 off my Custom Layouts course!

READY TO LEVEL UP YOUR 7.1 SITES?

Get the Ultimate Collection of 7.1 CSS Snippets! It's the only CSS library you will ever need.

Get Access for Only
Enroll Now!

Reviews from Course students

Still on the fence? Check out what others had to say!

Sandra Oberer

5 star rating

“Short and concise introduction, simply explained, even for CSS beginners like me. Good job! Thank you so much 😍”

“Short and concise introduction, simply explained, even for CSS beginners like me. Good job! Thank you so much 😍”

→Read Less

Therese Dahlgren

5 star rating

“I love Chris course which is a really good resource when building a website and want it to stand out from other Squarespace pages. Thank you!”

“I love Chris course which is a really good resource when building a website and want it to stand out from other Squarespace pages. Thank you!”

→Read Less

Jude Goodwoin

5 star rating

“At Goodwin Creative Ltd we have been taking Chris's courses and tutorials for a few years. This collection is absolutely the best resource on the internet today. His explanations are clear, easy to follow, and the videos are good too. Thanks Chris...”

→Read More

“At Goodwin Creative Ltd we have been taking Chris's courses and tutorials for a few years. This collection is absolutely the best resource on the internet today. His explanations are clear, easy to follow, and the videos are good too. Thanks Chris for making our life as Squarespace web developers so much easier!”

→Read Less

Whitney Childers

5 star rating

“Chris does an outstanding job of walking you though the basics of CSS so you have a solid foundation to be able to not only utilize the numerous CSS snippets he provides, but also arming you with the knowledge to customize the CSS for your own pu...”

→Read More

“Chris does an outstanding job of walking you though the basics of CSS so you have a solid foundation to be able to not only utilize the numerous CSS snippets he provides, but also arming you with the knowledge to customize the CSS for your own purposes. Chris's instruction is clear and professional and the video how-to's are super helpful. I highly recommend taking this course. ”

→Read Less

Jude Goodwin

5 star rating

“Chris' lessons and tips will make your life as a Squarespace web designer soooo much easier! This is a worthy course and Chris keeps adding to it and updating it. Thank you Chris so much for your contributions to the community.”

“Chris' lessons and tips will make your life as a Squarespace web designer soooo much easier! This is a worthy course and Chris keeps adding to it and updating it. Thank you Chris so much for your contributions to the community.”

→Read Less

Andrea Rona

5 star rating

“Chris this class was incredible! I can't believe how much I learned. Starting with your explanation of how CSS works. I have been using CSS for a long time but your lesson really gave me a deeper understanding of the structure which will help me g...”

→Read More

“Chris this class was incredible! I can't believe how much I learned. Starting with your explanation of how CSS works. I have been using CSS for a long time but your lesson really gave me a deeper understanding of the structure which will help me going forward. Also, the way the course is structured, I have so many CSS options to use to customize my website and all I will need to do is copy and paste!”

→Read Less

CSS can feel overwhelming. But it doesn't have to.

Making CSS customizations to your site can feel very overwhelming. You spend tons of time googling and once you think you have finally founding something that will work, you copy and paste it into your site... and it doesn't...

Well no more. I have built this collection specifically for 7.1 sites so you can be confident the CSS will work every time.

Start expanding your Squarespace design skill set today!

  • Sign up for the course

    Create your Thinkific account and sign up for the course

  • Get Instant Access

    Instantly get access to the step-by-step course videos as well as the copy-and-paste CSS.

  • Start Designing TODAY

    Copy and paste the CSS into your site and level up your Squarespace designs!

WOW Your Clients: Get the Ultimate Collection of 7.1 CSS Snippets Today!

Get Them Now!

Frequently Asked Questions

  • Do you offer any refunds or guarantees?

    Due to the digital nature of the course, I do not offer refunds. So please be sure you are interested before purchasing!

  • Will these snippets work on every 7.1 site?

    Yes! No matter which 7.1 template you decide to start from, the template structure is the same. So these snippets will work on every 7.1 template!

  • Does this course also cover 7.0?

    No, this course is specific to 7.1 sites so these CSS Snippets will not work on any 7.0 templates.

  • Could I just find this information for free online?

    While I teach a lot of cool things on my YouTube channel, I don't teach all of this. For some of the lessons, you might be able to find similar snippets online, but Squarespace is constantly making updates and often times those snippets no longer apply. How many times have you copy and pasted CSS from the internet that didn't work? This library gives you every snippet you will need all in one place. No more endless googling! Guaranteed to work!

  • This course would be a big investment for me. Is it really worth the price?

    If you read the course reviews above you will see that many people said it was an unbelievably good value. Look at it this way: not only are you getting an awesome course, but if you have any questions you are also getting free support from me if you have any questions. So you are guaranteed to have these snippets work for you!

Start Creating More Custom 7.1 Sites Today!

Enroll Now!