Lesson Navigation
Lesson Navigation
Renders links to the previous and next lessons of the current lesson, following the order set in the LifterLMS course builder. The widget extends Elementor's Button widget, so the links can be styled like any Elementor button or output with LifterLMS's own navigation markup.
Usage
Lesson template footer — Place the widget at the bottom of a lesson template built with Templates > Theme Builder, below the Lesson Content and Mark Complete Lesson widgets, so every lesson gets the same previous/next links; see How to Build a Lesson Template.
Separate previous and next buttons — Drop two copies of the widget into a two-column container and set Direction to Previous on one and Next on the other when you want each button positioned and styled independently.
Native LifterLMS look — Set Content to LifterLMS render to output the same preview boxes (label plus the neighbouring lesson's title) that LifterLMS prints on its own lesson pages, styled by the LifterLMS stylesheet.
Link only, no button — If you need just the address (for example in a heading or an image link), use the Next Lesson URL and Previous Lesson URL dynamic tags instead. For a dedicated link back to the course, use the Back to Course Button widget.
How it works
The widget resolves the neighbouring lessons from the current lesson's position in the course, across section boundaries, and links to their permalinks. It renders nothing meaningful outside a lesson, so use it on lesson templates.
| Situation | Behaviour |
|---|---|
| Previous and next lessons both exist | Both links render (with Direction set to Both), wrapped in a <nav class="llms-course-navigation"> element. With Previous or Next only that one link renders, without the wrapper. |
| First lesson of the course (no previous) or last lesson (no next) | With Link to parent course if no item? on Yes (the default), a link to the parent course, labelled with Course label, takes the missing link's place. Set it to No and the missing link is simply not rendered. |
| The neighbouring lesson exists but the student cannot access it yet (drip, prerequisite, not enrolled) | No link is rendered for that direction. With Custom buttons the empty llms-prev-lesson / llms-next-lesson wrapper is still output. |
| Content is Custom buttons (default) | Elementor's Button markup is output once per link, with the label replaced by Previous label / Next label and the URL set to the neighbouring lesson. |
| Content is LifterLMS render | Each link is output as a LifterLMS llms-lesson-preview box: the label on top and, when Show the lesson name? is Yes, the neighbouring lesson's title below it (the course title for the parent-course link). |
| Caching | The widget is marked as dynamic content, so Elementor does not cache its output. |
Settings
Content
| Setting | Description |
|---|---|
| Content | LifterLMS render outputs LifterLMS's own navigation markup, styled by LifterLMS. Custom buttons (default) renders Elementor buttons you style on this widget. The Button section and the whole Style tab are shown only for Custom buttons. |
| Direction | Which links to output: Previous, Next, or Both (default). |
| Previous label | Text of the previous-lesson link. Default Previous Lesson. Accepts dynamic tags. Shown only when Direction is Previous or Both. |
| Next label | Text of the next-lesson link. Default Next Lesson. Accepts dynamic tags. Shown only when Direction is Next or Both. |
| Link to parent course if no item? | Controls what happens at the first or last lesson. Yes (default): a link to the parent course is rendered in place of the missing previous or next link. No: nothing is rendered there. |
| Course label | Text of the parent-course link. Default Back to course. Accepts dynamic tags. Shown only when Link to parent course if no item? is Yes. |
| Show the lesson name? | Yes (default) prints the neighbouring lesson's title under the label. Shown only when Content is LifterLMS render. |
Button (Elementor's own section, shown only for Custom buttons)
| Setting | Description |
|---|---|
| Type | Elementor button preset: Default, Info, Success, Warning, Danger. Applies to every link the widget renders. |
| Icon / Icon Position / Icon Spacing | Optional icon before or after the label, repeated on each link. |
The stock Text, Link and Button ID controls are hidden: labels come from the Content section and each link's URL is resolved from the lesson.
Style (shown only for Custom buttons)
| Setting | Description |
|---|---|
| Button | Elementor's standard button styling: alignment, typography, text shadow, text and background colours for Normal and Hover, border, border radius, box shadow and padding. See Elementor's Button widget documentation. One set of styles applies to the previous, next and parent-course links alike. |
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
- In Custom buttons mode the links carry the same CSS classes as LifterLMS's navigation (
llms-course-navigation,llms-prev-lesson,llms-next-lesson,llms-back-to-course) plusle-prefixed equivalents, so theme styles written for LifterLMS navigation also apply here. - With Direction set to Both, the previous and next buttons share one set of Button and Style settings. Use two widgets if they need different styling.
- Related: Back to Course Button, Mark Complete Lesson, Lesson dynamic tags.