The Course Grid widget renders your published Tiger LMS courses as a responsive card grid — each card showing the course thumbnail, title and price — ideal for a catalog page or a “featured courses” row. It queries courses automatically, so there is no manual list to maintain.
Where: Elementor editor → search “Course Grid” → drag onto the canvas.
The widget lives in the Tiger LMS widget category and requires Tiger LMS to be active with at least one published course.
Content settings
The Content tab holds the two query controls:
- Number of courses — how many courses to pull (default 6, minimum 1).
- Columns — how many cards sit per row (default 3, range 1–6). Cards reflow to fewer columns on smaller screens automatically.
Style options
Everything visual lives on the Style tab, split into five sections:
- Grid — a responsive Gap slider (px, em, rem) controlling the space between cards.
- Card — Background (classic or gradient), Border, Border radius, Box shadow and Body padding. A Hover group adds a Hover border color, a hover Box shadow and a Hover lift slider (0–30 px) that raises the card on mouse-over.
- Thumbnail — a fixed image Height (40–400 px) plus a Background that shows through for courses without a featured image.
- Title — title Color and full Typography.
- Price — price Color and Typography.
Layout tips
- Keep 3–4 columns on desktop so cards stay readable; they stack responsively on tablet and mobile.
- Set a consistent Thumbnail height so cards align neatly even when source images differ in size.
- Combine a subtle Hover lift with a hover box shadow for a tactile, clickable feel.
Troubleshooting
No courses appear in the grid.
Confirm that courses are published in Tiger LMS and that Number of courses is set above zero. A brand-new site with only draft courses will render an empty grid.
Cards are different heights.
Uneven heights usually come from mixed thumbnail sizes or long titles. Set a fixed Thumbnail height in the Thumbnail section, and the image area will crop consistently across every card.