Elementor is a popular page builder plugin for WordPress that allows users to design and customize their website without any coding knowledge. When integrated into Masteriyo, it can provide you with the tools to create engaging and interactive e-learning content for your students.

Requires

• Elementor to be installed and activated.
• Elementor Integration add-on activated.

Setup and Configuration

Once you have installed the Elementor plugin and activated the Elementor Integration add-on from Masteriyo, follow the steps below.

• Go to Pages > Add New

• Provide the name for the page and click on Edit with Elementor

Now, you will see the Elementor page builder window. Here, you can find Elements section on the left-hand side. You can find the courses elements under the Masteriyo accordion.

You will find two elements under the Masteriyo section. They are:

1. Course List
2. Course Category

#Basic Configuration

#Course List

To add the course list, just drag this element from the left hand side to the widget you have made. Now, you can configure this elements as per your need. It has the following section to work on.

#General

• No. of Courses - Total number of courses to appear on this page
• Columns - Number of columns per row.
• Thumbnail - Settings related to the Thumbnail. Enabling this will show two more options.
  • Difficulty Badge
  • Featured Ribbon
• Categories - Show/hide the name of the Category
• Course Title - Show/hide the title of the courses
• Wishlist Icon - Show/hide the wishlist icon on the course cards
• Author - Show/ hide the author name. Enabling this will show two more options.
  • Avatar of Author
  • Name of the Author
• Rating - Show/hide the course's ratings
• Highlights/Description - Show/hide the course's Description
• Meta Data - Show/hide the section containing information on the number of students. course hours etc. Enabling this option will show three more options.
  • Course Duration
  • Students Count
  • Lesson Count
• Footer - Show/hide the footer section on the course card that shows pricing and purchase button.

#Filter

In this section, you will find two tabs. You can either include the options on this section or exclude them based on these tabs. Toggle between Include or Exclude as per your requirements. This section consists of the following options.

• Categories - Select the list of categories to include/exclude on the course cards.
• Instructor - Select the instructors from list to include/exclude on the course card.

#Sorting

As the name suggests, this section helps you to sort the courses in ascending or descending order by date, title, price or rating.

#Course Category

To add the course category, just drag this element from the left hand side to the widget you have made. Now, you can configure this elements as per your need. It has the following section to work on.

#General

• No. of Categories - Set the total number of categories to be shown on the page.
• Columns - Select total number of columns of the courses.
• Include Sub-Categories - Show/hide any sub-categories. These are the categories inside a parent category.
• Thumbnail - Show/hide the course's thumbnail image.
• Details - Enable this option to include details like Title, Courses Count etc.

#Sorting

As the name suggests, this section helps you to sort the courses categories in ascending or descending order by date, title, courses counts.

#Templates Creation

You can create templates with Elementor for the single course page and course archive page. Follow the insturction below.

• Go to Templates > Add New

You will see the following window to create a template. You will have two option for the Masteriyo.

1. Masteriyo Course Archive Page
2. Masteriyo Single Course Page

#Masteriyo Single Course Page

Select Masteriyo Single Course Page as the type of the template and provide a suitable name. Now, you can either import a default demo layout or create the template from scratch.

#Default Demo

If you want to import the default demo, click on Import button on the top-right side of the screen.

Once you have imported the default layout, you can now customize the looks of each sections on the single course page via the elementor options.

#Build From scratch

You can ignore the the demo import and build the single course page from scratch as well.

Just drag and drop the widgets of the Masteriyo LMS to the elements section. There are four main widgets are as follows:

1. Course Overview: Add this widget to show the course's summary/overview.
2. Course Curriculum: Shows the contents in the course like lessons, quizzes, etc.
3. Course Review: Shows the review collected by the course.
4. Course Contents: This is the collective widget of the above three widgets.

#Masteriyo Course Archive Page

Select Masteriyo Course Archive Page as the type of the template and provide a suitable name. Now, you can either import a default demo layout or create the template from scratch.

#Default Demo

If you want to import the default demo, click on Import button on the top-right side of the screen.

Once you have imported the default layout, you can now customize the looks of each sections on the course archive page via the elementor options.

#Build From scratch

You can ignore the the demo import and build the course archive page from scratch as well.

Just drag and drop the widgets of the Masteriyo LMS to the elements section.

#Template Selection

Once you have created the single course and archive page template, you can selecte the template from the following location.

Location: Masteriyo > Settings > Course Page/Single Course Page > Template

Enable Custom Template by toggling on the given button. Now, select the template you have created for the respective pages via their respective settings.

Hit Save Settings and the template will be applied to the selected page.

---

---