LearnDash Design & Tutorials

LearnDash Design & Tutorials

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.

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.

  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.

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?

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.


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

57 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. [email protected]

  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.

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén