The Membership Site Builder plugin offers a number of pre-designed page templates that you can install, switch the placeholders with your own content and publish on your membership site. These page templates cover typical pages most membership sites need like a login page, Your Account page, Sales page, Ebook Download page and many others including pages for listing your Courses and Lessons.
Overview
Before we dive into the technical tutorial, take a look at the image below which shows how the Course Grid page, Individual Course page and Individual Lesson Pages are all tied together.
With our templates, you will be able to display a grid of all the courses you have but users will only be able to click on the courses they have access to. Once they go to the course page, they will see the list of all lessons in that course. Then they can click on the lesson and go to the actual content page which could be either be text based or include a video.
Once all of your courses and lessons pages are connected your entire program is ready to go.
Course Grid, Course and Lesson pages from Standard Membership Site template pack built with Gutenberg
That’s how things work when someone has access. However, when a member doesn’t have access to certain content, you can redirect them to the sales page if they click on a locked section. Once the purchase is complete, the course will be unlocked automatically by Memberium.
Apart from the courses and video lesson pages, there are other alternative pages also available that you can use if you want to offer free courses or if you have an audio course. Have a look at the below chart that shows some page templates from our Elite Program template pack and explains how you can connect those pages.
Course related pages from Infusionsoft version of Elite Program template pack built with ElementorHow to Link Your Course and Lesson Pages Together
Coming back to the individual pages, I will show how you can link your course and lesson pages together. Specifically, I’m referring to the course navigation that contains all of lessons inside the course. At the moment we offer 3 different versions of page templates – Elementor, Gutenberg, and Beaver Builder..
Based on design elements available for each builder and whether you download the entire site or individual page the process for linking the lessons and courses differ, I will cover the process for each builder in detail. See an example page below…
Elementor Templates
The process for linking the Courses and Lessons is the easiest with the Elementor page builder. The list of sample lessons or courses you see on the page is a Menu.
As you can see in the above screenshot, once you edit the page with Elementor and click on the course lessons section on the sidebar on the right, an Elementor menu editor shows up on the left side of the page. The menu selected is a prebuilt menu named ‘Lesson Menu Example’.
You can either create a new menu from Dashboard -> Appearance -> Menus screen in the WordPress admin area or edit the same menu, rename it with your course name and add the lessons to the menu.
If you install the entire site, the menu will be imported by Membership Site Builder plugin but in case of importing an individual page, the menu will not be imported. So you will need to create a brand new menu, add your lessons/links and save it. Then you can use it on the page by selecting the menu from the dropdown as discussed above.
Beaver Builder Templates
Similar to the Elementor templates, you will use menus for lessons and courses in Beaver Builder templates too. This is how our Individual Course Template page from the Standard Page Templates version looks with the lesson menu.
If you go ahead and edit the page with Beaver Builder and edit the element where you see the list of lessons, a widget will open that allows you to select the menu. See below screenshot…
If you download the entire site from Membership Site Builder the Lessons menu will already be imported and appear on the page. However, if you install the individual page, you will need to create a brand new menu from Dashboard -> Appearance -> Menus screen.
If you have multiple courses, you can create menus for each course and add the lessons for them accordingly. You can clone and use the Individual Course Page for each course and select a lesson menu for that particular course to display the lessons on the page.
Gutenberg Templates
Linking the lessons is slightly different with Gutenberg than the Elementor and Beaver Builder templates. Due to limited block options, instead of using a menu, the Gutenberg page templates display the lessons using categories for the lessons. Below is an example Individual Course Page for Gutenberg version.
The Gutenberg page templates use Post Grid block instead of the menu. The Post Grid block will present different options for you to select from such as Post Types, Taxonomy, Post per Page etc. See below screenshot…
By default the category is selected as Lessons. Assuming you have more than one course, you want to create a category for each course from Dashboard -> Posts -> Categories screen. Now you can go ahead and assign the respective category for each individual lesson page/post.
In the screenshot above, you’ll notice our sample lessons are assigned the category “Lessons”. There are also a few other posts that are uncategorized. Your site will probably have many posts and they won’t all be lessons. It is important to create a category for each course. If you only have one course, it’s okay to use the category we automatically create.
This is important because on the actual course page, the list of lessons is being pulled in based on the assigned category. In other words, we’re telling Gutenberg to show all posts that are assigned to the “Lessons” category (in the example above).
If you put multiple courses’ lessons into the same category, on the course homepage you’ll find all the lessons for all your courses in the list. This is not desired.
Summary
In this article, we discussed how you can replace the placeholder courses and lessons list in the page templates downloaded through Membership Site Builder plugin.
Both Elementor and Beaver Builder allow you to use a menu for displaying your lessons list while Gutenberg works based on post categories. In all cases, you’ll be able to replace the templates with your own content and link everything together quickly.
If you need any further help with the page templates, our dedicated support team will be glad to help you. You can contact us at support@memberium.com
