LMS, News & Updates 5 Min Read

Introducing Tutor LMS Elementor Addons: Create Custom Course Page, Course Carousels, Course Lists, and More

Tutor LMS Elementor Addons

Hello everyone! Are you all staying indoors? We sure are! And what’s a better way of spending time at home than working with your favorite LMS platform. As such, we’ve brought you a pleasant surprise to up your LMS game! We have completed a highly requested integration with Elementor. Elementor is well known in the WordPress community as one of the most popular and versatile page builder plugins.

Meet Tutor LMS Elementor Addons, a game changing free WordPress plugin that lets you create custom course page, showcase courses in stylish carousels & lists, and edit individual courses for different designs. If you ever dreamed of creating and styling your eLearning course site with the popular Elementor page builder, the Tutor LMS Elementor Addons opens that gateway for you.

Requirements

To utilize this integration on your eLearning website, you will need a few things first: 

Most interestingly, Tutor LMS Elementor Addons works with both Free and Pro versions of Tutor LMS and Elementor page builder.

Once that is done, you need to allow Elementor to make changes to Tutor LMS courses. To do so, head to WP Admin > Elementor > Settings > General and make sure these post types are selected:

  • Courses
  • Lessons
  • Quizzes
  • Assignments

After that, you will be able to build single course pages with Elementor using all of its amazing features.

What Tutor LMS Elementor Addons Brings For You

Elementor is unmatched when it comes to designing WordPress pages, and you can now take full advantage of it to create the eLearning platform of your dreams. It’s built for professional-grade WordPress pages, applicable for freelancers, individual instructors and agencies alike. It allows you to create pixel-perfect designs with responsive and optimized addons. Being such a huge player in the WordPress community, Elementor also has a massive library of other addons that will enhance your WordPress LMS platform even more!

Due to its popularity, there is a massive number of users that feel right at home using Elementor. This is why we believed synergy between Elementor and Tutor LMS was super important and that’s why we prioritized it. Our integration adds 24+ fully functional addons that will completely change the way you think about eLearning courses.

How Tutor LMS Elementor Addons Works

We have made Elementor work in two major ways with Tutor LMS. We’ve added 24+ completely customizable widgets, or addons to Elementor’s sidebar that will let you build custom courses in 2 different ways. Let’s take a look at both and then we’ll get into the specifics on how to get them working:

  • Global Course Templates: Global templates are somewhat self-explanatory. If you add a global course template, it will override all other templates and use that layout for all courses. This is useful if you want to make all your courses look and feel exactly the same.
  • Single Course Customization: This allows you to customize each course separately and independently. With this mode, you can change each course’s structure and layout depending on its requirements.
  • Display Course Carousels & Lists on Any Page: Tutor LMS Elementor Addons lets you create course carousels and course lists on any page created with Elementor page builder. Now you will be able display courses in stylish carousels and lists in multiple predesigned layouts.

Create a Global Course Template

To take advantage of the Elementor builder on your Tutor LMS powered site, you will have to add a new single course template. On the left side of your WordPress admin page, you will notice a tab called Templates right below the Elementor tab. From there, click on “Add New” to create and add a new template.

Global Template Settings

Select “Page” from the drop-down and tick the “Tutor LMS Single Course Template” toggle. Then name the template, and you’re good to go. From there, you’ll be taken to the Elementor page builder’s template editor. This is where the magic happens!

You will now be able to use the 24+ new and highly customizable Elementor add-ons to change the look and layout of the single course page. These are taken directly from Tutor LMS’s single course page, and now you can rearrange them however you want. You’re not limited to the default layout of Tutor LMS anymore! Create your custom layout to bring focus to the sections of the pages you want to prioritize. 

After you are done designing the single course template, hit update, and you can see the new design by visiting any of your courses’ page.

Customizing Single Courses

Do you want to specifically customize each course pages differently? You can do that too with Elementor! To do so, navigate from the backend WordPress dashboard to Tutor LMS > Courses and then open any course from the backend. From there, you will see a button called “Edit with Elementor” which will take you to the single course editing panel.

Launching the Elementor Editing Panel

This will load the default layout of the course built only with Elementor addons and then you can then easily drag and drop additional elements, and even customize the existing ones by a simple click of a button. Hit save when you’re done and you’re good to go! You can then watch as your course takes a completely different shape and form in the frontend.

Custom Course Editing

With this plugin installed, not only can you create some amazing designs, you can also customize each aspect of the course to make it look just the way you like. Here’s a few examples to get your creative juices flowing!

Structure and design every page of your Tutor LMS powered eLearning site on your favorite Elementor page builder

Wrapping Up

If you’re an Elementor master and use it exclusively for your projects, then this integration will undoubtedly add value to your eLearning sites. So, what are you waiting for? Go ahead and download the Tutor LMS Elementor Addons and start creating!

During 2021, we will integrate more amazing WordPress products with Tutor LMS. You might be thinking, how do we determine which plugins to integrate with ours? It’s very simple. We listen to you! So, keep commenting and reaching out to us, and we will definitely be listening.

Get Plugin View Demo

Leave a Comment

19 Comments

  • Joe-Hoff@Outlook.com
    February 24, 2021

    hi
    I need to update my current Variable Products at Elementor/WC with a price carrousel with products variations+prices: do you believe I can use this ?

    • Sekander
      February 24, 2021

      Hello Joe,
      This integration is for designing the course pages generated by Tutor LMS. It does not have any feature to modify WooCommerce products at this moment.

  • Janek Tuttar
    February 11, 2021

    Hi,
    Do you plan to add similar Gutenberg blocks which can be used in order to customize course pages?

    • Sekander
      February 24, 2021

      Hey Janek,
      Currently, we are working on the Divi integration. We do not have plans for Gutenberg yet.

      There is a free theme planned with Qubely integration though. There are a lot of plans going on at this moment. 2021 is a very important year for us. If you are on Facebook, you may join our group to know the updates and plans about Tutor LMS. The group name is “Tutor LMS Community”.

      If we plan something for Gutenberg, then we will definitely share on our FB group 🙂

  • hcmendez
    February 1, 2021

    Hello, this integrations is awesome! I have created my whole site with it. Now i’m facing a problem, I want to create course archive with Elementor and when I create an archive template this isn’t used by TutorLMS and it still uses the defalt /courses archive. How can I change that?

    • Ruhit Rafian Prinon
      February 1, 2021

      Hi! We’re glad that you liked our integration!
      The easiest way to create a course archive page is to create a page and then use the Course List addon. This will give you the course archive with options to change the list as well as customize the surrounding elements using other Elementor addoms.

  • seba.t.i.s.s.i.e.r
    January 14, 2021

    Hi. This add-on is fantastic but after installed it, it seems to break my translation ( half French half English ) >> https://www.loom.com/i/3c53f75ea5d248f4b82afe634221a54e

    And even after using Loco Translate some words like “Start Course” or “You have been enrolled on” can’t be translated. I thinks its a bug 🙁

    • Sekander
      January 14, 2021

      Hi,
      I am sorry to know that you are facing problems in your site. We might need to have a deeper look in your site. Please send an email to support at themeum dot com with the page link that is causing the problem.

      • kartuno
        February 10, 2021

        I’m with the same problem. I need translate to portuguese, but the plugin just break all translation, when i disable, all works fine again.

        • Sekander
          February 10, 2021

          Please use the contact form on our site and share the details. Our support engineers will help you 🙂

  • DouglasI
    January 12, 2021

    Great work on this eagerly awaited add-on! From what I can see, not much of the Elemetor widgets/elements were created for the actual course/lessons-page customizations; when can we expect lessons-page customization widgets/elements for this Elementor add-on?

    • Sekander
      January 12, 2021

      You can enable classic editor support on the lessons and then use Elementor there.

      Lesson template or the design is not something you will need to customize everyday. The lesson template design remains the same in all courses. The course page might need customization because of promotions and conversion purposes.

      So, we do not have plans for lesson template yet. You can override the lesson template from a theme or plugin. You can also use the action hooks and filters as well 🙂

  • Dwconsult
    January 11, 2021

    Great eagerly waiting for this update. Thanks

    Will Edumax theme and Skillate be compatible with elementor ?

    • Sekander
      January 12, 2021

      For now, we do not have Elementor compatibility on the theme demo pages. But you can use elementor on the themes.

    • galih
      January 11, 2021
  • Nils Dannemann
    January 11, 2021
    • Ruhit Rafian Prinon
      January 12, 2021

      Thank you Nils! 😀

  • Mat QV
    January 11, 2021

    Just amazing guys!

    • Sekander
      January 11, 2021

      Glad to know that you liked! 😃
      Please share with your social circle if possible. We need to spread this free solution to everyone.