Elementor Integration

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

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

New-page

  • 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.

Masteriyo Elements

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

  1. Course List
  2. Course Category

Basic Configuration

Course List

CourseList Element

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

Elementor-General

Click on the Course List element that you have just dragged into the widget and you will see the options to set under the General tab on the right sidebar.

  • 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

Courses 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

CourseSorting

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

Course Category Element

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

Course Category General

Click on the Course Category element that you have just dragged into the widget and you will see the options to set under the General tab on the right sidebar.

  • 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

Course Category 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

add-new-template

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

template-name-screen

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.

default-layout-import

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.

customizer-screen-single-course

Build From scratch

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

course-page-scratch

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.

course-content

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.

demo-import-archive

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.

customize-demo

Build From scratch

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

course-archive-widget

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.

template-selection

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



Was this article helpful to you?
Give us Rating

Last edited on May 22, 2024.
Edit this page