Brand new in 2023, Squarespace Courses is a new feature that let’s us create lesons in chapters of content. In this video, you’ll learn about the important setup, settings, and design options available for course lessons in Squarespace.
– – –
Free Course on Squarespace Courses: https://insidethesquare.co/course
– – –
Lesson pages currently have five main parts: the video, the video info (chapter title & lesson title) and a space for adding page sections, a footer, and a sidebar that acts separately from the page content.
You can use the video display section to assign a unique button style for desktop and mobile separately.
Course Navigation refers to the sidebar; you can toggle this to be on the left or right.
You can also choose to display the lesson thumbnails or not!
In this design menu, you can adjust the spacing between the header content and the border, as well as the chapter and lesson title separately. We also have the option to toggle on a divider which works the same way it does for standard page sections.
After the lesson content, you can add multiple page sections. These seem to function like standard page sections and respond to standard CSS selectors, and have unique data section ID’s. And yes- we can add auto layouts, like gallery & list sections! 🎉
Finally, a footer section displays the complete & continue/next lesson button. This section does not appear to have any design features.
What you’ll find in the site styles menu:
Side Nav Background Color
Side Nav Text Color
Side Nav Active Lesson Background Color
Side Nav Active Lesson Text Color
Border Color
What you’ll find in the font menu:
Side Nav Chapter Name (Set to Heading font style by default)
Side Nav Chapter Metadata (Set to Miscellaneous font style by default)
Side Nav Lesson Name (Set to Paragraph font style by default)
Side Nav Lesson Metadata (Set to Miscellaneous font style by default)
Course Name (Mobile) (Set to Heading font style by default)
Course Name (Set to Heading font style by default)
Chapter Name (Set to Paragraph font style by default)
Lesson Name (Set to Heading font style by default)
🖼️ A quick side note about images:you can upload a custom image for a video overlay like we currently have the option for in a standard video block. When you are in EDIT mode for the specific lesson, *select Edit Video and then toggle on Custom Featured Image. Here you can upload the image file for the video overlay.
– – –
More info about lessons is available in my free course on courses:
https://insidethesquare.co/course
– – –
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ https://buymeacoffee.com/insidethesquare
– – –
📑 Get access to my collection of CSS codes for Squarespace at https://insidethesquare.co/css
– – –
⭐ NEW: List of my top 7 FREE Squarespace tutorials: https://insidethesquare.co/top7
– – –
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
– – –
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
– – –
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 – You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → https://insidethesquare.co/inside10
– – –
The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
