Custom Course Pages

Pro Plus Feature

The customizable course page templates feature in MasterStudy LMS allows users to define the layout and structure of course pages according to specific requirements.

A single template can be applied globally to all courses, while courses can also be assigned a different template individually as needed.

You can edit predefined templates or create new ones using MasterStudy widgets within the Elementor page builder. For non-Elementor users, there are also 10+ native course page styles. This provides flexibility in presenting course content while maintaining consistency with the site design.

The main goal of using individual course pages is to transform them into conversion-driven mini landings. With 50+ customizable Elementor widgets, you can build clean, purpose-driven layouts with full control or apply advanced pre-built templates.

What is a Course Page?

Course Page or Single Course Page is a page in your LMS website that will display all details, information - course short description, long description, cover image and video, curriculum, reviews, number of enrolled students, etc. With this page, you will advertise your courses, and students will buy the course via the Get Course button here. That's why it's important to develop a friendly and promotional page for it.

Here are the available Advanced Customizable Course Page Templates:

Masterclass

Minimalism

Streamline

Assign Default Course Page

You can change the default course page template that will be applied to all courses globally from the MasterStudy plugin settings.

1

Follow WP Dashboard > MS LMS > Settings > Course:

2

There is a section lets you choose the template that will be used as a default Course Page template. You can use the Preview button to check how it will look on the front-end.

3

To change the template, click on the Change Template button:

4

It opens a page consisting of three different tabs:

• Template Library - a list of fully customizable Elementor-built templates. They have been built with MasterStudy Elementor widgets. You can select them and change them according to your needs. The copy of the selected template on this tab will be displayed on the My Templates tab as a new template.

• Native Templates - pre-built native course page templates of MasterStudy. Some sections on the course page can be enabled or disabled from the MS LMS > Settings > Course Page tab, but the layout and the design of these templates are not customizable. They work best for those users who do not use the Elementor page builder and like to standardize all courses.

• My Templates - on this tab there will be displayed your saved course page templates.

Here are the available Advanced Customizable Course Page Templates:

Masterclass

Minimalism

Streamline

5

You can select any of the ready templates from the Native Templates and My Templates tabs. Once you are done, click on the save button:

Assign Individual Course Page

You can assign different course page styles for courses individually. It means different courses on your website may have a different look. It's a very handy tool if you want to emphasize and give more attention to some specific courses.

1

Edit the course you wanted to assign a different course page than the default one:

2

Move to the Settings > Course Page:

3

You can choose any ready template in the My Templates or Native Templates tabs and save the changes:

Creating Custom Course Page Templates

Custom Course Pages are created using Elementor page builder and special 50+ MasterStudy Course widgets. That's why make sure you have activated Elementor on your website.

Let's see an example by editing the ready Elementor build template. Following the same logic, you can craft your course page from scratch

1

Reach the Template Library tab. You can go there from the plugin settings or in the course builder:

Here are the available Advanced Customizable Course Page Templates:

Masterclass

Minimalism

Streamline

2

Choose the template and click on Copy & Edit:

3

Give a name to the template and click on continue. By doing so, the system creates a copy of that template, and it will be displayed on the My Templates tab.

4

Move to the Templates tab. On this page, you will see the template you have created. We will edit it with Elementor. Moreover, on this page, you can check the preview of the saved templates, copy or delete them:

5

It will open the template in Elementor:

6

There are two types of widgets used in these templates:

• Dynamic - these types of widgets come with MasterStudy, and they display info based on the course. You will not enter the information fully. For example, course image, course curriculum, course review, etc. The system automatically takes the information from the database and displays it. You can not manually change them in Elementor. They are labelled as LMS and LMS Course and grouped into sections named MasterStudy.

• Static - these types of widgets are mostly default Elementor widgets and some MasterStudy widgets used in landings. You can change their content within Elementor. For example, cards, containers, pictures, some statistics, testimonials, etc.

7

If you select the widget, on the left sidebar, its preferences will be opened:

• Content - this tab is unique for each widget. Usually, you will set the number of items displayed, choose the preset, etc.

• Style - on this tab, typography settings and colors for the widget can be adjusted.

• Advanced - there are different settings you can adjust like paddings, margins, actions, etc.

8

For static widgets, you have to check all texts and adjust them according to your needs. Because they will show the same results for all courses that you use this template.

9

Once you are done, click on the Publish button:

You are done! Now this template can be assigned to any course or as the default course.

List of MasterStudy Course Widgets

Here you can check all available Elementor Course Widgets by MasterStudy:

Widget Name	Presets	Description
Categories	Standard, Classic with icon	Displays the Course Category
Updated	-	Displays the last updated date and time of the course
Enrolled	-	Displays the date and time which student is enrolled in the course. The widget will not be displaye in front-end if the student is not enrolled in.
Details	Standard , Horizontal , Horizontal Divided, Grid, Grid Compact	Displays the full course details: Course Duration, Number of Lectures, Videos, Quizzes, and Course Level.
Icon Box	Standard, Vertical	Display the selected icon with some text. Do not take any info from the course. Text should be provided within Elementor.
Curriculum	Standard , Classic	Displays the Course Curriculum. You can choose the specific section to display as well.
Notice	-	Displays the Course Notice by the instructor.
Current Students	Classic , Classic with icon	Displays the number of students enrolled in the course.
Excerpt	Full Text , Shortened Text	Displays the short description of the course.
FAQ	-	Displays the Course FAQ.
Instructor	Standard , Compact	Displays the author of the course.
Materials	-	Displays the attached course materials.
Info	Basic Info, Course Requirements, Intended Audience	A universal info widget that displays the relevant information based on the chosen preset.
Popular Courses	Vertical , Horizontal	Displays the popular courses on your website.
Price Info	-	Displays the price information of the course.
Rating	Standard , Standard Row , Classic , Compact	Displays the current Course Rating in the form of numbers and stars based on student reviews.
Related Courses	Horizontal, Vertical	Displays the related courses matching the course category and topics.
Reviews	Standard, Rewievs Grid	Displays the detailed course reviews or the latest reviews by students based on the chosen preset.
Complete	-	Displays the date and time which is completed the course. The widget will be hiddan in case the course is not completed by the student.
Share Button	Standard , Extended	Displays the social media buttons to share the course.
Wishlist	Standard , Standard without label	Displays a button that lets users save the course to their wishlist.
Countdown	Standard , Gray Card	Displays a contdown with the specified date in the Elementor.
Status	-	Displays the course status like Hot, New, Special etc.
Thumbnail	-	Displays the Course Cover image.
Title	-	Displays the Course Title.
Expiration	-	Displays the Course Expiration date.
Buy Button	-	Displays a button that adds the course to the checkout page. Users will buy the course using this button.
Grades	-	Displays the Course Grade if the student has completed the course. The Grades addon should be activated and set up accordingly to use the widget.
Coming Soon	-	Displays the course start date with a countdown and a notification button if the course has a coming soon status. The Upcoming Course Status addon should be enabled to use the widget.

If you want to learn about other MasterStudy LMS Widgets, refer to this manual:

LMS Widgets