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
- Tutor Course Bundle
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 about 36 fully functional widgets that will completely change the way of designing the eLearning courses.
How Tutor LMS Elementor Addons Works
We have made Elementor work in two major ways with Tutor LMS. We’ve added 35+ 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.
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.
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.
But, you have to navigate to Tutor LMS Pro > Course Bundle in order to customize the bundle courses. From there select the course and follow the same procedure.
Note: You have to install Tutor LMS Pro and enable the “Course Bundle” addon in order to design a course bundle.
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.
domingoapineiro
It doesn’t work. I created a global custom template with Elementor and the course page keep having the default design. Is there any way to change the hierarchy for the template design? So the plugin could recognize the Elementor design.
isaacuser
Thanks for this explanation, but according to the “Single Course” Feature, I’m not able to achieve it. My courses stay with the old design. I’m using Elementor 3.12.
Please what can be the problem?
domingoapineiro
Hey! Did you find any solution for this?
Mitchell van der Hulst
Is it being considered to add support for editing the Tutorlms dashboard with elementor or a other way?
drmahanian
Is there a way to also edit the TutorLMS dashboard with Elementor?
Sekander
Hi,
I am sorry to inform you that we do not have the feature to edit the dashboard with any of the page. builders at this moment.
The only way to edit the dashboard page is to edit the plugin source code or override it from a child theme.
Niro
Any plan/roadmap for that?
[email protected]
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
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
Hi,
Do you plan to add similar Gutenberg blocks which can be used in order to customize course pages?
Sekander
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
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
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.
Prazo
I opted fot this route but my bookmark and labels are not working as expected.
Sekander
Hi,
I am sorry to know that you’re experiencing problems with our Elementor integration. I would appreciate it if you can share the issue details with the support team. I believe they will be able to debug and help you very soon 🙂
seba.t.i.s.s.i.e.r
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
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
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
Please use the contact form on our site and share the details. Our support engineers will help you 🙂
DouglasI
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
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
Great eagerly waiting for this update. Thanks
Will Edumax theme and Skillate be compatible with elementor ?
Sekander
For now, we do not have Elementor compatibility on the theme demo pages. But you can use elementor on the themes.
galih
+1
Nils Dannemann
Cool!
Ruhit Rafian Prinon
Thank you Nils! 😀
Mat QV
Just amazing guys!
Sekander
Glad to know that you liked! ?
Please share with your social circle if possible. We need to spread this free solution to everyone.