Would you like to find out How to create an online course with Tutor LMS and Elementor?

Knowledge sharing is a beautiful thing and it comes in various forms including online courses. Online courses empower those who seek knowledge, but they also empower those who create it. With an online course, you can build an audience, establish yourself as an authority, and even earn money if you want to monetize your content.

Creating an online course, however, is not an easy task, especially if you are not a developer. To help you in this task, Elementor has partnered with LMS tutor.

Tutor LMS is a WordPress Plugin LMS (Learning Management System) which manages all the key aspects of the “course” such as:

  • Creation of courses, lessons, quizzes, homework, etc ...
  • Manage access to your courses and even charge one-off or recurring payments if needed.
  • Manage and interact with your students, such as sending announcements to your candidates and answering student questions.

What's especially useful about Tutor LMS is that it offers deep integration with Elementor, allowing you to design all of your course content using Elementor's visual interface and over 25 custom widgets. With this duo, you have the power to create flexible courses while still retaining the ability to use Elementor to design your website.

In this step by step guide, we are going to show you exactly how you can create an online course with Elementor and Tutor LMS.

What you will create in this tutorial.

Before we get into the tutorial, we want to give you a quick tour of what exactly you'll be creating in this guide.

With Tutor LMS you can set up your own custom courses on any topic, with different lessons, quizzes, etc ... Then you can use Elementor 25+ widgets and Tutor LMS to create your page design. Classes.

Here's an example of what it might look like - all content is from Tutor LMS, but the design is powered by Elementor:

Students will be able to progress in your courses and quizzes. They will also have their own dashboard where they can manage their enrolled courses and track their progress.

As a course owner, you will also get dashboards where you can manage your courses, students, income, etc. You can also interact with students through announcements and Q&A.

This is just a quick tour to give you an idea of ​​what you are going to create.

How to create an online course with Elementor

Are you ready to create your online course?

Here is a high-level overview of the steps you will need to take to launch your course:

  1. Configure your basic WordPress site and install the required plugins.
  2. Add your course content using Tutor LMS,
  3. Design your course pages using Elementor.
  4. Set up payments through WooCommerce if you want to charge for access.
  5. Configure other miscellaneous settings as needed, such as whether or not you want to allow third-party instructors.

1. Create a website and install the required plugins

Before you start building your online course, you will need to set up your basic WordPress website and install the plugins you will need.

Configure WordPress

If you haven't set up WordPress yet, your first step is to choose WordPress hosting and install the wordpress software.

Once you've purchased the hosting, use your hosting provider's WordPress installer to create a new WordPress site for your online course.

Install plugins

Once you have your basic WordPress website, the next step is to install and configure the necessary plugins.

Here are the required and optional plugins that you will need to create a course:

  • Elementor – mandatory – the Elementor plugin Free Basic lets you design your course content and other pages using a visual, drag-and-drop editor.
  • Elementor Pro - optional - you will need to install Elementor Pro if you want to use Elementor Theme Builder to design your website. However, you only need the free version of Elementor to design your Tutor LMS courses.
  • LMS tutor - mandatory - the free Tutor LMS plugin provides the engine to power all your course content, lessons, quizzes, student / instructor management, etc. Basically all the functionality of the course. It will launch a setup wizard as soon as you activate it - be sure to follow the steps to set up some important basics for your course.
  • LMS Pro Tutor - optional - you do not need the premium version to take this course. But if so adding a lot of features can take your courses to the next level, then you might need to consider it.
  • LMS Tutor Elementor Addons - mandatory - this free plugin gives you over 25 Elementor widgets that allow you to design your online course using Elementor.
  • WooCommerce - required if you want to accept payments - you will need WooCommerce if you want to monetize your courses and accept one-off or recurring payments. If you need help setting it up check out our guide on How to install and configure WooCommerce
  • Elementor – mandatory – the Elementor plugin Free Basic lets you design your course content and other pages using a visual, drag-and-drop editor.
  • Elementor Pro - optional - you will need to install Elementor Pro if you want to use Elementor Theme Builder to design your website. However, you only need the free version of Elementor to design your Tutor LMS courses.
  • LMS tutor - mandatory - the free Tutor LMS plugin provides the engine to power all your course content, lessons, quizzes, student / instructor management, etc. Basically all the functionality of the course. It will launch a setup wizard as soon as you activate it - be sure to follow the steps to set up some important basics for your course.
  • LMS Pro Tutor - optional - you do not need the premium version to take this course. But if so adding a lot of features can take your courses to the next level, then you might need to consider it.
  • LMS Tutor Elementor Addons - mandatory - this free plugin gives you over 25 Elementor widgets that allow you to design your online course using Elementor.
  • WooCommerce - required if you want to accept payments - you will need WooCommerce if you want to monetize your courses and accept one-off or recurring payments. If you need help setting it up check out our guide on How to install and configure WooCommerce

Choose a theme

Finally, you also need to configure the basic design of your course. We'll show you how to design your course pages using Elementor later in the tutorial, but you need to configure the basic design of your home page and other key pages.

You have a few options here.

First of all, you need to use free hello theme then import the Elementor ONLINE COURSE Model Kit. This is a comprehensive set of templates that will help you set up all the main pages in your course and allow you to use Elementor Theme Builder to customize your website design.

Or, you can use a dedicated Tutor LMS theme like TutorStarter, which features demos that are created with Elementor. You can import any of the demos and then customize everything using Elementor's interface.

For this tutorial, we'll be using one of TutorStarter's demos - you can choose the approach you prefer, however.

Here's what importing one of TutorStarter's Elementor designs looks like:

Configure course content

Now you are ready to configure your course content and lessons. Then, in the next section, you will learn how to control your course content design using Elementor.

Create a course

To create your first course, go to Tutor LMS → Course → Add New.

First, fill in all the basic details of your course, such as title, description, categories / tags, options in the Settings area of ​​the course. course and options in the area Additional data. You can also set a dedicated course intro video:

Once you've done that, you can configure your course structure using the box. Course builder by drag and drop.

You can divide your course into different “topics”. Inside each topic, you can add lessons, homework, live lessons, and quizzes. Here is a diagram that shows how it works:

To start, add a new section in the area of the course builder. Inside each topic, you'll see an invitation to add a lesson or quiz. With Tutor LMS Pro, you will also see options for live zoom assignments and lessons.

If you need to change the order of anything, you can use the drag and drop feature:

Add lesson content

To add a lesson and check its content, click on the link Lesson in the courts of builder. This will open a popup where you can:

  • Add the name of the lesson.
  • Introduce the textual content of the lesson in the editor.
  • Define the lesson video. Generally, you will needembed videos from YouTube or Vimeo. Tutor LMS offers the option of using its own video player, which will prevent visitors from sharing your course videos if you don't want to.
  • Download attachments if necessary.

You will then see your lesson appear under the topic in the lesson builder.

Repeat the process to add any lessons you want to include in your course. Again, if you need to change the order of the lessons or move them to another topic, you can use drag and drop.

Add quizzes (optional)

If you want to add quizzes to your course, it works like adding a lesson. To get started, you will click on the link Quizz in the section where you want to add the quiz. This will open a pop-up window where you can set up your quiz and add questions.

You can add an unlimited number of questions and choose from different types of questions. You will also get other settings, such as assigning a point value to a question for scoring:

To access other types of quiz questions, you can upgrade to the premium version of Tutor LMS. It includes new question types for short answers, matches, picture matches, picture answers, etc.

In the quiz settings, you will also be able to configure details such as:

  • Delays.
  • Feedback modes.
  • Whether new attempts are allowed. If so, how much.
  • Passing marks.
  • Etc ...

Once you are done, you should see your quiz appear in the Course builder. You can repeat the process to add more quizzes and use drag and drop to change their placement in the course if needed.

Preview your course and publish it

Once you are satisfied with the structure of your course in the builder of Classes, you are ready to preview and publish your course.

To preview it, just click Preview option in the upper right corner as you would use it to preview any other type of WordPress content. Don't worry too much about the design - you'll learn how to control that next. You just need to make sure that the overall structure of your course looks correct, and you've added all the necessary details.

Once you are satisfied with everything, you can click the button Publish to publish your course:

Design your course with Elementor

At this point, you've added all of your course content to the backend of your website. Now you are ready to display this content on the front end using Elementor.

Besides letting you design other parts of your website, the Elementor integration of Tutor LMS gives you two ways to design the templates for your courses:

  1. You can create a global template that applies to all courses.
  2. You can override the overall template for individual courses to create a custom design.

Let's see how to design your course templates first, and then we'll cover other areas, such as creating a page to showcase your courses.

Enable Elementor for Tutor LMS content

To get started, you need to tell Elementor that you want to use it for Tutor LMS content. To configure this, go to Elementor → Settings. In the tab General, check the following boxes in the list Content types :

  • Courses
  • lessons
  • Quizz
  • tasks

Create a global template for your courses

Then you can use Elementor to create the overall template that all of your courses will use by default.

To get started, go to the area Models from your dashboard and click on Add. In the pop-up window, select Page in the drop-down list, then check the box Unique Tutor LMS course template. You can then give it a name to help you remember it:

Now you will be in the Elementor interface. To add course content, you can use the dedicated Tutor LMS widgets.

As you add them, Tutor LMS will automatically populate them with your actual course content, just like using Elementor Theme Builder:

You should use most widgets, although you can omit some widgets if you don't want to display this information. One widget that you don't want to leave out is the course registration boxbecause that's what visitors will use to register for the course.

You can use all the other Elementor widgets as well, so feel free to get creative with your design.

Once you are happy with how it looks, click Publish.

Create a custom design for a course (optional)

If needed, you can also use Elementor to override the overall course template for an individual course.

To do this, open the course editor (Tutor LMS → Course). Then click on the button Edit with Elementor to open the Elementor interface for this course:

Create your course archive page (course list)

If you have multiple courses, your course archive page is the page that lists all of your courses so that visitors can see everything you have to offer.

If you have a lot of courses, you may need to create a dedicated course archive page. Or, maybe you just need to include a list of courses on another page (like your home page). Or, you might have to do both!

To help you view all or part of your courses, Tutor LMS comes with two dedicated Elementor widgets, each with many sub-options:

  1. List of courses
  2. Carousel route

With the widget List of courses, you can display a single or multi-column list of all your courses with four different “skins”:

  • Classic
  • Map
  • Stacked
  • Superimposed

In the widget settings, you will also get many other options to control metadata, registration buttons, pagination, etc ... If you have a lot of courses, you can also use the query rules to filter specific courses by category or trainer.

The widget Course carousel has the same basic options and skins, but it shows your courses in a carousel view instead of a list.

You will get additional options to control navigation, autoplay, infinite loop, etc ...:

In addition to using these Elementor widgets to list your courses, you can also designate an actual course archive page if you navigate to Tutor LMS → Settings → Courses.

4. Course access fees (optional)

If you only want to offer free lessons, you do not need to configure anything in this section. But if you want to charge for access to your courses, you need to set it up now.

Tutor LMS offers several options for accepting payments, including WooCommerce, Easy Digital Downloads (EDD), and Paid Memberships Pro. For this section, however, we'll focus on the WooCommerce integration.

You can accept one-off payments with the basic WooCommerce plugin. If you want to accept automatic recurring payments, you will need to purchase the popular plugin. WooCommerce Subscriptions.

To charge for access to your course, you'll create a regular WooCommerce product and link it to one of your courses. Then the details for that product will appear on your course listing page, and students can purchase it using the regular WooCommerce checkout (and any other payment gateways you've set up).

Once you've set up the basics of WooCommerce, here's how to set it up with Tutor LMS.

Enable monetization

First, you will need to enable monetization in the Tutor LMS settings. Go to Tutor LMS → Settings → Monetization and define the Monetize option on WooCommerce:

Create a WooCommerce product

Now go to Products → Add  to create the product that you will link to your course.

You don't need to fill out all the product information like you would a real WooCommerce store. Instead, just focus on:

  • Title
  • Description
  • Product image (it will appear on the checkout page, but it will not be visible on your course page)
  • The price (or, if you have WooCommerce subscriptions, the subscription details)
Elementor: How to create an online course with Tutor LMS

Link the product to your course

Once you've created the product, open the course editor you want to link to that product. Scroll down to the area Add product at the bottom of the course editor.

Define the Type of course on Paying, then use the drop-down list to select the WooCommerce product you created in the previous section:

Elementor: How to create an online course with Tutor LMS

And that's all ! To display the price of your course in your course template, you can use the widget Course price in Elementor. For paid courses, the widget Registration box to the course will automatically switch to "Add to cart" to invite users to purchase the course and register.

When students check out, they'll see the normal WooCommerce checkout process. Once they've made their purchase, they'll be automatically enrolled in the course – you also have the option to automatically redirect them to the course page.

5. Configure additional settings as needed

At this point, we've covered all the basic features you need to get a course up and running. To finish things off, you need to explore the settings of Tutor LMS and make a few other changes if needed. This is where you can dig in and customize your course to meet your needs.

But before jumping into Tutor LMS settings, there is a regular WordPress setting to complete.

Enable recording in WordPress settings

In order to allow students to register for your courses, you must ensure that you have enabled registration in the WordPress settings area. You can do this by going to Settings → General and by checking the box membership so that everyone can register:


In addition to the registration button on individual courses, Tutor LMS also allows you to create a registration page where students can create an account. You can specify this page by accessing Tutor LMS → Settings → Learners.

To facilitate the connection of learners, you can also use the Login widget in Elementor Pro to add a login form anywhere on your site. The Login widget also allows you to redirect users to a custom page after they log in, so that you can automatically redirect them to their account dashboard.

Configure general course settings

Now let's take a look at some of the other settings in the Tutor LMS Settings area.

In the tabs General, Course, lessons et Quiz, you can configure important bases for these areas.

For example, you might want to use the native YouTube video player instead of Tutor LMS's custom video player. You can configure it from the tab General. Or, you can automatically redirect users to their course after completing a WooCommerce purchase in the Cours

We encourage you to explore all of these settings, as you may find useful options for your courses.

Allow multiple instructors

So far, we have mainly focused on the idea of ​​creating a course with a single instructor (eg you or your client). But Tutor LMS also allows you to authorize multiple instructors, including a commission split option. This would allow you to hire multiple instructors under your own brand or create your own Udemy clone where you allow third-party instructors to sign up and create their own courses.

If you want to allow multiple instructors, you can configure it from the tab Trainers in the Tutor LMS settings. You can also specify an instructor registration page and choose whether or not instructors directly publish their own courses:

So far, we have mainly focused on the idea of ​​creating a course with a single instructor (eg you or your client). But Tutor LMS also allows you to authorize multiple instructors, including a commission split option. This would allow you to hire multiple instructors under your own brand or create your own Udemy clone where you allow third-party instructors to sign up and create their own courses.

If you want to allow multiple instructors, you can configure it from the tab Trainers in the Tutor LMS settings. You can also specify an instructor registration page and choose whether or not instructors directly publish their own courses:

If you want to offer instructors a commission on the course revenue they generate, you can set it up from the Earnings tab. You can also specify a minimum withdrawal amount and choose withdrawal methods in the tab Withdrawal.

And that's all ! You now have a working online course powered by Elementor and Tutor LMS.

How to manage your online course (payments, integration, etc.)

Now that you've set up your online course and created a beautiful design with Elementor, let's move on to how you can manage the key parts of your course on a day-to-day basis. This covers actions such as:

  • Manage and integrate new students.
  • View / manage payments and earnings.
  • Manage instructors (if you have decided to authorize multiple instructors).

Manage and integrate new students

At this point, your students will be able to sign up for accounts and sign up for free or paid courses on their own.

They'll also get their own dashboard where they can view their registered courses, leave reviews, and access other key details:

As the course owner, you will also get tools to manage and interact with your students. You can do this from the main WordPress dashboard or your account's frontend dashboard (which is especially useful if you allow third-party instructors).

A key area of ​​interaction is Questions and answers. Your students have the option to leave questions about each course / lesson and you can then answer these questions from your dashboard (backend or frontend).

You can also create announcements, which allow you to send a message to all students in a course. Again you can do this from the backend or the frontend depending on your preference.

You'll also get other dashboard areas to view your student list, view quiz attempts, and perform other key admin actions.

With Tutor LMS Pro and the Tutor Report add-on, you'll also get a dedicated dashboard with an overview of your courses and options to track enrollments and stats over time, which is useful for spotting trends in your lessons:

Elementor: How to create an online course with Tutor LMS

View and manage payments

If you are selling courses, you might have situations where you need to view and manage your payments, and maybe even offer refunds if necessary.

Because you are using WooCommerce to manage payments for Tutor LMS, you can view all of these details from WooCommerce settings - WooCommerce → Orders to view specific commands or WooCommerce → reports to see the global reports.

If you use WooCommerce Memberships for recurring payments, you can also track and manage subscriptions.

You or your instructors can also track earnings from the frontend dashboard. If you allow third-party instructors and pay commissions, they will also be able to see their history of earnings and withdrawals.

Instructor Management

If you allow other instructors to create courses, you can manage all of your instructors by going to Tutor LMS → Trainers in your WordPress dashboard. You can manually add new instructors, edit existing instructors, and block instructors as needed.

Create your own online course with Elementor and Tutor LMS

Creating online courses is a great way to build an audience and monetize your knowledge. You can share your knowledge on web design or any other subject where you have experience.

By combining LMS tutor et Elementor, you can create unique and personalized courses without the need for special technical knowledge.

Tutor LMS can handle all the important features of the course. Then, with Tutor LMS Elementor widgets, you can use Elementor's visual drag-and-drop interface to design your course content and templates.

Start creating your first course today and you'll be up and running in no time.

Get Elementor Pro Now!

Conclusion

So ! That's it for this article that shows you how to create an online course with Tutor LMS and Elementor. If you have any concerns about how to get there let us know within Comments.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...