Squarespace courses are a cool feature that let’s you present structured content in the form of lessons that are grouped into chapters. This course feature allows for progress tracking and is designed to feature videos for each less.

While it has some great design options, I’ve had to rely on my custom code collection to make this feature perfect for some of my clients, and my own courses!

In this tutorial, I’m sharing my top 10 code tricks that you can use to customize the lesson page and the sidebar / side navigation feature that is exclusive to this type of Squarespace content.

The codes I use are below, but make sure you take the time to watch the video so you can understand exactly how to use these codes and how to make them unique for your own Squarespace website style.

Here are the codes used in this tutorial.

You’ll find more selectors and style plugins like this inside the Squarespace CSS cheat shet, available at insidethesquare.co/css

Be sure to edit the values so they match the style of your own website!

📚 Squarespace CSS Resources → insidethesquare.co/css

🍿 Free Squarespace tutorials → insidethesquare.co/tutorials

🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help