Over the past few months we have teamed-up Elementor to create an integration that allows for greater course customization.

With this collaboration, we are expanding your ability to create a more cohesive look for your website than was possible before.

In a nutshell: LearnDash design elements that were previously difficult or impossible to customize can now be easily edited to match your brand with Elementor, including color scheme and font choices!

📰 Read the official announcement on the Elementor Blog.

Having elements on the site that are visually different from the rest of the theme can give sites a less polished finish. Ideally, your users shouldn’t be able to tell the difference between the plugin and the rest of the site. This integration makes that a possibility.

Getting started with the Elementor integration for LearnDash.

The new integration is part of our Compatibility Add-ons, and it works just like any other WordPress plugin.

From the backend of your WordPress website, simply navigate to LearnDash LMS > Add-ons. Find the LearnDash Elementor Integration plugin, click Install Now, and then on the redirect page, click Activate Plugin.

You must have Elementor activated on your website for the integration to work. The integration is not a replacement for installing Elementor itself.

Once activated you have two resources for getting started:

  1. Learndash Elementor Integration documentation
  2. Page Builders + LearnDash User Guide

What does the new integration allow you to do?

Elementor is a page builder, designed to make it easier for users to build WordPress websites, both for creators without a lot of coding background, and designers who want a tool to help their work go faster.

Most high-quality WordPress themes integrate with Elementor, making it easier to edit elements and fine-tune the design. In fact, the LearnDash demo site uses it!

In turn, Elementor offers a range of integrations with other popular marketing and CRM tools, including MailChimp, Zapier, and HubSpot. With LearnDash added to the list, Elementor’s functions extend into the world of online education as well.

The LearnDash integration adds LearnDash-specific elements to the design panel that users see when updating their websites. Elementor users can drag-and-drop these elements into their website wherever needed.

New templates

The Elementor integration introduces four new page templates specifically designed for LearnDash. These are templates for courses, lessons, topics, and quizzes. Templates help users build out pages quickly, making it easier to add learning content.

Across the new range of templates, users will easily be able to edit elements such the sizing and color of call-to-action buttons, the styling of breadcrumbs, navigation buttons, progress bar, and course status.

New widgets

The new set of LearnDash widgets allows users to insert editable design elements and functions anywhere on their websites. These widgets are available in Elementor’s design panel, where they are easy to insert onto any page of your website.

  • LearnDash Login – Shortcode: [learndash_login]
  • Profile – Shortcode: [ld_profile]
  • Course List – Shortcode: [ld_course_list]
  • Lesson List – Shortcode: [ld_lesson_list]
  • Topic List – Shortcode: [ld_topic_list]
  • Quiz list – Shortcode: [ld_quiz_list]
  • Course Certificate – Includes certificate download option
  • Widgets for courses, lessons, topics, and quizzes

LearnDash and Elementor offer users more control over their site and their e-learning content.

We have always maintained that one of the primary reasons to choose LearnDash over other options is because it puts power in the hands of educators. Signing up to a hosted learning platform limits how educators can sell their content, often taking a cut of the profits in the process.

WordPress keeps control in the hands of creators, but the extent to which users can take advantage of the added power and flexibility is often limited by their skills.

When it comes to building a website, users often find themselves locked in to restrictive themes that keep them from creating the design they want.

If LearnDash frees educators from restrictive hosted solutions, Elementor breaks the mold of rigid and limiting theme designs, both by making it easier for users to build a website visually from scratch, and by enabling them to edit the themes they’re already using.

Over the past months it has been a pleasure to work have worked hand-in-hand with the Elementor team to bring you this tighter integration. Your courses will benefit, and so too will your learners. We look forward to seeing what you create with it!

WHAT ARE YOU WAITING FOR?
Ready to use the power of Elementor in your online courses? By joining LearnDash you not only receive best-in-class online course software (with an entire free website template to get started), but you also become a member of our vibrant, supportive community!

Justin Ferriman photo

About Justin Ferriman

Justin Ferriman is the co-founder and CEO of LearnDash, the WordPress LMS trusted by Fortune 500 companies, major universities, training organizations, and entrepreneurs worldwide for creating (and selling) their online courses. Let's Talk! | Twitter

Posted in

Comments

72 responses

Leave a Comment

This is great for my clients running Elementor learning sites.
We also have a lot running Divi. What is being done for tighter integration with that plugin? Just curious!

Great to hear Laurie! Nothing for Divi as of yet, but it’s always a possibility!

You can currently use the Divi Builder on Course and Lesson pages, and Learndash shortcodes can be used within the builder.Not fully integrated but you can get your course and lesson pages matching your Divi Layout to some extent.

Gregg DavisReply

👍 I’m waiting for Divi I keep coming back to Learn Dash but because it doesn’t have Divi integration I keep recommending and using other apps. Hope to see this soon! My clients will love it!

I am also hope to see DIVI do the same or at least elementor giving option for life time license. We are a small business not a big company who can keep paying annually.

That’s amazing. Been waiting for it!!

avatarReply

OMG! This is what I dreamed about. Thank you!

ErykReply

waiting for a divi colab :/

guilleReply

Great news – I’ve already got Elementor installed and have been adding Learndash short codes to the Elementor pages manually (usually in text blocks) – will any of my existing shortcodes break if I add this integration now?

The shortcodes are the same, so should be fine – but probably worth testing on a dev env. first.

As someone who cares tremendously about the aesthetic of my learning environment, I am very excited about this! 🙂

Perfect timing. This may be game-changer for our new site that is heavily focused on providing DIY resources for entrepreneurs and small business owners.
We are building the new site with Elementor.
We were planning on using Thinkific for the LMS which would unfortunately take people off our site and has limitations on how we want to engage users.
BUT if we can easily use LearnDash to save money and leverage our Elementor templates…watch out! We can bring tremendous value quickly.
It would be great to understand more about this collaboration.

This is amazing news – I ran a beta group through a LearnDash group coaching course this summer & I wasn’t in love with it but this integration changes the game!

Thanks Stephanie! Hope you can find a possible use for us again!

Finally!!!
This a great move.
I can’t wait to try it out and break some “design barriers”

That’s amazing! That’s why I’m so happy with Learndash, you guys are great! I’m trying it right now.

Luis MarceloReply

Is it possible to get course navigation on the side of the lessons with elementor?

Brian SuttonReply

You would need to disable focus mode. Then you could use Elementor to build a theme builder template for Single Lessons, and use the “Course Navigation” widget. You can actually achieve this with or without the new integration.

But the new integration does not allow you to use Elementor at all in focus mode.

Hello Justin !

That’s really a great news

JL DerrienReply

Fantastic!

Do you know how this translates into course duplication? Which I know is not a plugin from you directly, but I’ve a course that was made with each lesson having a custom layout in Elementor, and whenever it was duplicated the Elementor design basically broke. Will this fix that, do you think?

(Also – How do the LD extension plugins, like WisdmLabs ones, get updated when you guys roll out a new feature like this? Do they usually hop on board and update their plugins accordingly or it’s entirely their choice about if they update to stay abreast of latest LD capabilities?)

Fingers crossed that installing this new feature on my site won’t break the pages that are already made in Elementor!

Thanks so much for adding this feature.

Interested in the answer to this question.

This is an integration plugin so it doesn’t have to do with core. Core updates are communicated well in advanced with add-on creators. As with any update, we recommend doing it first on a staging/dev environment.

I’ve tested this today and found that the Elementor design still ‘breaks’ despite this new add-on.

Headings that were centered flew back to the left
Coloured backgrounds disappeared
Widget Button styles changed to default sizes and colours
>>>(the baby blue – do you know how to change its default colour?)

Maybe we should write to the plugin developer regarding this issue (WisdmLabs’s LearnDash Content Cloner)

Shouldn’t be the case on a standard WP-LD-Elementor install. E and LD run well together (including on our demo site) without anything breaking. If you think it is related specifically to the integration, then open a support ticket and we can have a look. If it occurs even when our integration is not active, then I would venture to guess something else is occurring.

Z,

I can’t speak for all LearnDash plugin developers, but as the author of a few LearnDash plugins (with about 10k active users), I’m happy to share my approach.

“Do they usually hop on board and update their plugins accordingly?”
Generally speaking, yes. I study all the changes in each LearnDash update, and then update my plugins in two main ways:
1. To make sure none of my plugin functionality is broken
2. To see if there are new opportunities to add features to my plugins

#1 takes far more precedence over #2.

“Or it’s entirely their choice about if they update to stay abreast of latest LD capabilities?”
I don’t see it as an either/or. It’s both. I usually hop on board, AND it is entirely my choice whether or not I update my plugins to stay abreast of the latest LD capabilities. Since my plugins require LearnDash, and not the other way around, in most cases it probably wouldn’t be a great idea to fall behind and stop supporting LearnDash’s latest & greatest. I would lose customers.

That being said, there could always be something that I, as a plugin developer, make the decision not to support. My plugins are my products, and while they rely on the LearnDash software in order to be relevant, I can make my own decisions (independent of LearnDash) as to how I handle the updates to my plugins.

This is great! Can’t wait to test it out. I have spent many hours working on my own solutions to get this working, with pretty good sucess, but this is just brilliant!

AdamReply

Awesome! Any plans to integrate with WP Bakery (Visual Composer)?

DannyReply

Thanks Danny! No plans at the moment.

Thanks Justin. This integration with Elementor will help a lot to maintain the same colors/skin…

Justin, or tribe, do you know how to protect/prevent other applications form capturing/recording screen?

I’ve heard many discuss this, and the consensus seems to be… it’s impossible to prevent it.

Most people say the best defense is to brand your video with watermarks and other branding so that people are at least more deterred from stealing it and posting elsewhere.

What a dream come true! 🥰 Thank you!

EvaReply

This sounds awesome. A question comes up though: I have now made all my lessons with WP Bakery. Will that still be supported? Maybe improved even?
Or should we change to Elementor?

This compatibility add-on won’t impact your current setup. No need to install/activate it if you’re not using Elementor. We don’t have any plans to do anything similar with WPBakery.

This is AWESOME NEWS, sorta… After many hours of creating, writing custom CSS and inventing work-arounds to accomplish much these same new features i’m both excited and nervous.

What is going to happen upon activating this plugin might do to existing custom Elementor templates (Pages, Posts, Canvases, CSS, JS, PHP and etc.)?

Trepidation has set in, as nearly all developers/designers can agree, we LOVE new tools/toys/gadgets, but am I about to burn down my existing work and have to start anew?

I’m guessing I should only do this in my development environment at first and hope everything doesn’t go BOOOM!…

I’ve loved Elementor Pro for awhile now and recently had a client project that required my R&D that lead me to LearnDash so I hope this partnership continues to offer better and better features for small biz web devs like mine.

Cheers!
~ illartech.com

Definitely try it out on a staging site first. Also, I have identified quite a few bugs in this first release, so maybe even hold off for a bit until it becomes a little more polished.

When you activate this integration, it doesn’t appear that any CSS is being added to any pages, so all custom CSS you’ve written should still do its job as it always has.

Upon activation, it does appear that 4 new theme builder templates are automatically created for you. One each for courses, lessons, topics & quizzes. However, none of them are given any Display Conditions, which means they don’t immediately get used anywhere. You have to actively go in to set the Display Conditions before they will take over.

Also, it looks like this integration adds additional theme builder template types, and doesn’t just use the standard custom post type. So instead of creating a theme builder template for “Course,” you can create a template for “Single Course.”

I haven’t tested any of this, but in theory, this should make it easy for you to keep separate what you’ve already done with what this new integration allows you to do.

With that being said, when you use the standard post types in the theme builder, I’m not sure if that enables the Elementor features that this integration provides. You might HAVE TO use the new “Single Course,” “Single Lesson,” etc. theme builder templates in order to get the new LearnDash widgets.

Now I am really interested in LearnDash again. I love LearnDash. But I was very frustrated with the look limitations. I can’t wait to try the new changes now!

– Erin Lin from wpointer.com (one of the WP influencer in Chinese community)

Love it, Justin! Thank you!! As of today, we’re already implementing this feature into the member dashboard pages for a number of our customers. Do you have plans for more Elementor integrations? If so, here’s a request: Displaying LearnDash Group members (and their course(s) status) per unique LD group organizer. Maybe even some tight integration with Elementor’s dynamic fields? 🙂 I love LearnDash! You guys rock!!

Nice! Any update on native gamification?

CallumReply

Yup! Make sure you’re in our FB group – info coming very soon.

Hey Justin! This is great news and a big plus for anyone using Elementor.

Quick question, is it possible to change font, text size, text alignment, number of columns, etc. within the LearnDash Course Grid widget? I can’t seem to find any options in the Course Grid widget aside from menu order and course taxonomies.

If not, will we need to use CSS still?

Thanks!

Forged In I.T.Reply

Good question. I’d love to know the answer here as well.

The only style options I see for the “Course List” widget — which I assume should display the course grid if the grid add-on is active — are Row Item Background Color and Row Item Title Color. See example here →

So I did some more testing on this and the two color options I mentioned above, for the Course List widget, only work when you’re NOT using the Course Grid add-on.

There appear to be zero design options for the course grid.

If you’re interested, I have a plugin that provides 20 design options for the course grid without the need to use any CSS. It’s all managed in the Customizer (along with 80+ other design options).

Design Upgrade Pro for LearnDash →

Will it be possible now to design the list of topics/lessons in the focus mode. This is crucial for me, and I think for a lot of users like me.

JonReply

This doesn’t extend yet to focus mode, but is on our roadmap. There are other plugins (free and paid) that change the style of focus mode.

Hey Jon — I’m the developer of one of the plugins Justin mentioned that allows you to make changes to focus mode, as well as the lesson/topic lists. It’s a premium plugin called Design Upgrade Pro for LearnDash.

You can learn more here.

How does this compare to using Snap Orbital’s LearnDash Visual Customizer?

GregReply

They are a bit different in purpose. Visual Customizer can edit focus mode whereas this isn’t yet possible with Elementor. Elementor allows for template creation, global widgets, etc.

Thank you!!
Great news. Im sure im going to use this.

NiritReply

Thanks for your answer. So you could use both side by side?

GregReply

Theoretically, yes. But you might encounter conflicts. There are likely elements that both Visual Customizer & Elementor will both allow you to customize. Especially around things like text & background colors.

Elementor’s styles will likely take precedence. But the other features of VC that Elementor doesn’t provide, they should still work fine.

Will there be more Elementor templates added for:
– Groups Landing Page (post LearnDash v3.2) which can list all the courses within that group as well as other widgets like price / access / etc … similar to the Course landing page.
– Quiz Certificate and Group Certificate access by the learner once the access to their course / quiz / group has expired

KetanReply

That would be a nice option!

ChristiaanReply

What about Oxygen Builder? 🙂 Tutor LMS has such an integration and a lot of people using Oxygen choose it although LearnDash is better. 😀

PiotrReply

This is great. But looks like you have to have Elementor Pro, correct?

MabelReply

Near the top of the article you mention, “You must have Elementor activated on your website for the integration to work,” and you link to the free version of Elementor.

I suggest you change that to clearly say “Elementor Pro” and link to the site where you can purchase the pro version. This has the potential to confuse a lot of people.

Wooo! I love it.
Definitely the masterpiece we needed from each other.
Thanks.

Can you create a Course custom template and use ACF for Elementor with this new plugin?

ChristiaanReply

So I went and purchased Elementor Pro and looked at the LearnDash template and it looks nothing like the picture on their page. And I went through to search for all of the elements and after 8 hours, I still can’t get it to look like the page. Are there any instructions on how to build that page because my template just had ‘download certificate’ and now I’m just worn out buy it.

jamesReply

I’ve got linear progression turned on and it’s still possible to click ahead on a future lesson and see the content between “lesson info bar” and “lesson content” when using elementor. The topics in the “lesson content” section does not show, however.

If you don’t use elementor it hides all of the content in the lesson if someone skips ahead to a future lesson.

Stephen HuneycuttReply

Hello,
need I to use this add-ons Elementor Pro?

StenReply

i follow all steps but i cant get learndashelementor widget on my elementor.can u help me please

It’s a major jip that neither Elementor nor LearnDash mention that you need a paid version of Elementor for this integration to work.

JamboReply

Hi Jambo, you’re correct. There is a notice in the integration itself when installed.

Hey, I have Elementor pro (and also have the Learndash add-on) but the new learndash widgets don’t appear in the site bar. Do I need to take an extra step

In the screenshot above you show the course widgets as LearnDash widgets, but on my side they are WordPress widgets with some options for sorting and I am not able to change the design like I am used in Elementor, no style tab.

HeinzReply

I think they are still working on the style tab.

Flavian-Calinic StuparuReply

Anything regarding free version of elementor?

God bless! Could you please, for the Course List widget, make the “Grid Settings”->”Columns” field responsive? Thank you!

Flavian-Calinic StuparuReply

Leave a Reply

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

Your course could already be online!

We offer a 30 day money-back guarantee and have a world class community to help you get your course online today!

See LearnDash in action. Online Demo

[i]
[i]