LifterLMS and Elementor: Designing Course Pages That Work
How the free LifterLMS Elementor widgets work, what happens when you open an existing course in Elementor, where Elementor Pro’s Theme Builder fits…
Read articleDivi is one of the most common themes we find under LifterLMS sites, and the pairing works. It does need a little more setup than Elementor or Beaver Builder, because LifterLMS core does not ship Divi modules. You build course pages with Divi's own modules plus LifterLMS shortcodes, and you decide where LifterLMS's default course and lesson elements should appear.
This guide is for course creators and designers using the Divi theme or the Divi Builder plugin with LifterLMS. It covers enabling Divi on course, lesson and membership pages, the free Lifti lab, placing syllabus and pricing elements, Theme Builder templates, and the mistakes that break lessons.
Details were checked against LifterLMS 10.3 and the LifterLMS documentation at the time of writing. Divi menu names differ between Divi 4 and Divi 5, so look for the equivalent option if yours is worded differently.
How LifterLMS and Divi fit together
It helps to know how LifterLMS builds a course page. The course description is your post content. LifterLMS then adds its own elements before and after that content: the course video, the meta information, author, prerequisites notice, pricing table, progress bar, syllabus and reviews. On a lesson it adds the parent course link, the video, the Mark Complete button and lesson navigation.
When Divi's builder is switched on for a course or lesson, LifterLMS keeps adding those default elements around the Divi layout. That is deliberate: it means a Divi-built page never loses its syllabus or Mark Complete button. It also means the defaults appear at the bottom of the page unless you move or remove them.
| Approach | What you get | Good for |
|---|---|---|
| Divi layout, LifterLMS defaults left on | Your design on top, standard LifterLMS elements below | Lessons, and simple course pages |
| Divi layout, defaults removed, shortcodes placed | Full control over where each LifterLMS element sits | Course sales pages and membership pages |
| Divi Theme Builder template | One shared layout for many lessons or courses | Large catalogs with a consistent design |
Set up Divi for LifterLMS
Enable Divi on LifterLMS post types
- In Divi's theme options, open the builder settings and find the post type integration list.
- Enable the builder for Courses, Lessons and Memberships. Save.
- Open a course under Courses > Courses and choose to edit it with the Divi Builder.
Leave Quizzes and Questions alone. LifterLMS renders quizzes itself, and they are edited in the course builder, not as pages.
Add the Lifti lab for theme compatibility
LifterLMS maintains a free companion plugin called LifterLMS Labs. One of its labs, Lifti, exists specifically for Divi. According to the LifterLMS Lifti documentation, it fixes layout conflicts such as page width and sidebars on course, lesson and membership pages, and adds sidebar and layout options to the Customizer.
- Install and activate LifterLMS Labs from the plugin directory.
- Go to LifterLMS > Labs, find Lifti: Divi Theme Compatibility and click Enable.
- Click Configure, tick the post types you build with Divi, and save.
Lifti also lets you show a Divi section only to enrolled or non-enrolled students by adding a CSS class to the section: llms-enrolled-student-content or llms-non-enrolled-student-content. This is a Labs feature, not part of the core plugin, so it stops working if you deactivate Labs.
The same documentation lists the limits. Lifti does not apply Divi's colors and fonts to LifterLMS elements, so expect to write some CSS, and Divi cannot visually edit the inside of elements such as the syllabus, lesson navigation and Mark Complete area.
Decide what to do with the default elements
For a course sales page you usually want the pricing table in the middle of your design, not after the footer call to action. There are two clean ways to do that.
Option A: the Action Manager lab
LifterLMS Labs includes an Action Manager lab that removes default elements such as the course author or syllabus without code. It is the quickest route for a non-developer. Its settings apply site-wide, so removing the syllabus removes it from every course, including any you did not build in Divi.
Option B: unhook them in a child theme
If only Divi-built courses should lose the defaults, do it in code. This snippet removes the pricing table, syllabus and progress bar from courses that use the Divi Builder, and leaves other courses untouched:
<?php
/**
* Remove default LifterLMS course elements on Divi-built courses,
* so they can be placed with shortcodes inside the Divi layout.
*/
add_action( 'wp', 'llmsx_divi_course_elements' );
function llmsx_divi_course_elements() {
if ( ! is_singular( 'course' ) ) {
return;
}
if ( 'on' !== get_post_meta( get_the_ID(), '_et_pb_use_builder', true ) ) {
return;
}
remove_action( 'lifterlms_single_course_after_summary', 'lifterlms_template_pricing_table', 60 );
remove_action( 'lifterlms_single_course_after_summary', 'lifterlms_template_single_course_progress', 60 );
remove_action( 'lifterlms_single_course_after_summary', 'lifterlms_template_single_syllabus', 90 );
}The hook names and priorities above match LifterLMS 10.x. Put the code in a child theme's functions.php or a small custom plugin, never in the parent Divi theme. Our guide to customizing LifterLMS without breaking updates explains where code like this should live.
Place LifterLMS elements in Divi with shortcodes
With the defaults removed, add the elements back exactly where you want them using a Divi Text or Code module and a LifterLMS shortcode. Inside a course, each one picks up the current course automatically.
| Element | Shortcode |
|---|---|
| Pricing table | [lifterlms_pricing_table] |
| Syllabus | [lifterlms_course_syllabus] |
| Progress bar with continue button | [lifterlms_course_continue] |
| Course meta (length, difficulty, categories) | [lifterlms_course_meta_info] |
| Instructors | [lifterlms_course_instructors] |
| Content for enrolled students only | [lifterlms_hide_content id="123"]...[/lifterlms_hide_content] |
On a membership page the pricing table shortcode works the same way, and [lifterlms_membership_instructors] lists its instructors. On a separate sales page, pass the course or membership ID: [lifterlms_pricing_table product="123"].
The [lifterlms_hide_content] shortcode is part of core, so it is the safer choice for enrolled-only content if you do not want to depend on Labs. It checks enrollment in the IDs you give it and accepts relation="any" or relation="all" when you list several.
Lessons in Divi
For lessons, our advice is simple: design the content area in Divi and leave LifterLMS's lesson elements alone. The Mark Complete button, quiz button and navigation carry the logic for progress, drip and prerequisites. Removing them and re-adding a shortcode is possible, but every lesson then depends on a module someone can delete by accident.
One LifterLMS behaviour is worth handling in code if you write lesson content in Divi. The course builder can edit lesson content that was first added in the builder. LifterLMS 10.3 recognises Elementor and Beaver Builder lessons and protects them from being overwritten, and it provides a filter so other builders can do the same. This tells LifterLMS that Divi-built lessons belong to Divi:
<?php
add_filter( 'llms_lesson_content_editor_type', 'llmsx_divi_lesson_editor_type', 10, 2 );
function llmsx_divi_lesson_editor_type( $type, $post_id ) {
if ( 'on' === get_post_meta( $post_id, '_et_pb_use_builder', true ) ) {
return 'divi';
}
return $type;
}Divi Theme Builder templates
A Theme Builder template lets you style every lesson or every course at once. Two rules keep it working:
- Include a Post Content module. LifterLMS adds its elements by filtering the post content. A body template without that module drops the Mark Complete button, navigation, syllabus and pricing table.
- Keep protected text in the post content. When a lesson is restricted, LifterLMS loads its own "no access" template ahead of theme builders, so the Divi template is not used at all. Course and membership pages are different: they stay visible as sales pages and LifterLMS controls what appears through the post content. A module that prints a custom field directly on a course page shows it to everyone.
After changing templates, view a lesson as a logged-out visitor, an enrolled student and a student whose next lesson is still dripping. Our article on drip content and prerequisites explains which lock messages to expect.
Common mistakes
- Elements at the bottom of the page, or twice. The defaults are still on and you added shortcodes too. Remove one or the other.
- Raw shortcodes showing as text. A Divi layout was copied to a site where Divi is not active, or Labs was turned off after you used its features. Turning off Lifti does not remove Divi shortcodes already in your content.
- Sidebar or width problems on catalogs. The theme's wrappers do not match LifterLMS's. Lifti handles this for Divi; see also the theme compatibility checks we recommend.
- Divi's styles ignored. LifterLMS buttons and forms use their own classes. Add CSS in a child theme or Divi's custom CSS that targets classes such as
.llms-button-actionand.llms-access-plans. - Slow pages for students. Divi plus dynamic LifterLMS content is heavy. Use Divi's performance settings and exclude logged-in users from page caching.
Frequently asked questions
Does LifterLMS have Divi modules?
Not in the core plugin. You use Divi's own modules with LifterLMS shortcodes, and the free LifterLMS Labs plugin adds compatibility features for Divi through the Lifti lab.
Is LifterLMS compatible with Divi 5?
The LifterLMS Lifti documentation says LifterLMS is compatible with Divi 5, and notes that default LifterLMS elements may appear at the bottom of a layout and can be removed with the Action Manager lab. Test on staging before upgrading a live site.
Can I hide a Divi section from people who have not enrolled?
Yes. With Lifti, add the llms-enrolled-student-content class to the section. Without Labs, wrap the content in the [lifterlms_hide_content] shortcode.
Should I use Divi for the student dashboard and checkout?
You can place [lifterlms_my_account] and [lifterlms_checkout] in Divi pages, but keep those pages simple. They are forms, and plain layouts convert and load better.
What to do next
Pick one course and build it on staging: enable Divi for the post types, turn on Lifti, decide whether the defaults stay or move into shortcodes, then test as a visitor and as an enrolled student. Once that course is right, save it as a Divi layout and reuse it.
If you want Divi-built course pages without the duplicate elements, broken lesson buttons or hand-edited CSS on every update, our LifterLMS customization service sets this up in a child theme you own. Tell us about your Divi site and we will suggest the simplest setup.
