Lab: Lifti – Divi Theme Compatibility

Overview

# Back to top

Lifti, the Divi Theme Compatibility Lab, allows LifterLMS and the Divi theme to integrate seamlessly with each other.

The following features are enabled automatically when enabling Lifti:

  • Add LifterLMS Sidebar Compatibility to the Divi theme
  • Add the Divi HTML wrapper structure to LifterLMS Course and Membership catalogs

You can optionally enable the following:

  • Enable Divi Builder functionality on courses, lessons, and memberships
  • Enable Divi page layout settings on courses, lesson, and memberships

Installation

# Back to top

Lifti is available as a Lab within the free LifterLMS Labs addon.

To install Lifti

  1. Install LifterLMS Labs by following the instructions here.
  2. Navigate to the Labs setting screen at LifterLMS -> Labs
  3. Enable Lifti by clicking the Enable button
    Enable LifterLMS Lifti Lab

Enabling the Divi Builder and Layout Settings

# Back to top

After installing and enabling Lifti you may wish to enable optional settings specific to LifterLMS courses, lessons, and memberships.

You can enable the Divil Builder and Divi layout settings for these post types from the Lifti settings screen:

  1. Navigate to the Labs setting screen at LifterLMS -> Labs
  2. Click the Configure button on the row for Lifti
  3. On the settings screen check the box for each post type you wish to enable these settings for
    Lifti Lab Settings
  4. Click Save
  5. Navigate to the post types you’ve enabled these settings for and enable the builder or utilize layout settings

Enrolled and Non-Enrolled Student Content with the Divi Builder

# Back to top

When enabling the Divi Builder for a course or membership you will no longer be able to utilize the Enrolled or Non-Enrolled Student Content Editors. Instead, you will now have one Builder which you can use to display content to both student types. In order to maintain the ability to show different content based on the student or visitors enrollment status you can add custom css classes to each section module within the builder layout.

To add a custom CSS class to a section module:

  1. Click the Section Module Settings Icon
  2. On the pop-over click the Custom CSS tab
  3. On the Custom CSS tab you may enter custom css classes in the text input for CSS Class. Multiple classes must be separated by spaces.
    Divi section module custom css classes

Custom CSS Classes to Use

Display to Enrolled Students: llms-enrolled-student-content

Display to Non-Enrolled Students: llms-non-enrolled-student-content

If neither of these classes are found on a section, the section will be displayed to all students and visitors regardless of their enrollment status.

Predefined Course Layout

# Back to top

Lifti includes a predefined builder layout for courses. This layout includes a module for each default element found on a course and automatically adds the necessary content classes to mimic the default view of a course within a builder layout.

To utilize this layout for your course:

  1. Enable the Builder for your course
  2. Click Load From Library on the builder menu
    Loading a pre-defined course layout
  3. In the popover on the Predefined Layouts tab click Load next to the LifterLMS Course layout
    Load LifterLMS Course predefined layout

Note: this layout is installed when activating Lifti for the first time. If you are upgrading from an older version of this Lab (Divi Friends) you will need to disable and then reenable the lab from the LifterLMS Labs settings screen so that this layout will be properly installed.

Remove Default LifterLMS Elements when using the Builder

# Back to top

If you enable the Builder for LifterLMS Courses you likely will want to remove default LifterLMS elements (like the course syllabus or course author) and add them in on your own within the Builder.

All of these elements are added via Action hooks. There are two ways to remove these elements:

Video Tutorial

# Back to top

Last Updated on
Was this article helpful?