Using the plugin with Divi 5 #
With Course Page Builder for LearnDash and Divi, you can design your LearnDash course pages directly in the Divi 5 Visual Builder.
The plugin adds three native Divi modules that let you place the course information bar, action button, and course content list wherever you want in your layout. You can then customize their appearance using the module settings, without inserting shortcodes.
Before You Begin #
Make sure you have:
• Divi 5 installed and activated.
• LearnDash LMS installed and activated.
• Course Page Builder for LearnDash and Divi installed and activated.
Once the plugin is active, it automatically disables LearnDash’s default course information bar and course content list, removes the extra spacing around the course page, and removes the theme’s default title and sidebar.
There’s no additional plugin configuration required. You can start building your custom course page right away.
Step 1: Open Your Course in the Divi 5 Visual Builder #
1. From your WordPress Dashboard, go to LearnDash LMS → Courses..
2. Open the course you want to customize.
3. Launch the Divi 5 Visual Builder.
4. Start building your layout using Divi sections, rows, columns, and modules.
You can create your design from scratch or start with a ready-made layout and customize it to suit your website.
As you build, decide where you want to display the course information, the action button, and the list of lessons, topics, and quizzes.
Step 2: Add the LearnDash Modules #
To add a LearnDash element, click the Add New Module button in the Visual Builder and search for the module you need. The three modules provided by the plugin are:
• Divi Learndash Course Info Bar
• Divi Learndash Course Action Button
• Divi Learndash Course Content
Each module serves a different purpose.
Course Info Bar #
The Course Info Bar displays LearnDash’s course status information.
Depending on the visitor’s course status, it can display relevant course details, pricing and enrollment information, or progress information for enrolled students.
When to use it: Add this module when you want to display the course information and status bar as part of your custom course-page design.
Course Action Button #
The Course Action Button module displays the relevant course action, such as logging in, enrolling, or purchasing a course. What appears depends on the visitor’s current state and relationship with the course.
The module also lets you customize what enrolled students see and preview different states while designing your course page.
Preview different states
Under the Content tab, expand the Preview settings to choose which of the eight available states to display in the Visual Builder.
This lets you preview how the module will look in different situations without having to change your actual enrollment status or test each state with a different user account.
Customize the enrolled text
Under Content → Text, you can enter your own text for the enrolled state. This text will be displayed when a user is enrolled in the course.
To customize its appearance, open the Design tab and expand Enrolled Text. There you can style the text to match your course-page design.
When to use it: Use this module when you want to position the course action separately from the full Course Info Bar, such as placing the enrollment button in a hero section near the course title and introduction. You can also customize the enrolled text so the module fits your design when a student has already enrolled.
Course Content #
The Course Content module displays the course curriculum, including its lessons, topics, and quizzes.
Preview and style the course content
Under Content → Preview, you can switch Show Sample Content on or off.
When enabled, sample content displays the different elements that can appear in the course content list, depending on the number and status of the lessons in the course. This lets you see the available elements directly in the Visual Builder and customize their appearance using the module’s Design tab.
When you’re finished styling, you can switch off Show Sample Content to return to the normal preview.
When to use it: Add this module wherever you want visitors or students to find the course curriculum. For example, you could place it below a course overview or in a dedicated curriculum section.
Example Course Page Layout #
You can arrange the modules in any order that works for your course. For example:
1. Hero section: Course title, introduction, and Course Action Button.
2. Course information: Course Info Bar with relevant status and pricing information.
3. Course overview: Text, images, and other Divi modules explaining what students will learn.
4. Curriculum: Course Content module listing the lessons, topics, and quizzes.
This is just one possible layout. You can use Divi’s design tools to create a completely different structure that fits your website.
Step 3: Customize the Module Design #
One of the advantages of using native Divi 5 modules is that you can adjust their appearance directly in the Visual Builder.
Open a module’s settings to explore its available options. Depending on the module, you can customize its content and appearance using the available settings in the Content, Design, and Advanced tabs.
For example, you can adjust the typography, colors, spacing, and button appearance using the relevant design settings. You can also use the Advanced tab’s custom CSS options when you need more control over the styling.
You don’t have to use the default appearance. Customize the modules to match your website’s branding and the rest of your course-page design.
For additional styling ideas and examples, see our tutorial:
How to Design Your LearnDash Course Pages with Divi
Although the tutorial includes CSS examples, you can use it as a starting point for deciding how you want your course page to look.
Step 4: Reuse Your Course Page Design #
If you have multiple courses, you don’t need to design every course page from scratch.
You can save your layout to the Divi Library and reuse it on other course pages. Alternatively, use the Divi Theme Builder to create a template for your course pages.
This makes it easier to maintain a consistent design across your courses while keeping each course’s content specific to that course.
Want a Faster Starting Point? #
If you’d rather not build your course page from scratch, you can download our four free Divi LearnDash course page layouts.
Import a layout into your website, then customize its content, design, and LearnDash modules to fit your needs.
Need Help? #
• For installation instructions and an overview of the plugin, see Getting Started with Course Page Builder for LearnDash and Divi.
• For more styling ideas, read How to Design Your LearnDash Course Pages with Divi.
• If you’re using Divi 4, see Using Course Page Builder with Divi 4 for instructions on adding LearnDash elements with shortcodes.