My plugin, Divi LearnDash Kit, aims to make it easier to use LearnDash on Divi, Extra and sites running the Divi Builder plugin.

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.

The Divi LearnDash Kit is just a regular WordPress plugin, and you can install it as you would any other. From your WordPress dashboard, go to "Plugins > Add New > Upload Plugin", locate your copy of Divi LearnDash Kit on your computer, and click "Install Now". Once activated, there is no configuration needed – you're ready to go.

If you now go to the edit screen for a LearnDash page (by clicking to add a new lesson, for example), you'll see that a purple "Use Divi Builder" button has been added. Click this, and the main Divi Builder editor box will appear, replacing the regular WordPress editor box.

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.

Another feature that is enabled when you install the plugin is the Divi Page Layout options. If you look in the top right-hand corner of the LearnDash page edit screen, you'll see the purple "Divi Custom Post Settings" box. This includes several options including the "Page Layout" option.

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.

When you install the Divi LearnDash Kit, a number of new modules are added alongside Divi's own. These modules correspond to, and generate, LearnDash shortcodes, so adding one of these modules is equivalent to adding the corresponding shortcode.

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.

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 some additional style options, such as the background, border and margin/padding options which are hopefully familiar to you from other Divi modules.

At the moment, apart from the options mentioned above, the actual content outputted by the modules is identical to that generated by the shortcodes themselves, and you will still require CSS if you wish to restyle them. I plan to add new options to the modules in the future to allow easy 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.

By default, LearnDash Kit uses a separate Divi "Library" for each LearnDash post type. This means that any layouts you save on course pages will be available only on other course pages, layouts saved on lesson pages will be available only on other lesson pages, etc. It also means that the predefined layouts and any layouts saved on pages / posts won't show up in your LearnDash pages' libraries.

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.

If the Divi LearnDash Kit plugin sounds like what you need, you can get your copy here: