You can integrate eLearn Commerce with any page builder such as Divi, ThriveArchitect, Elementor, Beaver Builder etc. and display your courses in a page which can contain any other content elements coming from your favorite Page Builder.

It is important to note, however, that this integration will not allow you to edit parts of your course such as lessons and sections through the page builder, you'll still need to edit them in eLearn Commerce.

You can however use any shortcode from your page builders within eLearn Commerce sections and lessons.

How to build the course page using the page builder?

This can be done in two different steps, one done in eLearn Commerce and the other in the page builder.

1.: The first step is to create the course in eLearn Commerce.

To create a new course, go to eLearn Commerce -> All Courses in your WordPress sidebar and click the New Course button.

You can then create your course following the normal process. Add the name of the course, description, images, section and lesson contents and everything that is relevant to your course.

Once finished, click Publish to save and publish your course.

2.: The second step is to create the course page in the page builder.

Now that your course is ready and published, create a new page in WordPress using your page builder of preference.

Give your page a name. It doesn't have to be the same as the name of your course.

To embed your course in the page, click the eLearn Commerce icon in the editor and click Course Embed. This will open the shortcode editor.

Choose the course you'd like to embed from the Course drop-down.

If you do not need the progress bar, uncheck the Show Header checkbox. However, if you do need the progress bar, you'll need to hide the page title to avoid duplication. If your page builder does not offer this option, you can use the Hide Page and Post Title plugin.

Finish setting up your course embed and click the Use Shortcode button to add it to the editor.

Now your course is embedded in the page! You can now continue editing the page however you'd like.

Once the page is ready, click Publish to make it live. To make sure the course button in your Index Page and sidebars will always lead to the correct page, grab the URL of the page created using the course builder and follow these steps:

  • Go to eLearn Commerce -> All Courses.
  • Click Edit on the course you've embedded on the page.
  • Scroll down to Button Settings.
  • Paste the page URL in the Custom URL field.
  • Click Publish to save the changes.

If you need to make any updated to your course later on, remember you'll need to do it editing the course from eLearn Commerce -> All Courses.

Did this answer your question?