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

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.

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

This is where you would 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!