For a while now, LearnDash users have been coming to me looking for a way to enable the Divi Builder on their LearnDash pages (courses, lessons, topics, etc), so that they could use its flexible drag-and-drop functionality and collection of modules (sliders, etc) to design these pages. Up until now, the best I could do was point them to my article on enabling Divi Builder on custom post types or the corresponding feature in my Divi Booster plugin. This, along with similar tutorials on the web, would get the Divi Builder working on the LearnDash pages, but it left a lot to be desired.
I created Divi LearnDash Kit to offer LearnDash users a better way to integrate LearnDash and the Divi Builder. I took the feature for enabling Divi Builder on custom post types as a starting point, and configured the Divi LearnDash Kit plugin so that it enables Divi Builder support on LearnDash pages out-of-the-box with no configuration required. I then added support for the Divi Page Layout option which lets you select between a fullwidth, left-sidebar and right-sidebar layout on LearnDash pages. I also made a number of style changes to ensure that these settings behave the way you'd expect if you are familiar with using the Divi Builder on regular posts / pages. I then added custom Divi modules which correspond to LearnDash shortcodes and make it easy to include LearnDash components (course lists, etc) within the Divi Builder layouts. These modules simplify the process of adding shortcodes and allow you to take advantage of the same features you find in other Divi modules, such as the ability to save to the library, selectively sync fields, and apply border / background styles.
The Divi LearnDash Kit is under active development and I'd love to hear about any features you'd like to see added, etc, so that I can make it even easier for you to use LearnDash with Divi. Just drop me a note in the comments.
Installing the Divi LearnDash Kit
Enabling Divi Builder on a LearnDash Page
You can now use all the features you'll be familiar with if you've used the Divi Builder before. There's a lot of them, and a lot of tutorials on the web, so I won't cover how to actually use the Divi Builder itself here. But suffice to say, you can now easily set up sections, rows and columns, and add Divi modules such as sliders, videos, accordions, etc, to get the look you want for your LearnDash page. You can then save or preview the page to see your layout.
Changing the Page Layout
The "Page Layout" option controls how the page appears, and can be set to "Fullwidth", "Left Sidebar" or "Right Sidebar". When Fullwidth is selected, the Divi Builder layout will occupy the fullwidth of the page. When either of the Sidebar options are selected, the regular sidebar will be displayed alongside the Divi Builder layout, which will take up only as much width as the width of a Divi post (or equivalently, as wide as the content on a LearnDash page when the Divi Builder is not enabled). This is consistent with how the Divi Builder displays on regular posts and pages.
Using the Divi Builder LearnDash Modules
The advantages of using modules instead of directly using shortcodes include the ability to easily add the content within Divi Builder layouts, the ability to use the Divi's library and selective option syncing to easily reuse / update content, and the ability to use various style options such as background and border settings. The modules include handy drop-down lists of courses, etc, to save you having to manually look up IDs.
When you click to insert a new module, you'll be presented with the list of Divi's own built-in modules, and among these you'll find the new added LearnDash modules. This is shown in the screenshot above – the added modules "Course Content", "Course Expire Status", etc, are marked with the LearnDash logo.
You can then click on one of these modules to insert it into your page, post, etc. You'll then be presented with the module settings which you can configure to your liking. As with any other Divi module, you can also save the configured module to the library for later reuse.
Styling the Modules
Divi LearnDash Kit does some behind the scenes CSS tweaks to fix some LearnDash / Divi incompatibilities and ensure that the LearnDash content displays correctly in Divi.
The custom LearnDash modules added by Divi LearnDash kit contain the standard style options, such as the background, border and margin/padding options which are hopefully familiar to you from other Divi modules. There are also contain custom style options for some of the main elements in the modules' output. I plan to add further options to the modules in the future to allow more control over the styling of the LearnDash components. If there are any particular options you'd like to see added, please let me know in the comments and I'll do my best to accommodate them.
Using the Main Divi Library
If you would prefer to have all your LearnDash pages use the main Divi Library, you can enable this from your WordPress Dashboard at "Settings > Divi LearnDash Kit > General > Use Main Library". Once enabled, predefined layouts and page / post layouts will show up in your LearnDash pages, and layouts saved on LearnDash pages will show up on all pages / posts / LearnDash post types.
Hiding the Default Page Components
Divi and LearnDash add some default components to the LearnDash pages, such as the post title, course content and course status. If you want to hide these default components (e.g. so you can add the components elsewhere in your page using the Divi LearnDash Kit modules), see this post: