Course Outline
Course Outline
Renders the sections and lessons of the current course as a compact list, marking each lesson with a completion icon and linking the lessons the visitor can open. It wraps LifterLMS's [lifterlms_course_outline] shortcode and replaces the stock icons with Elementor icons you choose. Unlike the Course Syllabus widget, which prints LifterLMS's full syllabus with a preview card per lesson, Course Outline is a plain title list built for sidebars and navigation.
Usage
Course template sidebar — Place the widget in a side column of a course template built with Templates > Theme Builder so every course page shows its curriculum next to the Course Content and Course Progress widgets; see How to Build a Course Template.
Lesson navigation — Add the widget to a lesson template with Make the outline sections collapsible on. The section that contains the current lesson opens and the others stay closed, so long courses remain readable; pair it with Lesson Navigation for previous/next links. See How to Build a Lesson Template.
Focus on the next step — Set Outline type to Current section to show only the section a logged-in student is working through, for example above a Course Continue Button.
Shortcode instead of a widget — Outside Elementor, use LifterLMS's own [lifterlms_course_outline] shortcode (see LifterLMS shortcodes); you lose the icon and typography controls but get the same list.
How it works
The widget resolves the course from the current course or lesson page, hands the list to LifterLMS to render, then swaps each lesson's status icon for the icon set in the widget.
| Situation | Behaviour |
|---|---|
| Course or lesson page with at least one section | The full section and lesson list renders. On a lesson page the lesson's section counts as current; on a course page the section of the student's next uncompleted lesson does. |
| Course has no sections | Nothing is rendered (with Outline type set to Full). |
| Outline type is Current section | Only the current section renders for a logged-in student. If the student has no next lesson (course finished) the full outline is shown instead. For logged-out visitors the full outline renders. If no current section can be found for a logged-in student, nothing is rendered. |
| Lesson completed by the visitor | The lesson gets the completed icon and the Item complete typography (struck through by default). |
| Lesson not yet completed | The lesson gets the uncompleted icon or, when none is set, the completed icon with the normal icon colour. |
| Lesson the visitor cannot open (not enrolled, drip, prerequisite) | The title is printed without a link, the row carries the llms-lesson-locked class and LifterLMS's restriction message as a tooltip. Free lessons stay linked. |
| Make the outline sections collapsible is on | Each section header toggles its lesson list; the current section starts open, the others closed. The widget re-binds LifterLMS's collapse script when Elementor loads the element, so it also works in the editor preview. |
Settings
All of the widget's controls sit in the Content section of the Content tab, in the order shown below. There is no Style tab.
Content
| Setting | Description |
|---|---|
| Make the outline sections collapsible | On lets visitors expand and collapse each section; the current section starts open. Off (default) lists every lesson at all times. |
| Display "Open All/Close All" buttons | Yes adds Open All · Close All links below the list. No (default) omits them. Shown only when Make the outline sections collapsible is On. |
| Outline type | Full (default) lists every section. Current section lists only the section that holds the student's next lesson; see How it works for the fallbacks. |
| Outline Gap | Vertical space, in pixels, between lesson rows. Default 2. |
Icons — a completed / uncompleted tab pair, one set of controls per state
| Setting | Description |
|---|---|
| Icon | The icon shown next to each lesson in that state, chosen from Elementor's icon library or an uploaded SVG. The completed tab defaults to Font Awesome's check-circle; the uncompleted tab is empty by default, in which case the completed icon is used for every lesson. |
| Icon size | Width of the icon, 0–100 px. Default 18. |
| Icon Position | Before (default) prints the icon in front of the lesson title; After moves it behind the title. Shown only when an Icon is set on that tab. |
Icon colour — a normal / hover / complete tab trio, shown only when a completed icon is set
| Setting | Description |
|---|---|
| Icon Color | Colour of the lesson icon in each state: normal (uncompleted lesson, default #ccc), hover (default #646464), complete (completed lesson, default #e5554e). |
List items — an Item normal / Item complete tab pair
| Setting | Description |
|---|---|
| List item typography | Elementor typography for lesson titles in that state. Item complete defaults to a line-through decoration. |
| List item text color | Colour of the lesson title (and its link) in that state. |
Section titles
| Setting | Description |
|---|---|
| Section Title Typography | Elementor typography for the section headers. |
| Section Title Color | Colour of the section headers. |
Advanced
The Advanced tab holds Elementor's own layout, motion, responsive and custom-CSS controls — see Elementor's documentation. Lifter Elements adds one section, Conditional Logic, which shows or hides this widget by the visitor's LifterLMS status — see the Conditional Logic reference.
Notes
- The widget must be on a course or lesson page (or a Theme Builder template for one) to find its course; on other pages it renders nothing.
- The markup is LifterLMS's
course/outline-list-small.phptemplate (.llms-widget-syllabus,.llms-course-outline,.llms-section,.llms-lesson), so theme overrides and CSS written for the LifterLMS outline shortcode apply here too. Only the status icons are replaced. - The Icon Color tabs (and their colours) are hidden entirely while the completed icon is cleared, even if an uncompleted icon is set.
- Related: Course Syllabus, Course Progress, Lesson Navigation, Course Continue Button.