LifterLMS PayPal Setup: One-Time and Recurring Payments
How to set up PayPal for LifterLMS with the PayPal Payments add-on, how recurring payments work with and without Reference Transactions, how to test…
Read articleLifterLMS and Elementor work well together, as long as you know which parts of a course page Elementor controls and which parts LifterLMS still controls. Most broken course pages we see come from mixing those two up: a syllabus that appears twice, a lesson with no Mark Complete button, or a members-only page that shows content it should hide.
This guide is for site owners and designers who want to build LifterLMS course pages in Elementor. You will learn what the free LifterLMS core plugin adds to Elementor, what happens the first time you open an existing course in the Elementor editor, how to use Elementor Pro's Theme Builder for lessons, and how to avoid the common mistakes.
Everything here was checked against LifterLMS 10.3 and the LifterLMS documentation at the time of writing. Elementor's own interface changes often, so menu names in Elementor may differ slightly on your version.
What LifterLMS adds to Elementor
Since LifterLMS 7.7, the core plugin registers its own widgets in Elementor. You do not need an add-on or a third-party plugin for them. In the Elementor panel they appear in a LifterLMS category:
| Widget | What it shows |
|---|---|
| Course Meta Information | Length, difficulty, tracks, categories and tags for the current course |
| Course Instructors | The instructors assigned to the course |
| Pricing Table | The course's access plans with their enroll or buy buttons |
| Course Progress | The progress bar for an enrolled student |
| Course Continue Button | A button that takes an enrolled student to their next lesson |
| Course Syllabus | Sections and lessons, with lock and completion states |
Each widget renders the same output as the matching LifterLMS shortcode for the course being viewed. The widgets have no styling controls of their own, so you style them with your theme, Elementor's Custom CSS, or a stylesheet in a child theme. Some widgets look empty in the editor preview. The syllabus, for example, shows nothing until the course has sections and lessons, and progress only shows for an enrolled student.
The plugin also adds a Launch Course Builder item to the Elementor editor menu, so you can jump from the page design to the LifterLMS course builder without going back through the dashboard.
Set up Elementor for courses and lessons
- Install and activate Elementor. The free version is enough for editing individual courses and lessons.
- Go to Elementor > Settings and, in the post types section, tick Courses and Lessons. Save. Add Memberships too if you want to design membership pages in Elementor.
- Open a course under Courses > Courses and click Edit with Elementor.
- Publish, then view the course twice: once logged out, once as a test student who is enrolled.
The LifterLMS guide to editing courses with Elementor walks through the same steps with screenshots.
Lesson time tracking, quizzes and drip rules keep working whatever editor you use, because they run in LifterLMS, not in the page content. Elementor only changes how the content area is laid out.
What happens when you open an existing course in Elementor
This is the part that surprises people, and it matters most when you move an established site to Elementor.
A course built in the block editor or classic editor gets its LifterLMS elements, such as the syllabus and pricing table, either from blocks in the content or from template hooks that print them after the content. When you open a course in Elementor for the first time, LifterLMS converts it:
- If the course has no Elementor data yet, its existing content is placed into a Text Editor widget so nothing is lost.
- LifterLMS appends a "Course Information" heading and the six LifterLMS widgets, each in its own container, below that content.
- The course is marked as migrated in its post meta.
From then on, while the course is built with Elementor, LifterLMS stops printing the meta information, author, progress bar, syllabus and pricing table through its hooks. The widgets are now the only place those elements come from, so you can move, restyle or delete them freely without getting duplicates.
A few items are not handed over to widgets and still come from LifterLMS around the Elementor content: the course video and audio, the prerequisites notice and course reviews. If you want to move or hide those, use a hook in a child theme or a small plugin.
The automatic conversion only applies to courses. Lessons and memberships are not given a widget layout.
Turning off the automatic widget layout
If you are migrating many courses and want to design them from a blank canvas or your own saved template, you can stop LifterLMS appending its widgets. The filter runs for each course before conversion:
<?php
/**
* Stop LifterLMS adding its default widgets when a course
* is opened in Elementor for the first time.
*/
add_filter( 'llms_elementor_should_migrate_post', 'llmsx_skip_elementor_course_layout', 10, 2 );
function llmsx_skip_elementor_course_layout( $migrate, $post_id ) {
return false;
}Be careful with this one. Without the conversion, the course is not marked as migrated, so LifterLMS keeps printing its default elements through hooks. If you then add the widgets yourself, you will see everything twice. Use the filter only when you have a plan for those elements, such as unhooking them in code.
Switching a course back to the WordPress editor
If you stop using Elementor on a course, LifterLMS no longer treats it as an Elementor page and its default elements come back through the hooks. That is usually what you want, but check the page: content that only existed inside Elementor widgets does not move back into the normal editor.
Lessons in Elementor: what you can and cannot change
On a lesson, Elementor controls the main content area only. The parent course link, the lesson video, the Mark Complete button, any quiz button and the previous and next navigation are still added by LifterLMS around your content. There are no lesson widgets in the Elementor set.
That has two practical consequences:
- Do not add a Mark Complete button yourself. LifterLMS already adds one. Pasting the
[lifterlms_lesson_mark_complete]shortcode into a Shortcode widget gives students two buttons. - Layout around the button needs CSS or hooks. If you want the navigation above the content or styled like your Elementor buttons, change it with a hook or CSS, not with a widget.
Since LifterLMS 10.3 the course builder recognises lessons built with Elementor and will not overwrite their content from its own lesson editor. Edit those lessons in Elementor, and use the course builder for structure, settings and quizzes.
Elementor Pro Theme Builder templates
Elementor Pro lets you design one Single template and apply it to every lesson, or to every course, with display conditions. This is the right tool when you have dozens of lessons that should share a header, sidebar and call to action.
- Go to Elementor's Theme Builder and add a Single Post template.
- Build the shared layout around a Post Content widget.
- Publish and set the display condition to include your lessons (or courses).
- Test a lesson as an enrolled student, a logged-out visitor and an admin.
The Post Content widget is not optional. LifterLMS adds its lesson and course elements by filtering the post content, so a template without that widget loses the Mark Complete button, navigation, syllabus and pricing table. Use one Post Content widget per template.
Restricted content is handled for you. When a visitor cannot access a lesson, LifterLMS loads its own "no access" template at a later priority than theme builders such as Elementor Pro, so your Theme Builder template does not leak locked lesson content. If you ever need to change that, the priority is filterable with llms_template_loader_restricted_priority, but leave it alone unless you have tested the result.
The Focus Mode lesson layout is a separate LifterLMS template. If you turn it on, test it with your Theme Builder conditions before launch.
Catalogs, dashboards and sales pages
The course catalog, student dashboard and checkout are ordinary WordPress pages, so you can design them with Elementor and drop LifterLMS shortcodes into Shortcode widgets:
[lifterlms_courses]for a course grid, and[lifterlms_memberships]for memberships.[lifterlms_my_account]on the page set as the student dashboard.[lifterlms_checkout]on the checkout page.[lifterlms_pricing_table product="123"]or[lifterlms_access_plan_button id="456"]on a custom sales page.[lifterlms_hide_content id="123"]...[/lifterlms_hide_content]to show a block of content only to people enrolled in course or membership 123.
Keep the dashboard and checkout layouts simple. They contain forms, notices and account tabs that LifterLMS renders, and heavy Elementor layouts around them tend to cause spacing and width problems on mobile.
Common mistakes and how to fix them
- Duplicate syllabus or pricing table. Usually a course built in the block editor with LifterLMS blocks, then opened in Elementor with extra widgets added, or a course where you turned off the automatic conversion. LifterLMS blocks inside an Elementor page are intentionally not rendered, so check for hook output and for widgets you added twice.
- Missing Mark Complete button. A Theme Builder template without a Post Content widget. Add it back.
- Pricing table empty in the editor. The course has no published access plans, or you are previewing a membership-restricted course. Check the plans in the course editor.
- Styles break after an update. Custom CSS that targets Elementor's generated class names. Target the stable LifterLMS classes such as
.llms-syllabus-wrapperor.llms-access-plansinstead. - Slow course pages. Large Elementor layouts plus the syllabus, progress and pricing queries add up. Cache public pages, never cache pages for logged-in students, and see how to speed up a LifterLMS site.
When something odd appears only with Elementor active, use the process in our guide to plugin and theme conflicts to confirm it before changing your design.
Frequently asked questions
Do I need Elementor Pro to use LifterLMS with Elementor?
No. The six LifterLMS widgets work with free Elementor. You need Elementor Pro only for Theme Builder templates that apply one design to many lessons or courses.
Are there Elementor widgets for lessons?
Not in LifterLMS core. Lesson elements such as Mark Complete and navigation are added by LifterLMS around your Elementor content. Third-party widget packs exist, but they are maintained by other vendors.
Why did my course get new widgets when I opened it in Elementor?
That is the automatic conversion described above. LifterLMS adds its widgets so the course keeps its syllabus, pricing and progress after the switch to Elementor. You can rearrange or remove them.
Can I use Elementor for some courses and the block editor for others?
Yes. LifterLMS decides per course. Keep a short list of which courses use which editor so updates and design changes are applied consistently.
What to do next
Start with one course on a staging site. Open it in Elementor, check the widget layout LifterLMS creates, then test as a visitor, an enrolled student and an admin before you convert the rest. If you rely on Theme Builder templates, write down every display condition so you can check them after Elementor or LifterLMS updates.
If you are converting a large catalog, need lesson layouts that Elementor cannot reach without code, or want the hooks and CSS done properly in a child theme, our LifterLMS customization service covers it. Send us a link to your course page and tell us what you want it to look like.
