LearnDash LMS Elementor Add-on

Description

LearnDash’s Elementor addon allows you to use the powerful editing capabilities of Elementor to let you build your course exactly how you want it. To help you get your courses up and running efficiently, we suggest following the recommendations below.

Note: In order for Elementor and LearnDash to work together, you need the following:

  • LearnDash LMS
  • LearnDash Elementor Addon
  • Elementor
  • Elementor Pro

LearnDash and the LearnDash Elementor addon can be downloaded from account.learndash.com while Elementor and Elementor Pro can be acquired from https://elementor.com

Table of Contents [show]

Installation

If you have your active license configured within your LearnDash install already, you can find the LearnDash Elementor Addon available in LearnDash LMS > Addons

If you have not activated your license inside of your LearnDash install, you can visit https://account.learndash.com/plugins and download the addon from there.

Setup

  1. Navigate to Elementor > Settings in your WP admin dashboard.
  2. Ensure you are on the General tab and look for the Post Types section;

LearnDash LMS Elementor Add-on

You may see more Post Types available than what is shown above, but for this guide you’ll want to make sure that you see at least the following options:

  • Courses
  • Lessons
  • Topics
  • Quizzes

Make sure that at least those 4 are unchecked and scroll down and click on the Save Changes button.

Template Configuration

For the purpose of this guide, you’ll want to ensure you are using the latest version of Elementor’s theme builder. Navigate to Elementor > Settings in the admin menu and click on the Features tab at the top.

While the LearnDash Elementor Addon will try to automatically insert the relevant widgets to your content, if you want full control over where exactly the widgets appear you’ll want to enable the Disable Widget Auto Insertion setting.

Disable Widget Auto Insertion

This setting can be found under LearnDash LMS > Elementor

LearnDash LMS Elementor Add-on

As mentioned in the help text of this feature, once this setting is enabled and a widget is not already inserted into a template, that widget will no longer show on the template when viewing on the front end of your site.

 

Template and Widget Setup

 

Go down the list of features and in the Stable Features section, ensure that “Default to New Theme Builder” is either set to Default or Active. If not, set to either of those and click on Save Changes at the bottom.

Next, navigate to Templates > Theme Builder in the admin menu. You should be presented with a screen similar to the following with a navigation menu on the left hand side as well

LearnDash LMS Elementor Add-on

Click on the + icon on the Single Course template. A Library window should appear giving you the option to choose between Blocks, Pages and My Templates. Instead of using these, we will be making our own so you can close out this popup window.

You should now be presented with the template editor part of Elementor where we will add the widgets into the course template to display the data.

Inside of the Elementor sidebar on the left hand side, you should see a listing of widgets

LearnDash LMS Elementor Add-on

In order to have the content displayed properly for a course we will need to add the following widgets into the course template:

  • Post Title
  • Course Infobar
  • Course Certificate
  • Post Content
  • Course Content

You can use the search bar at the top of the Elementor sidebar to find the widgets or expand/collapse each category section to find the appropriate widget. In a standard course layout, you’ll want to drag/drop the widgets from the sidebar into the editing area of your theme in the order listed above.

Each of the above widgets add important data for your course and are explained in more detail below. At this point, please navigate back to your WP admin dashboard and visit LearnDash LMS > Courses and click on Add New at the top right.

Post Title – This is the title of the course that you set inside of the WP editor

LearnDash LMS Elementor Add-on

Add your course title to the ‘Add Course title’ area above.

Course Infobar – This is a set of data that LearnDash provides for users to understand their progress within a course. It is not controlled inside of the WP editor and is instead dynamically populated based upon the user’s enrollment and progress within a course.

LearnDash LMS Elementor Add-on

Course Certificate – If you have a certificate configured for users that complete your course, this is where that data will be displayed for the user to view their earned certificate.

LearnDash LMS Elementor Add-on

Post Content – This is the content section of the course that your students will read and use to gain knowledge. In the above screenshot, this is handled in the ‘Add Course content’ section of the WP editor.

LearnDash LMS Elementor Add-on

Course Content – This is the section of content that LearnDash provides based upon the lessons, topics and sections that are created inside of the course builder under the Builder tab shown in the screenshot above.

LearnDash LMS Elementor Add-on

More information about creating lessons, topics and quizzes for your course inside of the builder can be found in our course builder support article.

If you are having issues properly ordering the widgets inside of the theme area, you can click on the Navigator icon in the Elementor sidebar ( https://elementor.com/help/navigator/ ). This will give you a popup modal that can make it easier to order the widgets in the suggested order listed above.

Publishing Your Template

Once you have your widgets and course content configured, you can publish your template configuration inside of Elementor. At the bottom of the Elementor sidebar, click the Publish button. You should be presented with a popup window labeled Publish Settings where it asks “Where Do You Want to Display Your Template?”

This is where we will assign the template we have created to our LearnDash courses.

  1. Click on the Add Condition button
  2. Select the Courses option in the dropdown menu if it is not already selected
  3. Click the Save & Close button

There are no reviews yet.

Write a review

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.