Course Pages and Product Pages

How to set-up your course pages on the back-end #

Most of the options for setting up your course you can find on the back-end of your course page. To set up your course page go to Tutor LMS / Courses and click on a course to edit it.

How to assign a course author and categories #

On the course back end page, scroll down the page until you see the Course Settings. Then under Author tab you will see a drop-down window to choose from the users with “instructor” and “admin” role in your site. On the right side of the course author box you will see the box where you can assign a course category. You can choose one or a few categories from your list. At the moment, the course grid only displays one category – the first one in alphabetical order. If you have assigned more categories to your course, they will still be active, but they will not be displayed on the course grid.

How to set-up a course duration, difficulty level and featured image #

On the course back end page, scroll down the page until you see the Course Settings. Then under General tab you will see a drop-down window to choose the difficulty level of your course. On the right side of the Course Settings tab you will see an option to add a course Featured Image.

How to set-up Free courses #

On the course back end page, scroll down the page until you see the Add Product. Then click on the Free option there to make the course free. After that you have 2 options for your free course: – to make it Public – this means that anybody will be able to see the course content (lessons) – to Not make it Public – this means that users will need to be logged-in and registered in order to see the course content (lessons) You can set whether the course will be Public or not from the field just above the “Add Product” field.

How to set-up Paid courses #

To do that first you need to create a product, which will be associated with the course. To do that go to Products > Add New. Then, add a name to the product. The best practice for the name of the product is to be exactly the same as the name of the course that we want to associate it with. This way the product will be easier to work with and there will be no room for mistakes later. Then, scroll down the page until you see the Product Data tab. Then, check the Tutor box to set it up as a Tutor LMS product. And give the product a price – this will be your course price. Then, click on the Publish button to publish the product.

After you have set-up the product for the course go back to the course back-end page. Then scroll down the page until you see the Add Product tab. Then, click on the Paid option and chose the product to associate it with from the drop-down field below.

How to setup your product page to display a button that leads to your course page #

If you are using WooCommerce and Tutor LMS together for your desired course payment and management solution then you will have both a course page and a product page for that course on your site. The product page will be accessible from the Mini Cart and Cart page of your site – If a user clicks on a course added to cart from the mini cart or from the cart page the user will be redirected to the corresponding product page, not the course page. And, as this might cause confusion, to avoid this confusion and make the UX better, Divi eLearn child theme comes with a pre-made layout for your product pages, to smoothly direct users to the course pages. This is how it looks like:

As the product page layout is a Theme Builder layout, the button “Go to course page” needs to display a dynamic information, as that link will be different for each product. So, what you need to do in order for this link and layout to work properly for each product is: 1. Within the product admin page scroll down to “Custom fields” box and click on “Enter New”

2. In the name box type course_url . And in the value box insert the link to the course page (the link can be relative as shown in the example below)

3. Add the product to “Courses” category. 4. Don’t forget to click “Update Product” button at the end

How to create course topics and lessons #

On the course back end page, scroll down the page until you see the Course Builder tab. You can add new Topics, Lessons and Quizes from there. To create a topic click on the “Add New Topic” button and in the pop-up that appears give your topic a name. A topic is basically a group of lessons and the name of the topis is the name that you want to give to that group of lessons. Then, click on the “down” arrow to expand the topic and click on the + Lesson button to create a lesson under that topic. From the pop-up that appears give the Lesson a name and click on the Update Lesson button. You don’t have to do anything else here, as we will be adding the Lesson’s content from the front-end page of the Lesson with the Divi Builder. Check on the next Documentation topic to see how to do that.

How to customize your course pages on the front-end #

To customize your course page with the Divi Builder, just go to the page and click on “Edit with Divi Builder” as usual. Each of the course pages is built entirely with the Divi Builder and is using modules for Tutor LMS to display Tutor LMS elements within the page. You can use any of the existing course page layouts that come with eLearn theme, or you can build your own ones. You can have different layouts for your different course pages, or you can set-up one layout to show for each course. You can set-up a global layout from the Divi > Theme Builder options.

Tutor LMS modules for showing dynamic content #

You can use Tutor LMS Divi modules when you want to display dynamic Tutor LMS information wherever you want on your course page. Divi eLearn for Tutor LMS has the following Divi Tutor LMS modules: -Divi Tutor Course Content module – displays the lessons/topics/quizes that your course consists of.

– Divi Tutor Course Status Module – displays the course status

– Divi Tutor Course Price Module – displays the course price

– Divi Tutor Course Button Module – displays a button. The main idea of the button is to be a “Buy Now” button, but it shows different things depending on different scenarios. In the module, you have the option to “preview” how the button will look depending on whether the course has been added to cart, enrolled, started, finished etc.