Course pages

Create a series of guided lessons to offer visitors seeking your expertise.

Last updated December 17, 2024

Build a course page to teach your visitors a new skill, guide them through a project, or otherwise share your expertise. To sell access to your course, add it to a pricing plan.

This guide covers the basics of course pages, how to add one to your site, and customizing your course page.

Accessing this feature

Course pages are only available on version 7.1.

Tip

Register for our Create and sell online courses with Squarespace webinar. We’ll provide guidance on preparing a curriculum, building an online course, and monetizing your courses with pricing plans.

Course page structure

Course pages have a two-part structure: the course overview page and the individual lesson pages in the course. There are a few other elements to a course page, including chapters and the progress bar.

Tip

You can include images, text, forms, and more by adding page sections to both the course overview page and lesson page.

Course overview page

The course overview page is the homepage for your course. It displays the course description, a Start course button, a progress bar, and the chapters and lessons of the course. You can add sections to the course overview page to outline the content included. 

If the course overview page is in your main navigation section of the Pages panel, it’s visible to all your visitors.

Course Overview page

Course Overview page

Lesson pages

The lesson page displays the content of the lesson, and a Complete and continue button. Clicking Complete and continue takes visitors to the next lesson and updates the progress bar on the course overview page.

Only visitors that sign up for the course and log into their account can view lesson pages.

lesson page

lesson page

Chapters

Chapters hold lesson pages and their title displays on the course overview page. They’re an optional addition to your course page.

Chapters

Chapters

Course navigation

The course navigation menu displays the lessons, chapters, progress, and the duration of videos in the course. To view the menu, your visitors must sign up for the course and click the Start course button. Visitors click the course navigation icon to expand the menu.

Squarespace course page with course navigation expanded to show progress, chapters, and lessons

Squarespace course page with course navigation expanded to show progress, chapters, and lessons

Progress bar

The progress bar tracks how much of the course a visitor has completed. As visitors complete lessons, the progress bar reflects their progress percentage.

While you’re editing the site, the progress bar shows 0%. To test the progress bar, preview the page, work your way through the course, and watch the progress bar update.

Add a course page

To add a course page:

  1. Open the Pages panel
  2. Click + beside the navigation section where you want the course page to appear.
  3. Under Collections, select Course.
  4. Select the layout you want.
  5. Enter a page title, then press Enter.

After adding the course page, the course overview page shows on the right side of your screen.

Tip

You can duplicate a course page and all of the lessons it contains. This is a great way to build new course content or experiment with the course content you currently offer without visitors noticing the changes.

Course page settings

Edit the course page settings to personalize your page:

  1. In the course page panel, click the gear icon.
  2. Change the page settings, including the course page specific settings:
    • Course name - The title that appears in the browser tab
    • Course summary -  A description that appears when the page is linked elsewhere 
  3. Click Save.

Add lessons

Lessons are the course content. They include videos, and page sections with images and text. You can add up to 250 lessons per course page.

To add a lesson to your course page:

  1. Open the Pages panel
  2. Click the course page where you want to create a lesson.
  3. In the course page panel, click Course Content, then click +
  4. In the dropdown menu, select Lesson.
  5. In the General tab, enter a title for the lesson. Titles must be 200 characters or fewer.  You can also add and edit these optional features:
    • Excerpt - A short description of your lesson. This displays on the course overview page and in summary blocks. We recommend keeping your description to 500 characters or fewer.
    • Custom URL - We assign a URL that matches your lesson’s title. You can edit this URL.
    • Thumbnail - Add an image that represents the lesson. This displays on the course overview page, in the course navigation menu, and in summary blocks. In the course navigation menu, a play symbol appears over the thumbnail image.
  6. In the Video tab, you can add a video to your lesson. If your lesson doesn't include a video, or if you want the top of your lesson to be a page section instead, switch the Show lesson video off.
  7. If your lesson includes a video, click Add a video, then: 
    • To upload a video file directly to your site, click Upload File.
    • To reuse a video you’ve previously uploaded, click Select from library.
    • To embed an externally hosted video, click Add from link, and paste a Vimeo or YouTube video link.
  8. In the Status tab, click to Publish or Schedule the lesson to publish. You can also leave the lesson as a Draft to continue working on it.
  9. Click Save.
  10. Click Edit in the top-left corner, then add page sections that include your lesson’s content.

Tip

Review our image best practices to create an engaging thumbnail image.

Lesson page videos

A lesson page video displays at the top of the page like a banner. You can add one lesson page video to each lesson page. To add more videos, add video blocks to the block areas on the page.

If you didn't add a video when you created the lesson page, follow these steps to add a lesson page video to an existing lesson page:

  1. Open the Pages panel and click the course page. 
  2. Click Course Content.
  3. Hover over the lesson where you want to add the video, click ..., then click Edit Lesson.
  4. Click Video, then click Add a Video to upload a video, add a video previously uploaded to your library, or embed a video from a third-party service.
  5. Click Save.

Tip

Review our video accessibility tips to ensure that your entire audience can engage with your course content.

If you upload a video, you can add a custom featured image that displays before the video plays. 

To add a custom featured image:

  1. After the video uploads, switch the Custom featured image toggle on.
  2. Click Add an image.

Keep in mind, this option is only available for videos uploaded to Squarespace. Embedded YouTube or Vimeo videos pull their featured image from the third-party service.

Lesson page video storage limits

Videos added to the lesson page’s Video tab can be up to three hours long, storage allowing. To learn more about video requirements, visit Adding videos to your site.

Every Squarespace site comes with 30 minutes of video storage across all pages and uploaded videos. For more video storage, consider purchasing a Digital Products plan.

Add a chapter (optional)

Chapters help organize your course content by grouping lessons together. Visually, chapters connect similar or sequential lessons. You can add up to 250 lessons to a chapter.

To add a chapter to your course page:

  1. In the course page panel, click Course Content, then click +
  2. In the dropdown menu, select Chapter.
  3. The new chapter is now in your course page panel. Hover over New Chapter and click , then enter your chapter title. Chapter titles must be 200 characters or fewer.
  4. Click Save.
  5. Click and drag lessons into your chapter.

Organize lessons and chapters

Lessons and chapters appear on your course overview page based on the order they’re listed in the course page panel. You can click and drag lessons in or out of chapters, or into a different order. You can also click and drag chapters to be in a different order. 

Style a course page

Colors and fonts on the course page follow your site-wide font and color tweaks. To access the styles for the course overview page or the lesson page:

  1. Click Edit on the course overview page or lesson. 
  2. Click Edit Layout to open the course overview or lesson page style settings.

Style the course overview

After clicking Edit Layout to open the style settings on the course overview:

  1. In the Elements tab, use the toggles to choose which elements are visible or hidden on the course overview page. The options include Course TitleCourse DescriptionCourse ButtonLesson Thumbnails, and Lesson Excerpts.
  2. In the Design tab, style the course overview's spacing, alignment, button styles, layout, and more.
  3. Under Layout in Design, select List or Grid. In the list layout, lessons display in one column as a vertical list. In the grid layout, lessons display in rows to create a grid.
  4. In the Colors tab, choose a color theme for the course overview.

Keep in mind, the list and grid layouts have different style options. For example, you can change the lesson thumbnail aspect ratio in the list layout, but not the grid layout.

Style lesson pages

After clicking Edit Layout to open the style settings on a lesson page:

  1. In the Elements tab, use the toggles to display your course title, course description, course button, lesson thumbnails, and lesson excerpts.
  2. In the Design tab, you can style the course header, spacing of page elements, alignment, button styles, lesson page thumbnail display, section styles, and course outline settings. You can also enable and style a divider between sections on the lesson page.
  3. In the Colors tab, choose a color theme for the lesson page.

Additional lesson page style options

You can find more style settings when a course is in progress. To access these settings:

  1. Click Start course or Continue course on the lesson page you want to style.
  2. Click Edit, then click Edit layout.
  3. In the Design tab, style the desktop button settings, mobile button settings, course navigation, lesson elements, and divider.

The style changes you make affect all lesson pages in your course page. This is to ensure style and design consistency from one lesson page to the next.

Sell access to your course page

You can sell access to your course using pricing plans. You can also offer free pricing plans and require visitors to provide their email address.

When you add a course page to a pricing plan, you can hide the entire course page behind a paywall, or only the lesson pages. If you hide only the lesson pages, the course overview page will be accessible by all visitors to your site.

When lesson pages are behind a paywall, you can make specific lessons accessible for visitors who haven't signed up for your pricing plan yet. To do this, hover over the lesson in the side panel, click ..., then click Set as Public Preview. Keep in mind, if you hide the entire course overview page behind the paywall, visitors can't access the lessons set to public preview.

Tip

Add a digital product block to your course overview page to encourage your visitors to sign up.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.