Course Layouts – Elementor Addon for TutorLMS

Course Layouts – Elementor Addon for TutorLMS gives you a complete set of Elementor widgets to design course discovery pages, student dashboards, and instructor directories for Tutor LMS—without writing code.

Place filters in a sidebar, search in a header, and the course grid anywhere on the page. Link them with a shared Listing ID and they work together instantly via AJAX. Every layout is fully customizable in Elementor, with responsive column controls, extensive style options, and optional Elementor Loop Item templates for pixel-perfect course cards.

Why use Course Layouts?

• All-in-one course discovery — Grid, filters, search, sort, chips, and pagination in one cohesive system
• Design freedom — Built-in cards or your own Elementor Loop Item / Saved Template designs
• Composable layouts — Split discovery controls across your page (sidebar filters, top search, bottom grid)
• Personalized experiences — Show enrolled, in-progress, completed, or wishlisted courses per student
• Theme Builder ready — „Current Query“ mode respects archive taxonomies, authors, and search in AJAX
• Conversion-focused cards — Smart price labels, enrollment CTAs, progress bars, badges, and wishlist
• SEO support — Optional ItemList / Course JSON-LD schema on course grids (3+ courses)
• Accessible & fast — ARIA labels, live result announcements, skeleton loading, and debounced AJAX

Elementor Widgets (10)

All widgets live under the Essential TutorLMS category in Elementor.

Course Directory Grid The main course listing widget. Responsive 1–6 column grid, built-in card or Loop Item skin, embedded or standalone filters/search, pagination, and full styling controls.

Course Categories Grid Display course categories in a card or list layout with image, title, description, course count, and optional view button. Sort by name, slug, ID, course count, description, or random.

Course Filter Panel Standalone filter sidebar or horizontal bar. Connects to any Course Directory Grid via Listing ID. Up to 8 configurable filter fields with Clear All.

Course Search Standalone debounced search box linked to a course listing by Listing ID.

Active Filter Chips Removable filter pills that reflect the current filter state—ideal for zero-results recovery and quick filter removal.

Sort & Result Count Standalone sort dropdown (newest, title, popularity, price) plus live „Showing X–Y of Z“ result count.

My Courses Student dashboard grid (extends Course Directory Grid) pre-set for enrolled, in-progress, completed, or wishlisted courses with progress display.

Continue Learning Highlights the student’s most recent in-progress course with thumbnail, next lesson, progress bar, and resume button.

Instructor Directory Browse Tutor instructors in a responsive grid with search, category filter, ratings, course/student counts, bio, and profile CTA.

Composable Discovery (Listing ID + CLETA.Bus)

Version 1.3 introduces a pub/sub architecture so discovery widgets can live anywhere on the page:

1. Set a Listing ID on the Course Directory Grid (default: courses).
2. Add Filter Panel, Search, Active Filter Chips, and Sort & Result Count widgets anywhere.
3. Give each the same Listing ID—they sync automatically via CLETA.Bus.

Filters, search, sort, and pagination update the grid over AJAX without a full page reload. Filter state can be written to URL parameters for bookmarking, sharing, and browser Back/Forward navigation.

Filtering & Search

Filter field types: category, level (Tutor 4.x meta), tags, instructor, price, rating, duration, and custom meta key.

Filter styles: dropdown, checkbox, radio buttons, and range slider (price, rating, duration use real catalog min/max/step values, cached for performance).

Smart facets: option counts beside each value; empty options hidden automatically.

Auto-apply: filters apply on change; range sliders debounce before reload.

Search: debounced AJAX search across course titles and related fields; works embedded in the grid or via the standalone Search widget.

Combine filters: up to 6 filter fields in the grid widget, up to 8 in the standalone Filter Panel.

Query Sources

Control which courses appear in the grid:

• All courses — full catalog (optionally limited by category)
• Current Query — respects Theme Builder archive context (category, tag, author, search)
• Enrolled — courses the logged-in student is enrolled in
• Not enrolled — courses the student has not joined
• In progress — started but not completed
• Completed — finished courses
• Wishlisted — courses on the student’s wishlist

Personalised sources require a logged-in student. My Courses defaults to enrolled with quick switching between student-specific lists.

Course Cards

Built-in card skin toggles for:

• Featured image with configurable size
• Title, excerpt (configurable length), and whole-card link
• Price (free, sale, membership, subscription-aware labels)
• Rating, duration, lesson count, enrollment count
• Instructor name and link
• Categories, level, tags, and benefits
• State-aware CTA: Enroll / Buy / Start / Continue
• Progress bar for enrolled students
• Badges: New, Free, Bestseller (enrollment threshold filterable)
• Wishlist heart (integrates with Tutor LMS wishlist)
• Skeleton loading placeholders during AJAX updates

Loop Item / Saved Template skin lets you design cards in Elementor Pro Loop Items or any Saved Template, bind Tutor Dynamic Tags, and use them in the grid—including during AJAX filter, load-more, and pagination responses.

Elementor Dynamic Tags

A Tutor LMS (CLETA) dynamic tag group exposes course fields for use in any Elementor widget or Loop Item:

• Course Title
• Course Price
• Course Level
• Course Duration
• Course Lesson Count
• Course Enrollment Count
• Course Rating
• Course Instructor Name
• Course Instructor URL
• Course Progress %
• Course Enrollment Status
• Course URL (permalink)

Pagination

• Page numbers — classic numbered pagination with position control
• Load More — append next page on button click
• Infinite scroll — auto-load as the user scrolls
• Configurable courses per page (1–100)
• Accurate „Showing X–Y of Z“ counts

Sorting

Default sort in widget settings or via the Sort & Result Count bar:

• Date (newest / oldest)
• Title (A–Z / Z–A)
• Popular (review count)
• Price (low to high / high to low)
• ID, name, modified, menu order, random

Instructor Directory

• Responsive 1–4 column grid
• Filter by course categories taught
• Minimum rating threshold (3+, 4+, 5 stars)
• Sort by name, newest, or highest rated
• Front-end search and category filter
• Card toggles: avatar, name, job title, bio (truncated), course count, rating, student count, profile CTA
• Pagination

SEO Schema Markup

The Course Directory Grid outputs JSON-LD ItemList schema with nested Course entities when 3 or more courses are displayed. Includes title, description, URL, image, instructor, provider, and pricing where available.

Auto-injection on single course pages is intentionally disabled to avoid conflicts with Tutor LMS, Yoast SEO, or Rank Math.

Performance & Security

• Assets register globally; widgets enqueue only what they need
• Widget settings cached in transients (server-authoritative on AJAX—client cannot override)
• Filter catalog stats (price, duration, level facets) cached and busted on course save/delete
• Nonce verification on all AJAX endpoints
• Debounced search and range sliders to reduce server requests

Accessibility

• ARIA labels on filter and search controls
• aria-live regions for result count and grid updates
• aria-busy during AJAX loading
• Enter-key handling for search and filter fields
• Screen-reader text on sort controls

Responsive Design

Both course and category grids include responsive column breakpoints for desktop, tablet, and mobile. Filter panels support vertical (sidebar) and horizontal (toolbar) layouts.

Tutorials & Guides

• 17 Awesome Websites Made with Tutor LMS
• The Complete List of Tutor LMS Shortcodes and How to Use Them – Tutor LMS
• Sending Reminder Emails to Inactive Students – Tutor LMS
• Tutor LMS – Get Student Information in PHP
• How to Hide, Remove or Disable Reviews or Star Rating in Tutor LMS
• Create a User Directory with Elementor
• Best WordPress LMS Plugins to Create and Sell Courses Online

More Plugins by UserElements

• Personalized User Menu for TutorLMS
• WP User Data
• User Broadcast Email
• Elementor Product Table for WooCommerce

Support

For technical support, feature requests, or general questions, please visit userelements.com or create a support ticket in the WordPress.org plugin forum.