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:
- …and more
For our custom course page, we’re going to use an Elementor Single template.
- Navigate to Templates > Theme Builder
- Click Add New
- Choose a Single template
- Choose Course as the post type (not showing up? see this tutorial)
- Give your template a name & click Create Template
Now you’re going to use 3 different Elementor widgets to recreate your course page.
- Add a new Section
- Add the “Course Progress Bar” widget to it (Be careful. There is also a “Progress Bar.” You want “Course Progress Bar.”)
- Add a new Section beneath it
- Add the “Post Content” widget to it
- Add a new Section beneath that
- Add a Shortcode widget and place
[course_content]in the shortcode box
- 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.
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.
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
Enrolled vs. Unenrolled Users
By default, unenrolled users usually see a course status box at the top of the page. It contains:
- enrollment status
- a button to login or take/buy the course
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…
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
[visitor] shortcodes, but that’s not the case. Because these shortcodes contain additional content inside of them, the standard “Shortcode” widget won’t work.
You also wouldn’t be able to use other Elementor widgets in-between a
Thankfully, there is a workaround.
- Create a new “Section” template in Elementor
- Add all the widgets & content you’d like to include in-between the
[/visitor]shortcodes. Create a separate template with things you’d like to show to students.
- Copy the Elementor template shortcode for that section, which will look like this:
- Insert a “Text Widget” widget into your single course template
- Now you can wrap your
[elementor-template id="123"]in either
[visitor]shortcodes, and it will work.
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.
- Navigate to LearnDash LMS > Courses
- Click on the course you want to edit, or use the “Edit with Elementor” link
Again, this is where you could utilize the
[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!