LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

Create a LearnDash Course Page Template with Elementor Pro

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.

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


Enrolled vs. Unenrolled Users

By default, unenrolled users usually see a course status box at the top of the page. It contains:

  1. enrollment status
  2. price
  3. a button to login or take/buy the course

Example of the LearnDash course status box

If you use a custom Elementor template, this box will no longer be present. There is no widget or shortcode for it, so there’s no way to insert it.

Be sure to include a way for unenrolled users to buy or enroll in your course. Which leads me to my next point…

[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!


Hide Course and/or Topic Name in LearnDash Breadcrumbs


LearnDash Content Width & Page Builders


  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.

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén