LDX Design

Create a LearnDash Course Page Template with Elementor Pro

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

If you’re using Elementor with LearnDash, and you like to tinker with your layouts, this one’s for you. We’re going to walk you through setting up a course page template using Elementor Pro’s Theme Builder. This only works with the Pro version, so if you’re still on free and want to give this a try, upgrade to Pro →

If you’re looking for a much simpler way to fix a content width bug on your course page when using page builders, or you only have the free version of Elementor, check out our LearnDash content width + page builders article.

Subscribe to our YouTube channel for more LearnDash tutorials.

Elementor Single Course Template

Elementor’s Theme Builder has several different types of templates you can create:

  • header
  • footer
  • single
  • archive
  • …and more
Elementor's template chooser, selecting single course template

For our custom course page, we’re going to use an Elementor Single template.

Recommended ProductKinsta managed WordPress hosting
  1. Navigate to Templates > Theme Builder
  2. Click Add New
  3. Choose a Single template
  4. Choose Course as the post type (not showing up? see this tutorial)
  5. Give your template a name & click Create Template

Now you’re going to use 3 different Elementor widgets to recreate your course page.

3 Elementor widget types: progress, post content & shortcode
  1. Add a new Section
  2. Add the “Course Progress Bar” widget to it (Be careful. There is also a “Progress Bar.” You want “Course Progress Bar.”)
  3. Add a new Section beneath it
  4. Add the “Post Content” widget to it
  5. Add a new Section beneath that
  6. Add a Shortcode widget and place [course_content] in the shortcode box
  7. Be sure to click Publish when you’re finished, and set your display conditions (see below)

Now you have a functional course page that you can customize 100% using Elementor.

NOTE
Remember, anything else you add to this template will be displayed on all of your course pages. See below for how to edit each unique course page separately.

Display Conditions

You can also create different types of single course page layouts, and display them in a few different ways.

Click the green up arrow next to Publish, and open up the Display Conditions.

Elementor display conditions button

You can set this template to apply to…

  • all courses
  • only specific courses
  • only courses in certain categories
  • only courses with certain tags
  • only courses by certain authors
Elementor course display condition options

Caveats

You may have a few elements that are showing up twice. The reason for this is because LearnDash automatically displays a few sections on your page, and Elementor has no control over them, so it can’t hide them.

Recommended ProductPressidium Hosting

While it’s technically not the best way to hide them (that would be by editing template files), it is easiest to hide them with CSS. I’ll show you how to do that for each of the following sections:

  • Unenrolled users: the infobox containing Status, Price & Get Started
  • Enrolled users: the course status & progress bar
  • Enrolled users: the main course content list

Hide the infobox for unenrolled users

.user_has_no_access .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
	display: none;
}

Hide the status/progress bar for enrolled users

.learndash-wrapper .ld-course-status.ld-course-status-enrolled {
	display: none;
}

Hide the main course content list for enrolled users

This one is a little tricky because we’re adding the course content list back into the page with Elementor, and LearnDash uses the same class names for the auto-generated version and the version inserted using the [course_content] shortcode.

So first, we hide the course content. Then we display only the course content that was added via Elementor.

.single-sfwd-courses .ld-lesson-list {
	display: none;
}
.single-sfwd-courses .elementor-shortcode .ld-lesson-list {
	display: block;
}

[student] and [visitor] Shortcodes

Make use of these shortcodes to show marketing copy & buy buttons to visitors, and obviously different content to enrolled students. The official LearnDash documentation has a great section that explains these shortcodes.

You might think you can use Elementor’s “Shortcode” widget to utilize the [student] and [visitor] shortcodes, but that’s not the case. Because these shortcodes contain additional content inside of them, the standard “Shortcode” widget won’t work.

Elementor multiple shortcodes in shortcode widget will not work

You also wouldn’t be able to use other Elementor widgets in-between a [visitor] and [/visitor] tag.

Thankfully, there is a workaround.

  1. Create a new “Section” template in Elementor
  2. Add all the widgets & content you’d like to include in-between the [visitor] and [/visitor] shortcodes. Create a separate template with things you’d like to show to students.
  3. Copy the Elementor template shortcode for that section, which will look like this: [elementor-template id="123"]
  4. Insert a “Text Widget” widget into your single course template
  5. Now you can wrap your [elementor-template id="123"] in either [student] or [visitor] shortcodes, and it will work.
Elementor shortcodes in a text widget

Editing Individual Courses with Elementor

Now that you’ve created a course template, it will be applied to all courses (unless you customized your display conditions). So how do you get unique content on each course page now?

Recommended ProductIntuitive way to create websites with Elementor

The same way you would edit any post or page with Elementor.

  1. Navigate to LearnDash LMS > Courses
  2. Click on the course you want to edit, or use the “Edit with Elementor” link

Again, this is where you could utilize the [student] and [visitor] shortcodes, as well as include all course-specific content. Whatever you add to each unique course page will be displayed in the “Post Content” widget you put in your course template above.

Subscribe to our YouTube channel for more LearnDash tutorials.

If you’ve created any awesome LearnDash course templates with Elementor, I’d love to see them in the comments. Please share!

Previous

Hide Course and/or Topic Name in LearnDash Breadcrumbs

Next

LearnDash Content Width & Page Builders

94 Comments

  1. Hi
    I’ve been trying out designing course pages etc using elementor.
    I got to the create template and opened up elementor only to find an uneditable sidebar to the right of the “drag widget here” area. How do I get rid of the sidebar?
    Thanks for your article on using the code snippet… worked a treat.
    Thanks in anticipation.
    Bryson Dalgleish

    • The sidebar is being added by your theme. Which theme are you using? Some themes make it easier to remove sidebars than others.

      First, look in the Customizer for a “Sidebar” (or similar) section. See if there’s an option to globally disable sidebars.

      Second, some themes (Astra & GeneratePress come to mind) let you remove the sidebar on a page-by-page, course-by-course, lesson-by-lesson basis. Look in the sidebar for “Theme Settings” or “Astra Settings” or something similar. There might be a sidebar option that lets you choose between a left, right or no sidebar.

      It’s best if you can do it globally, but you might have to do it on each and every course|lesson|topic|etc.

      If neither of those work, you could also reach out to your theme developer and ask how to remove the sidebar from custom post types.

  2. Roch

    Hi there,
    The content is now double where do i fix that?
    Im missing something I know – so the progress bar, and everything else is double on the page

    • Hmm. I thought when you used a template like this, that the default LearnDash progress bar & content table would not show up. I’m not sure why yours are.

      Can you post a link to your page so I can take a look?

  3. Man Yong Tse

    Hi, this works great. How would I create a separate template for ‘Lessons’ and ‘Topic’?

    • Man

      I have tried to create a separate template and set the condition to ‘Lesson’ or ‘Topic’, but it doesn’t seem to work (it just defaults back to theme page). Also, what do I put as a shortcode? TIA

    • You should be able to follow the same instructions, but instead of choosing “Course” as the post type, you would choose “Lesson” or “Topic.” You still use a Single template.

      Can you show me a screenshot(s) of how you set things up?

      I’m not sure what shortcode you’re referring to. What are you trying to do with a shortcode?

    • Man

      Re shortcode, in this custom ‘Course’ template, as you have suggested [course_content] works perfectly.

      So now I’m trying to create a ‘Topic’ template, do we still use [course_content] on this page template?

      https://www.screencast.com/t/Q1nHJ6q8xVW – I’ve setup another single template choosing Topic as the condition, but doesn’t seem to work, any ideas?

    • Man Tse

      Any update? I’ve tried again but not sure how to customize template for lessons or topic.

    • The [course_content] shortcode won’t do anything for lessons or topics. It only works on a course page.

      For lesson & topic pages, the only real thing you can customize is the content itself. And for that, you just use the widgets that Elementor provides.

      The only other thing you could use in the [ld_topic_list] shortcode, which can be used on a lesson page to output the topics that are in that lesson. If you’re using the Course Grid add-on, you can display them in grid format.

  4. Hadar

    Hi,
    I have created a course template with elementor, and now I want to add unique content to each course page.
    I have tried to do this as you suggested – use the “Edit with Elementor” link for a specific course. But when the page opens – I can’t edit or add any element.

    • Hadar

      Solved – it’s because I hid the course constant widget in the template.

    • Glad you figured it out 🙌!

    • Smiley

      Hello,

      I have the same problem. However, I don’t know where is the “course constant widget”. Can you show me where is it? Thank you!!

    • Smiley — Hadar meant to say the “course content.”

      I actually don’t know what they meant by that. I don’t see how it has anything to do with the “Edit with Elementor” button not working.

      I can’t really help you without being able to see what’s going on. Can you take a video of what’s happening, both in the backend and on the frontend, and post it here so I can see?

    • Smiley

      Hi Dave,

      Thanks for your reply. The case is like when I created the course template, it can show the template in the course page. However, I can not edit the template elements in the course page. I can only add new widget. It looks like those template widgets are locked in the course page.

      For my understanding, if I insert a template into a page, I can edit all the widgets in the page. But it is not working in the course page with preset course template.

      I will send u a video here if my explanation is still not clear.

      Really thanks for your time!

    • Thanks for the clarification. I’m pretty sure I know what you’re talking about now.

      And unfortunately, that is a limitation of LearnDash. LearnDash automatically inserts a few elements onto the page, and no page builder or any other plugin has access to them. The only thing you can do is hide them, or modify them, with custom CSS.

      On course pages for enrolled users, the automatically inserted elements are a progress bar at the top, then whatever you add to the main content area of the course page, and finally the course content list at the bottom. All of those things will be added to the page wherever you put the “Post Content” Elementor widget.

      I sell a premium plugin that lets you modify the design of the progress bar, course contents list and many other LearnDash elements that are not targetable by Elementor. As part of the support I provide, I can help you with a few custom CSS snippets to hide a few things if you need it.

    • Smiley

      Thanks for your info! You really help me much! I will check your plugin later!

  5. Hello Dave,

    I was able to create a course template by following your instructions. Thank you. The only one thing I’d like to include is the ‘featured image’. Is that possible? If so, how can I do it? Thanks in advance.

  6. Hello Dave, I finally was able to find the ‘Featured Image’ element in Elementor so I just inserted it in the template. So, problem solved!
    ~r.c.

  7. Hey, Dave! I tried to do this on my staging site, and I am getting everything default on the Course Page in addition to what I had on the template. So, I now have two course progress bars and two course content tables. Is this expected?

    • Yes, that’s expected behavior. I failed to address it in the article. I’ll try to get it updated within the week.

      The quickest/easiest thing to do is to use CSS to hide the automatically-output ones, so that only your Elementor-inserted ones show up.

      The better option, but much more technical, is to edit LearnDash template files. I’ll update the article soon with the CSS to hide them.

  8. Thanks, Dave! It would be nice to be able to hide these elements as I do think I can make a better design with Elementor. If I knew more about coding, I would feel comfortable about editing the template files, but I am afraid I would mess things up.

    • I just updated the article to include the CSS to hide these elements. Look under the “Caveats” section. For all non-coders, this is the recommended way. If people have the budget, expertise or developers to edit template files, that’s great. But understanding that many don’t have these available, CSS will work fine.

  9. Thanks, Dave! The LearnDash wrapper CSS worked, but I am still seeing the extra course content table after using the other CSS. Any ideas? (And I cleared both browser cache and site cache as I thought this might be the issue)

    • Can you email me a link to one of your course pages? I’ll take a look at the CSS and see what’s going on.

  10. Deny

    Hi dave, i have a question for you, how can i add course price to my course page elementor template?

    • There is no shortcode or other integration to pull the course price from the LearnDash settings, so the only way to do it is manually, using whatever Elementor widget you want to use. That could be a text editor, heading, pricing table, etc.

      Then if you update the price in the future, you’ll need to change it in both places.

  11. But with this method, i have to do a custom template for every single courses, right?
    Or there is a method to edit in single course, sections outside the post content? I add a link to see what i mean: https://www.gimarbeauty.com/courses/how-to-play-the-piano/

    • You could use a different layout/design for every course, but you don’t have to. You can set up a general template to be used for ALL course pages, and then just use the block editor on each individual course to add specific info. Whatever you add to the block editor will be displayed where you have the “Post Content” widget in your global course page template.

      You could also use Advanced Custom Fields if you want to make things more dynamic. Create a bunch of fields that only apply to single course pages. Then on your global course page template, you can add ACF fields, and they will be pulled in dynamically based on what you add to each field on each individual course.

  12. Hey mate,

    I followed your tutorial on how to add the course, topic etc to Single Template choice dropdown on Elementor and that worked fine.

    Unfortunately, I am now creating a basic template to test that it works and although I have the correct settings in Display Conditions (use for ALL courses), it just doesn’t seem to translate to be used in the actual Course I’ve created.

    Have you come across why this might happen?

    I am using the latest versions of Elementor, LearnDash and am on PHP 7.3 managed.

    Unsure what’s wrong!

    • Hi Daniel,

      I haven’t experienced this, but it could be your theme, OceanWP, overriding it, or possibly something with the Elementor Kit you are using. I see some class names in the tag that I don’t normally see with LearnDash/Elementor sites.

      I’d have to see the backend of how you have things set up to be able to help further. I’m happy to jump in and take a look for a small fee. Email me admin access to your site if you’d like for me to see if I can identify the issue. support@escapecreative.com

  13. Kostadin

    Hey Dave! Thank you so much for this tutorial it was very useful. So far I’ve made some progress but i’ve run into an issue with the “Course Content” section. It shows the buttons and all looks good but won’t expand anything when I click “Expand” or “Expand All”. What can it be? Can it be something I did wrong with CSS code (im new to playing with code). I can email you the page url.

  14. Vmundhra

    Hi Dave,
    I also have same issue. I tried to remove css related to hide the default course content. Thus, I have two set of course content on my course page. When I am clicking expand button of the elementor block, expand is working with default course content block of learndash. Ideally, it should expand the course content of our new block. If I hide the default course content block, then nothing it is not working.

    Further, if I am using the default course content, then css is not loading and page looks ugly

    • I don’t 100% follow your situation, Vmundhra. Sorry.

      I can share my response to Kostadin after looking at his site:

      “I’m pretty sure it’s a javascript issue, and I think it has something to do with how your plugin is named. For some odd reason, your LearnDash plugin folder is named learndash-3.1.5, when it should be named sfwd-lms. I think this is causing some files to not load properly.”

      You could check your source code and see how your LearnDash plugin folder is named. Also, look for JavaScript files associated with LearnDash, and cross-reference them with the LearnDash demo site (demo.learndash.com).

      Feel free to send me your page via email and I can take a look.

  15. OMG! Thank you thank you thank you . . . I have been trying to figure out how to get rid of that lesson and topic list for the longest. You are a lifesaver with these extremely useful tips.

    Two questions:

    (1) Does this also apply to designing a lesson page template, and remove the list of topics there?
    (2) How can I add a dynamic “NEXT” button which takes an enrolled user to the next step (i.e. lesson or topic or quiz) in the progression?

    • You’re welcome 🙂.

      1. The same basic concepts in this article will work for creating a lesson page template, but the code to hide the topic list is a little different. You’d use .ld-lesson-topic-list instead of .ld-lesson-list, and the .single-sfwd-courses would become .single-sfwd-lessons.

      2. Unfortunately, this is not easy. LearnDash will still output their default navigation at the bottom of your template. They do this automatically/dynamically. You could remove it with CSS, but that wouldn’t make much sense. Or you could style it will custom CSS to position it where/how you wanted it. But there are no shortcodes or other methods to insert navigation buttons to navigate between lessons/topics.

  16. Ana Silva

    Hello LDX Team, thanks for such an amazing content!!

    Can I ask you, when using this method do you guys organize courses/ lessons/ topis with WP categories or the Learndash ones?

    Thanks again 🙂

    • Hi Ana — So I personally don’t use this method of using Elementor to build my course page.

      However, to address your question about categories, I prefer to use the LearnDash ones. It’s really confusing that LearnDash gives you the option to use either/or, or both. They do exactly the same thing. One is no better than the other. I just like to stick with the LearnDash ones because it makes more sense in my head that if it’s LearnDash content (course/lesson/topic), I should be using a “LearnDash Category.” But that’s the only reason. There’s technically no difference.

      Whichever one you use, I recommend you turn the other one off. There are checkboxes on the Settings page for each post type.

  17. Dmitry

    Hello. I use elementor and astra to build each cource content. Always set fullwith. And hide all of the elements of cource, because want to make it complete custom. But when i make a lending with edge to edge there is white line with 15px height in the top and in the botton.

    In the top the solution i found is to make css

    .single-sfwd-courses .learndash_post_sfwd-courses {
    margin: -15px auto;
    }
    But the line in the bottom still visible. Hox can i completely delete this?

    • This is probably related to your theme. My guess is that Astra adds some padding or margin to the container. I’d need a link to your page to see the code to be able to help further.

  18. heres the cource page, with fullwith. Added with elementor. On lessons page everything is ok. But here the padding. Thank you for the help!

    • I see exactly what it is. It’s the top & bottom margin that LearnDash adds to their tabs. Since you aren’t using them at all, you can safely remove it. Add this CSS to the “Additional CSS” area of the Customizer.

      .single-sfwd-courses .learndash-wrapper .ld-tabs {
          margin: 0;
      }
  19. Dmitry

    Thank you very much! Thas’s solve the problem.

  20. Hello Dave! On April 27th I followed this tutorial and it worked like a charm, thank you! But now I have the same issue ‘Kostadin’ explained in his reply on May 28th: “… It shows the buttons and all looks good but won’t expand anything when I click “Expand” or “Expand All”. I don’t do code either. Is there a way to fix this? I really appreciate your help. Thanks in advance.

    • I just looked at your site and I think your issue is the SG Optimizer plugin. I would start by NOT combining CSS or JavaScript files. I think this is your issue.

      Many people deactivate the entire plugin because it causes issues with LearnDash. But try just those two settings and see if that helps. Be sure to clear your server & browser cache after changing the settings.

      If your server is using HTTP/2 (which it should be), combining files doesn’t usually give you a performance benefit anyway.

  21. Hello again Dave! Thank you very much for your quick reply. I really appreciate your help. Unfortunately the problem still persist. But guess what! Even though I don’t know anything about coding, I was able to correct the issue.

    I just switched the ‘display’ parameter (if that’s the correct term) of the original code:

    ORIGINAL CODE:
    .single-sfwd-courses .ld-lesson-list {
    display: none;
    }
    .single-sfwd-courses .elementor-shortcode .ld-lesson-list {
    display: block;

    NEW CODE:
    .single-sfwd-courses .ld-lesson-list {
    display: block;
    }
    .single-sfwd-courses .elementor-shortcode .ld-lesson-list {
    display: none;

    Now everything is working perfectly!

    Thank you again for your help Dave!

  22. Ido

    Hi Dave!
    Is it possible to add the navigation when creating a custom template for lessons?
    Now it just gone so the user can’t go to the next lesson etc.
    I couldn’t find any shortcode widget that shows the basic lessons navigation.
    Thanks!

    • LearnDash does not have a shortcode or widget that shows the next/prev lesson navigation. The only thing I know of would be to include links manually at the bottom of each page, which is not a great option.

  23. Tobias

    Hi,

    for some reason I can’t get the course title to show. I created a single course template and put the Post Title element in there. But it doesn’t show up (everything else does, like progress bar etc.). Also in the page settings, the hide title option is unchecked.

    Do you have a solution? Thanks!

    • With everything you’ve described, it sounds like you’ve set it up properly. Maybe if I saw a screenshot of the Elementor setup, and then a link to your course page, I might be able to help.

      Also, what theme are you using?

  24. Tobias

    It’s the Astra theme (Pro) – and surprisingly this only happens with one of my courses. So I decided to delete the one I mentioned and just added it again with a new course. Problem solved, at least somehow…

  25. Leandro Vernocchi

    Hello Dave!, i was looking for this thank you so much!, i was wondering what code should i use to hide the progress bar aswell.

    • 👊

      Do you just want to hide the progress bar on the course page, or the entire box that contains the progress bar, last activity and “in progress” label?

      Oh, and if you’re creating a course page template with Elementor, can’t you just not add the “Infobar” widget? That will ensure it doesn’t get displayed.

  26. Rich

    Thanks for this post. The CSS to hide the automatically added elements on a Course page has made my life much easier. 🙂 I’m using LeardDash to manage free and open courses and just want to make my Course pages completely custom without the default elements.

  27. Hi, Dave,

    Great Article. However, this CSS does not work for me when I add a course info bar into my elementor template and try to hide the default course info bar. There are still two course-info bars appearing there. Also when I removed .user_has_no_access. , then the CSS remove all these two course-info bars.
    .user_has_no_access .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
    display: none;
    }
    Could you help with that? Thank you!

  28. Hey! So it seems there are some elementor blocks I can drop in instead of using short code – but when using CSS to hide things it also hides the blocks. It does not, however, hide the blocks when using short code.

    Designing using blocks is much faster for me, is there a work around to this?

    • When you design a Single Course template using an Elementor’s Theme Builder, I don’t think you should need to hide any default elements. If you’re using the Elementor-LearnDash integration plugin, the default stuff should be removed automatically. Is this what you’re doing? Or are you just editing an individual course page with Elementor?

      And yes, there’s a way to do it, but I’d need to know more about your set up to be able to help with the CSS. Do you have a link to a page I can view which has both elements on it? Feel free to email me if you’d like to keep it private, or if I need login details to access it. dave@escapecreative.com

  29. Jon

    Is there a way to view course content as a visitor on a dynamic course sales page?

    I have created a course product/sales page and saved it as an Elementor template and added the conditions. Whenever I view any of the courses and go to course product/sales page it displays all of the dynamic content like I have asked it to (product price, product description, product photo etc), however I haven’t been able to add course content onto that page. I can add the content using the shortcode for 1 course with the course ID, but when I try it for another course it only shows the course content from the original shortcode rather than the current course/product that’s being viewed.

    I hope you can help!

    Thanks for these great tips!

    • Hi Jon,

      It sounds like you’re trying to add COURSE content to a PRODUCT template. This won’t work. When you use a WooCommerce product template in Elementor, it only knows how to pull in WooCommerce information. It doesn’t make any connections to LearnDash courses, and thus can’t pull in LearnDash course information.

      You almost found a workaround where you could use the [course_content] shortcode, but since it requires an ID when not used on a LearnDash course page, there’s no easy way to make that ID dynamic.

      At this time, I’m not aware of a way to do this.

    • Jon

      Hello!

      It’s me again, I actually figured out how to do it (if anyone else wants to know). What I did was I went to the WooCommerce product for the course, then in the custom fields setting I manually added the course ID. Then on the dynamic course sales page I used the short code for the course content and asked it to fetch the custom field (course ID) that I created in the product page custom fields, then close off the short code which then generates the course content for that course/product.

    • Really clever way to handle it, Jon 🙌. Thanks for sharing.

  30. Ivan Roca

    With Crocoblock JetEngine plugin you can draw front-end via Elementor Dynamic tags (through REST API end-points and callbacks) and create absolutely any kind of designs, grids, lists, etc.

    It takes a bit of planning but generally Crocoblock JetEngine integrated pretty well Lerndash data with Elementor.

    The next step would be to liberate functional Learndash Elements and register them as Elementor widgets so that Lesson/Topic Single pages can have better and modern UI with a full potential of the Elementor visual aspects to be used in the creation of the educational materials and navigation.

    Learndash navigation and basic system is unfortunately outdated, especially when it gets to visual manipulation and functional diversity.

    • Alny

      Hi Ivan,
      it is very interesting to use Crocoblock with Learndash for me because I have Crocoblock lifetime license. But I cannot find any information (instructions) about their integration anywhere. Can you drop me any hint where to search for that?
      Thank you very much

      (or contact to you?)

  31. sophie

    additional question: i have a single course template created. And i want my normal header not showing on the page all courses and in the single course template. But which condition i choose, nothing works. Any idea how to get it to work?

    • When you say “normal header,” I don’t know what that means. Is it your theme’s header, or a header you built with Elementor’s Theme Builder?

      If you built it with Elementor’s Theme Builder, you can set the Display Conditions to EXCLUDE it on the all courses page and single courses.

      If it’s your theme’s header, it depends on your theme. Some themes let you hide headers on a page by page basis. Most do not. For those that don’t, you could set your Page Template to “Elementor Canvas” and that will give you a blank page to completely customize with Elementor (no headers, footers, sidebars, etc.).

  32. My normal header = . Is my header i built with Elementor’s Theme Builder.

    I did set the Display Conditions to EXCLUDE on the courses page and single courses. But it still shows.
    Any ideas? I wil try again tomorrow.
    I switched on focus mode for now so that it does not show.

  33. Hi Team

    I have a problem with access for non-users. I want the Course Single page to enable the overview, curriculum, Instructor and review section for non-members.

    I’ve been seeing that the class should be: learndash learndash_post_sfwd-courses user_has_no_access but I can’t find where to put it.

    I would appreciate your help!

    nick

    • Hi Nick. I’m not sure what the class has to do with showing those sections to non-members.

      The overview & curriculum are default to LearnDash, and they should appear on the course page for everyone, logged in or not. That is the default behavior.

      LearnDash does not show any instructor information by default. This is up to your theme, and whether or not your theme shows the author’s biography. How are you adding the instructor into to the page?

      LearnDash also doesn’t do reviews. Are you using the WisdmLabs reviews plugin to show those? If so, I think they should also show to everyone by default. If yours are only showing to enrolled users, I’d reach out to WisdmLabs support.

  34. Hi there can you please tell me how we can show the content to the logged in user but that user will only can access the course playlist if he must have a tag from active campaign how we can acheive this

    • Hi Haseeb – Sorry but I don’t fully understand your question. I also don’t use Active Campaign so I can’t help with the tagging.

      There is this plugin that helps with showing things to logged in vs logged out users. You can add the classes right in Elementor.

  35. Martin

    Hi, I have the same problem with lesson single template. The infobar and lesson content show up twice… Any suggestion?

    • Hi Martin – If you have the LearnDash-Elementor integration plugin active, and you’re still seeing the infobar and lesson content showing up twice, it’s likely a bug that LearnDash needs to address. My understanding is that, with the integration plugin active, the infobar & lesson content should be removed so that you can add them yourself via the Elementor widgets.

      Unfortunately, I don’t have time to test this out on my site right now, so I can’t help you troubleshoot. But if you’re using the latest version of the LearnDash-Elementor integration plugin, the best thing to do is open a ticket with LearnDash support.

  36. Martin

    Hi Dave,
    Thank you for your reply! After quite a bit of trial and error + LD support it’s clear there is a conflict with the Profile Builder Plugin. A bug yes, but probably not LearnDash’s

    • Thanks for sharing that, Martin. I’m glad you were at least able to figure it out with the help of LearnDash support. I hope the Profile Builder plugin can get the bug fixed.

  37. Hello Dave… I followed all instructions and created a template for courses but the ‘Login to Enroll’ button is not working with the ‘Customized registration enabled for LearnDash courses’… is there a solution for this? I really appreciate your help. Thank you.

    • The login form is not being output on the page, so when you click the “login to enroll” button, it is trying to pull up something that doesn’t exist. I’m not sure why though.

      Are you using LearnDash 3.6’s new registration process? Do you have a registration page set up in LearnDash LMS > Settings > Registration at the bottom?

      Also, how exactly is your Elementor template set up? Did you just edit the individual course page with Elementor, or did you create a theme builder template and apply it to all course pages? Is the “login to enroll” button being output automatically, or did you use an Elementor widget to output it?

  38. Hi Dave,
    How do you display .ld-course-status .ld-course-status-not-enrolled on a elementor template?
    Im offering a free course but cant seem to display the status of enrollment?..
    Warmest regards and with gratitude..
    Andy

    • Status of enrollment is displayed within the Infobar. If you add the Infobar widget to an Elementor template, that should display the user’s enrollment status. Does that make sense?

  39. I can’t find “Course Progress Ba” in elementor

  40. cosmin

    Just wanted to say that this is an amazing tutorial which offers you the possibility to create your own custom WordPress and Learndash theme and not be dependent on updates, bug fixes and so on. Great work Dave!!!

  41. Stephen

    Really needed this! Thank you. Assuming the exact same process works for lessons, topics, quizzes etc.?

    • You’re welcome 🙂.

      Yes, but you won’t have all the same widgets available to you when you do lesson, topic, and quiz templates. Last I checked, it’s impossible to create exactly what LearnDash’s Focus Mode does with Elementor… but you can get close.

  42. Sonia

    Update: terrible news. Elementor Pro no longer works with Learndash templates IF YOU ACTIVATE FLEXBOX CONTAINERS, which are required for all the great new features like Mega Menus and are the future of Elementor.

    I tried, and went through lots of support tickets. Finally a great tech guy at Elementor figured it out. Learndash templates for Elementor were built in 2020. Flexbox containers are new. The Learndash templates thus won’t show up or work at all if you have the flexbox containers activated. Yet flexbox containers are where all of Elementor is headed.

    The four Learndash widgets like Course list are available, but the really useful Learndash widgets that appear with each template are not – they are accessible only from within those templates, so are not able to be used if you have Flexbox containers.

    This means that if you are up to date in Elementor, your only option with Learndash is the old, standard, rigid, non-Elementor choose-your-Learndash-template system that does not allow you to customize the Elementor way.

    Or…you have to redesign your entire site and give up whatever new options you have gained by turning off flexbox containers. Not practical, and doesn’t solve the problem that eventually no one will want an Elementor site without them.

    Any known solutions? Totally bummed out about this. (I was all set to design my course page!)

    • Hi Sonia. Thanks for sharing all of this information. However, I’m a little confused.

      What “LearnDash templates” are you referring to? The LearnDash-Elementor integration gives you the ability to create your own templates for single course, single lesson, single topic, and single quiz pages. But it doesn’t actually provide any ‘already created’ templates.

      Also, when you enable flexbox containers, I thought that just gives you the option to use them or not. It enables another Elementor widget called a “Container” that you can choose to use or not use. But you can still build Elementor templates with the old Inner Section and Column widgets.

      This part of your comment is really confusing to me:

      “The four Learndash widgets like Course list are available, but the really useful LearnDash widgets that appear with each template are not – they are accessible only from within those templates…”

      Accessible from within what templates?

  43. Amber

    Hi Dave,

    I have been combing the internet to find a way to hide the default LearnDash course list on the LearnDash group page (built with Elementor) because it allows access to all courses upfront instead of by drip (as I configured through MemberPress).

    The course hide setting below doesn’t work:
    .single-sfwd-courses .ld-lesson-list {
    display: none;
    }

    I’ve tried altering this, putting shortcodes into Elementor, and everything else I could think of, but to no avail. Any ideas?

    I’d really appreciate it,
    Amber

Leave a Reply

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