Set up for Webflow courses

Community resources General
1

I’m sure someone must have asked this before, but how do I set up a page like this:

My hierarchy is this:
A course
with chapters or categories
with lessons

1 Like
2

I’ve been meaning to play with this for a bit, so it was a good time for a mockup.

Here’s the demo site and readonly link.

This approach handles some of my primary goals well enough-

  • Rich lessons, with video and or richtext
  • Good navigation, showing the current lesson in a ToC structure
  • Ability to url-link directly to a lesson

A few key design points-

  • I don’t think the Chapter really adds anything beyond visual structure, so I’ve handled it as an optional label. That makes the CMS hierarchy far simpler.
  • The main course nav is a nav bar, styled differently. It turns out that Link Blocks also pick up the .w--current styling when placed in a Navbar.
  • Sequencing items is a pain, I’ve assigned decimal numbers so items can be inserted in-between easily later.
1 Like
3

@Jan_Fredrik_Bjorntve those Webflow University courses are visually appealing, I really like them and how they are structured.

I built an example course site on Webflow with Memberstack (to gate access and collect payments).

It’s much more bare bones, and lacks that awesome navigation, but I’ve created a step-by-step screencast walking through exactly how to set it up:

And here is the demo of the course you’ll build with that tutorial:

It’s feature complete and will get you most of the way there.

You can signup with a fake email to test how it all works.

2 Likes
4

Hey @Jan_Fredrik_Bjorntve , today is your lucky day!

We’ve made a fully functional Webflow University clone which, of course, includes that page!

Go check it out and clone it at this link!

2 Likes