How To Create Custom Lesson Layouts for Your LearnDash Courses

Most people want to create an online course that is not only useful, but that is also visually appearing. In fact, most of the time visual components can help to make your course more effective.

The good news is that using a program like LearnDash, adding your own unique “flavor” to your courses is quite easy given the flexibility of WordPress.

With WordPress, it’s simple to add media, create various layouts, implement buttons, dynamic text, and so on.

But if you’re interested in creating a truly custom visual component to your course content, then we strongly recommend you use Visual Composer by WPBakery.

If you’re not familiar with Visual Composer, it is drag-and-drop page builder for WordPress with both front-end and back-end editors. Simply put, if you want to create a professional layout for your lessons, then Visual Composer is the way to go.

Using Visual Composer and LearnDash is Easy

When you install and activate Visual Composer, you will first need to go to SETTINGS > VISUAL COMPOSER. On this page is where you can select to apply Visual Composer to LearnDash custom post types (Courses, Lessons, Topics, Quizzes, etc.). Once you select these and save, you’re ready to get started.

Navigate to an existing LearnDash lesson (or create a new one if you don’t have any yet). You will notice two new ways to edit your content:

You can use either editor. I went ahead and selected the front-end editor and was taken to a page that contained the following:

As you can see, I am presented with a variety of potential layouts, making it extremely easy to create a visually attractive LearnDash lesson with the click of the button.

Once you select your layout, all you need to do is being adding your content, as shown below:

Should You Use Visual Composer with LearnDash?

The answer to this really depends. If your courses are primarily video driven, you might still get some benefit out of  using Visual Composer, but probably not as much compared to courses that have a multiple course materials (text, audio, video, images, etc.).

Also, it’s important to keep in mind that while Visual Composer is pretty simple to use, you’ll have to get used to it first. As with most software, there is a bit of a learning curve at first. If your project is on a tight timeline, then taking on an extra piece of software might not be a possibility.

With these things in mind, I still recommend Visual Composer for LearnDash users who want to get a little more creative with the way they present the course content. The screenshots included in this article are just the tip of the iceberg when it comes to what Visual Composer allows you to add to your Lessons.

Visual Composer is available for purchase on CodeCanyon.

Categories

About the Author:

Justin Ferriman is the co-founder and CEO of LearnDash, the WordPress LMS trusted by the world's leading organizations, such as the University of Michigan, Digital Marketer, WPEngine, and Infusionsoft. Justin has made a career as an elearning consultant where he has implemented large-scale training programs for Fortune 500 companies. Twitter | LinkedIn

31 Comments
  1. Hello,

    I ve bought visual composer, I want tot insall in on my site. Becourse i want to use it with learndash. The tjheme i use is enfold. The plugin doesn’t install.
    What is the problem and what can i do?

    Kindly recards
    Jurgen Hildering

    • Hi Jurgen-

      If the plugin is not installing you’ll want to reach out to WPBakery via their support. That said, make sure when you download the ZIP file that you unzip it. The ZIP file that you download initially is not the plugin. The plugin is actually located inside this folder via another ZIP file.

    • Hi Jurgen,

      Note that Enfold includes Avia, its own layout builder, which is a replacement for Visual Composer. Avia can do almost as much as Visual Composer and using both on the same site could introduce conflicts. By default Avia (you’ll see it as “Advanced Layout Edit”) doesn’t work on LearnDash post types. To get it LearnDash working with Avia, you’ll want to add code like this to your functions.php file:

      add_filter(‘avf_builder_boxes’, ‘avia_register_meta_boxes’, 10, 1);
      function avia_register_meta_boxes($boxes)
      {
      if(!empty($boxes))
      {
      foreach($boxes as $key => $box)
      {
      $boxes[$key][‘page’][] = ‘sfwd-courses’;
      $boxes[$key][‘page’][] = ‘sfwd-lessons’;
      $boxes[$key][‘page’][] = ‘sfwd-topic’;
      $boxes[$key][‘page’][] = ‘sfwd-quiz’;
      }
      }
      return $boxes;
      }

      • Hey Ryan,

        I am using Divi, which also comes with its own custom page builder.. Do you think that using Visual Composer with Divi will also cause problems? Currently, I cannot use the Divi Page Builder for any of the LearnDash Content. So, I am hoping that I could use Visual Composer to my benefit.

  2. Dan W.

    Awesome suggestion…! Visual Composer is saving my life. The only issue I’ve run in to is with trying to use LearnDash shortcodes within VC elements (for example, in a text box). The page will spin and spin until removing the shortcode and reloading.

    It is possible to map shortcodes to VC, though it looks like it will take more manual labor and digging through LearnDash source files to find out how to get them to map so dynamically.

  3. Grace

    Hi Justin,

    Will you please respond to Jeffrey Soto’s question above regarding the Divi theme?

    I’m considering that theme, too. But, I need to find an alternative theme if the builder Elegant Themes packs with Divi isn’t going to play friendly with LearnDASH.

    Thanks so much!

    • Hi Grace-
      Thanks for the comment. People are using both LearnDash and Divi. The page builder in that theme needs to be extended to LearnDash custom post types but there are solutions for doing this.

      • Grace

        Thanks for your response, Justin.

        Now, you said,

        “The page builder in that theme needs to be extended to LearnDash custom post types but there are solutions for doing this.”

        What are those solutions and where can I find them? Are they LearnDash or Divi addons? Are they plugins, and if so, which ones? Does it mean adding custom coding to the theme?

        Your response is really vague. Will you please clarify?

        Thanks again!

  4. How would you use learn dash student conditional shortcodes with visual composer like:
    [visitor]
    This shortcode shows the content if the user is not enrolled in the course. Example usage: [visitor]Welcome Visitor![/visitor]
    [student]
    This shortcode shows the content if the user is enrolled in the course. Example usage: [student]Welcome Student![/student]

    While these could bracket elements in the regular wp text editor after the post is created in visual composer, if you opened visual composer again and changed anything it would over-write these learn dash shortcodes and replace everything with the new visual composer created information.

    So I’m wondering how a visual composer created post could be made to function according to the short-codes based on conditions of the student. Would you always have to go into the wp text editor and locate the VC elements (assuming you could recognize them) and then insert the conditional short-codes around them again?

  5. Chris

    Hi all,

    I’ve recently bought LearnDash and am using Avada as my theme. Avada has a built in page builder called Fusion. I have combed through their support forums and found this post on setting Fusion page Builder to work with LearnDash:
    https://theme-fusion.com/forums/topic/learndash-post/

    However,

    I believe Visual Composer is a more powerful page builder and am seriously considering it. If so, there is an option in Avada to turn off the Fusion Page Builder.

    Are any of you using Avada + LearnDash + either Fusion or Visual Composer?

    Thank you!

    • Hi Chris-

      I know Avada & LearnDash are being used together, as well as VC and LearnDash. Regarding the Fusion Page Builder, it likely needs to be extended to custom post types to be used with LearnDash.

  6. Matt

    My question is about LearnDash and Visual Composer, but it does not deal with using VC to style LD. I want to use LearnDash Courses and Lessons as a data source in Visual Composer’s post grids. I can’t seem to grab your custom post type or by ID with custom queries. Should I be asking you or WPBakery this?

    • Hi Matt-
      Indeed that would probably a question best asked of WPBakery. It’s possible that in order for our posts to be ‘grabbed’ that we would need to do some kind of specific formatting/coding. This could explain why they can’t be selected as that hasn’t been anything we’ve worked on.

  7. Paul

    Hi Justin, what I want to do is to edit the layout of the templates so I don’t have to manually configure every course / lesson. My issue is that I want to edit the template using Visual composer. is this possible?

  8. Ange

    Hi Justin,

    I’ve just purchased VC, and have Activated it. However, your instructions say to go Settings -> Visual Composer so that I can select to apply VC to the LearnDash custom post types (courses, lessons etc).

    I can’t see Visual Composer as a menu option under “Settings”. What do you think I could be doing wrong?

    Thanks so much in advance! Ange

0 Pings & Trackbacks

Leave a Reply

86 Reasons To Choose LearnDash ... Show Me →
+ +