Ley Design Studio | Premium Squarespace Templates

View Original

How to Host Courses on Squarespace

Heads up: this post may contain affiliate links. In other words, if you make a purchase using my link, you won’t pay a dime more but I’ll earn a small commission. My chips and salsa fund thanks you from the bottom of its heart… er stomach?

Squarespace just released a brand new feature called Squarespace Courses, which means that now you can host courses right within your Squarespace website.

So in today's post, I want to take you behind the scenes and show you what features are available, the available customization options, and how it all works. Click the play button below to watch the video walkthrough or scroll down to read the written version of the post.

Squarespace Courses Overview

So the first thing that I want to tell you is that Courses are actually Collection Pages. They work similarly to the way Blogs work and Store pages work and other collection pages on your website work. You have one main collection page for your course, and then individual lessons within it are the sub pages. I also want to clarify that Squarespace refers to modules as chapters so if you’re coming from a different platform such as Thinkific or Teachable, keep that in mind.

And now let’s take a look at how to create a course and how to customize it.

Creating a Course With Squarespace

So we are going to go to the not linked section and I'm going to click the plus sign. If you look under Collections, you'll notice that you have a new collection called Course. Now when you click that, you have the ability to choose between two different layouts. Choose which ever one you like. In my case, I'm going to choose a very simple layout to begin with. You can customize this layout similarly to blog pages and shop pages. You can add sections above the main page area, but there's not a lot of customization that you can do within the actual course section page.

Once you create the course, the first thing that you'll see is that you have a page called course overview, which just shows your students, what can they find in the course. This gives them a list of chapters; as Squarespace called them, and then lessons within individual chapters.

They can see how many lessons are within each chapter and how much time they will need to complete the chapter, so to speak. The time is based on the video that is uploaded to each individual lesson. So, if you don't have a video, they won't have that visible.

Editing the Course Overview Page

Once you click on this course overview, and into the edit mode; you'll notice that there's a section at the top. This means you can add as many sections as you want to this page. So you can add additional sections, whether that's a blank section or one of the pre-made sections, or you can even add saved sections. Now, as far as the actual section for the course goes, where the course overview is; you can manage the lessons or you can edit the layout.

If you click on edit the layout, you can toggle several options here. First, you can decide which options are shown on the course overview, so you can toggle on and off course title, course description, and the button to start the course. You can also choose to show the lesson thumbnail. What I mean by that is each lesson has a thumbnail that can be used to identify it visually and you can decide to either show or hide that thumbnail, and you can also choose to hide the lesson excerpts to make the whole overview look a lot cleaner, if you will.

Under the design option, you can adjust the spacing between each individual element and elements on the page. You have the option to adjust padding, which just means the space between the course header and the top of the section.

Then, you can also adjust the course header width and spacing and the alignment. So if you change the alignment that will change the alignment for the description and for the button as well. You can also choose the course button to be either a primary, secondary, or tertiary button; however you have them set up on your website.

And then you can also adjust the spacing will be below the progress bar; which just shows your students how far they've gotten into the course. Another option is to adjust the spacing between individual content, so we can make this super small, we can make it medium or we can make it large, and of course there's the option to enter your own value by clicking the three dots, and then either dragging this slider or by entering your own custom value.

Lastly, you can add a divider to the page, which just means that you can have the similar styling as you would on any other page section that you want to use the divider on.

Under colors, you can change the color for that particular section; so you can make it light, a bright, dark, or whatever color you have set for your color themes.

That is as far as the layout for this section goes, and of course you can also move it up or you can move it down, depending on which section and how many sections you have on this page.

Adding Lessons and Creating Course Content

Now this all is where you control the layout of this individual, of this course overview page. If you want to actually change the style settings associated with it, you will do that under the site styles and I'll show you that a little bit later in this video. So for right now, I'm just going to click on save, and exit.

And now we are going to take a look at the course content. So, as I mentioned earlier, course content is split into different chapters. As far as editing the chapter goes, the only thing that you can do here is change the chapter title. So in that aspect, it's similar to how folders work in Squarespace the only thing you can change is the title. There's no option to edit the URL or anything of the sort.

You can add a new lesson. And within that lesson, you can add the lesson title; so we can call this a lesson three choosing your business structure or something like that. And then you can add the excerpt, which will be visible on the overview page and it will also be visible in summary blocks. In other words, if you're linking to this course and you want to display the contents in the summary block, this excerpt for the lesson will be visible there.

You can customize the URL for each individual lesson and make it shorter or longer. Yyou can add a thumbnail, which I mentioned, which will be visible if you toggled that option on under the course overview layout. You can duplicate a lesson or you can delete it. For video options, you can choose to show a lesson video if you want to have video lessons or you can hide it so it's not visible. And for adding a video, you have the option to either upload the file or to add a video from YouTube or Vimeo. If you upload a video, you'll also be able to set a custom featured image.

You can set the status of the lesson to be a draft if you're not ready to publish it, you can publish it immediately, or you can schedule it if you want to publish it at a specific time. This is similar to how scheduling a block post works. Essentially, you can pick your own date and time. This is useful if you want to drip out lessons over a period of time. One important note, if you delete the lesson it is gone for good. It does not go into your trash, like the regular pages go. It has gone for good. It's gone. It doesn't exist any more, so you'll have to recreate it from scratch. So if you don't want to do that, then I recommend changing the status to draft and leaving it like that, in case you change your mind.

Editing Lesson Page Settings with Squarespace Courses

So now I'm going to discard these changes, and now let's take a look at the settings that you have for each individual lesson. So first of all, if you click into three dots, this will bring you to the page that I just showed you where you can edit the title the excerpt and all that other good stuff. But if you actually click into the individual lesson, that will bring you to a page where you can edit the lesson.

So the first thing that I want to show you is here at the top, your students have the option to click complete and then continue, which will take them immediately to the next lesson in the course.

This sidebar is where they can keep track of their progress and see all the other lessons that are within that chapter and all other chapters in the course.

And then below when you hover over the section, you can also edit the layout. This means you can change the lesson buttons and the course navigation, whether you want it to the right or to the left, and you can also choose to show lesson thumbnails or to disable them; and then control the spacing between the lesson elements.

As far as the colors go, you can also change the color theme of that particular section. Now over here, when you hover to the next section, again, you can add more sections to this page, so you can add a blank section or any of the saved sections or any of the pre-made sections that Squarespace made.

This section, it functions as a regular section on any other page. So you can format it as you usually would, you can change the background by uploading an image or a video, you can change the colors, and you can add as many blocks as you normally would as with any other section within Squarespace.

And again, you can add as many sections as you want to this page.

So I'm going to exit out of this.

Squarespace Course Settings

And now let's talk about the course settings. So if you click on the cogwheel icon here, you can change the settings for this course. You can change the name, you can choose to add a course summary, which will appear on other pages on your website; so if you linked to this course on any other page on your website, this course summary will show up and it'll also be visible to the students in thier user account panels. So that is something to keep in mind.

You can change the navigation title, which is how it will appear here at the top of the navigation. And you can also change the URL, you can disable the page, which is useful if you're still working on the course, I recommend you do that. And you can add a password to this page. So if you want to password protect it you can. And then only those with the password will be able to see it. You can also set this as your homepage or you can delete it.

Under the advanced options, if you need to add any sort of custom code to your website or to that particular page, this is where you would do that. So if you want to add a live chat, If you want to add sharing buttons or something like that, this is where you would add those things.

Customizing the Course Styles

And now let's talk about styling the course. So if you want to style your course, you would click on site styles, and then you have the options to change the settings, both under fonts and under colors. Let’s tackle fonts first. If you click on assigned styles; and then scroll all the way to the bottom, you will be able to change the fonts for the course overview page, as well as for each individual lesson and keep in mind that the changes that you're making here we'll reflect on all other pages that are associated with that course.

This works similarly to how you would style the fonts for any other setting on your website. You click on one and then under style, you can choose either a paragraph heading, miscellaneous, or you can choose custom. If you choose custom, then you can choose a completely different font than what is on your website by clicking browse all fonts, and then you can select a completely different font for that.

Similarly, if you click on colors, and now let's click on a theme; let's say we want to add it this lightest one; and if you scroll all the way down, you can change the lesson and chapter background, the hover background, the lesson and chapter texts, course progress bar and chapter divider. You can choose any of the colors in your site palette, or you can enter a custom code here by clicking custom and pasting in your own hex code.

And of course, you can change this throughout all of the themes that you have available. So be careful if you decide to change the theme of this particular section, to go in and then customize the styles to make sure everything is nicely visible and legible.

Setting Up Pricing Plans With Squarespace Courses

And finally let's talk about pricing plans.

When you're done setting up your course, you can create a pricing plan for your course. So if you click on pricing, you will have the option to give the course a name, to enter a description for the course and add benefits for your course, which I think is especially nice. So you can click here and then add a benefit. For example, live Q&A calls every week, private community, and anything else that goes along with courses.

And you can add as many benefits as you want. And I highly recommend you do that because most people will be looking for the benefits that come with the course. And then you can set up the payment. You have the option to choose between a fixed amount, subscription, or set it up as a free course.

If we choose fixed amount, you can choose a payment plan; so let's say you want to sell your course with four payments of $172 for four months.

And then also one payment of 597, like that. So now we have two different options for selling your course. You can also set up recurring payments. So for example, you can charge something like $97 and repeat that every one month, week, or a year. And you can choose up to 11 monthly payments. You can also set up a for example, a yearly option yearly subscription let's set that up to 997, and that repeats every 11 months like, so.

Or you can choose to make the product completely free, which is useful if you have like a mini course or something, and you want to use it to grow your list. You can also set up your course to be available only during certain periods of time. So you can click when the start and end dates are for the course. Again, this is completely optional but there is an option to set it up.

And then, once you're done setting up your pricing options, you can click on create, and now the course will officially be created on your website. And now what you'll have to do is you'll have to create a digital product sales page to actually sell that course. I'm not going to cover that in this video because that's a topic for a whole nother video, but just keep in mind that once you've created the course, you do need to create a sales page where you will actually sell the course.

Final Thoughts

And that’s how you can host courses on Squarespace. I hope this tutorial was helpful for you and if you want to learn more about building a website with Squarespace, be sure to watch the free training below.


See this content in the original post

For more tips and tricks, check out these articles:

See this content in the original post