With the seamless integration of Tutor LMS and Droip, you can create fully customized, dynamic LMS websites using Droip’s visual, no-code WordPress builder.
Whether you’re launching a new LMS site or redesigning an existing one, this integration lets you design professional-grade course pages with complete visual and structural flexibility.
What You’ll Need Before Getting Started
To use this integration, make sure the following plugins are installed and activated on your WordPress site:
- Tutor LMS (latest version)
- Droip (latest version)
Once both are active, Droip will automatically detect Tutor LMS and enable LMS-specific options and elements in its visual editor.
What You Can Do with This Integration
With Tutor LMS & Droip, you can:
- Design LMS Pages Visually: Create custom designs for Course Index, Course Details, Categories, Tags, and Instructor pages—visually, using Droip’s no-code builder.
- Use Dynamic Tutor LMS Data: Display real-time course content, metadata, instructor profiles, and more using dedicated Tutor LMS elements—no manual data binding required.
- Personalize Content with Conditions: Use visibility rules to show or hide content based on user roles, enrollment status, or login state.
- Start from Templates or Build from Scratch: Use ready-made LMS page templates and design blocks, or start fresh with a blank canvas.
What’s Included in the Integration
Dedicated Tutor LMS Elements
Fetch and display Tutor LMS course data dynamically:
- Material – Displays course content like videos, quizzes, assignments, Zoom/Google Meet links
- Course Meta – Shows all related course info: benefits, prerequisites, progress, ratings, etc.
- Course Action – Adds enrollment-related actions: Add to Cart, Wishlist, etc.
- Thumbnail – Displays the course thumbnail image or video preview
- Price – Displays course pricing: free, regular, or discounted.
These elements are available under Insert → Elements → Tutor LMS inside the Droip editor.
Essential LMS Pages
Key Tutor LMS pages you can create visually:
- Course Listing – Index page for all published courses
- Course Detail – Template for individual course pages
- Course Categories – Lists courses by category
- Course Tags – Lists courses by tags
- Instructor Profile – Displays instructor-specific details
The pages are dynamic, which means you only need to build once, and the design auto-apply across all related content.
Ready-to-Use Layouts and Components
Choose from predesigned LMS sections or full-page layouts:
- Course cards
- Instructor bios
- Review and rating blocks
You can customize every part using Droip’s design tools—colors, layout, typography, responsiveness, and more.
How to Create LMS Pages in Droip
Step 1: Open the Droip Editor
From your WordPress dashboard:
- Go to Droip > Open Editor, or
- Go to Pages, click the + icon, and select a page type under the “LMS Page” section.
Step 2: Choose Your LMS Page Type
You can create the following dynamic page types:
- Course Listing
- Course Detail
- Course Categories
- Course Tags
- Instructor Profile
📝 Pages labeled with “(Template)” mean they are dynamic templates. For example, designing a single Course Detail page will apply the layout to all individual course pages automatically.
Building Your Page: Layout Options
Option 1: Start with a Pre-made Layout
After choosing an LMS page type, you’ll see a pop-up offering layout options:
- Choose a ready-made layout – It will come pre-connected to dynamic course data
- Start from a blank canvas – Gives you full creative freedom
When you choose a ready layout, the layout automatically connects to your course data, so there’s no need for manual setup.
You can also access pre-made LMS components anytime later from the Insert Panel → LMS in Droip.
You’ll find reusable design blocks such as:
- Pre-built course cards
- Instructor highlights
- Rating sections
- And more
All designs are fully customizable using Droip’s styling tools.
Option 2: Start from Scratch
If you prefer building your layout from the ground up:
- Choose the Blank Canvas option.
- Go to Insert → Elements and design your page layout freely on the visual canvas.
- Drag in the desired LMS elements (e.g., Course Meta, Thumbnail, Price) to display Tutor LMS course data.
- You can also mix and match pre-made LMS components from Insert Panel → LMS to create your own layout.
- Style them freely using Droip.
With Droip, you’re in full control—adjust spacing, add animations, define breakpoints, and more.