In This Article
1. Overview
2. Why the course page fights you
3. The easy way: our free Course Page Builder plugin
3.1. Step 1 — Install and activate the plugin
3.2. Step 2 — Build the page in Divi
3.3. Step 3 — Place the LearnDash elements with shortcodes
3.4. Step 4 — Style the LearnDash elements to match your site
3.5. Step 5 — Apply the design across your courses
4. A note on lessons
5. Want the whole site designed for you? Meet Divi eLearn
2. Why the course page fights you
3. The easy way: our free Course Page Builder plugin
3.1. Step 1 — Install and activate the plugin
3.2. Step 2 — Build the page in Divi
3.3. Step 3 — Place the LearnDash elements with shortcodes
3.4. Step 4 — Style the LearnDash elements to match your site
3.5. Step 5 — Apply the design across your courses
4. A note on lessons
5. Want the whole site designed for you? Meet Divi eLearn
You build your site in Divi because you care how things look. Then you open a LearnDash course page… and it looks nothing like the rest of your site. A default progress bar at the top. A plain list of lessons at the bottom. Generic spacing everywhere. An afterthought.
Here’s the good news: you can take full control of your LearnDash course pages and design them in Divi, exactly like any other page. And thanks to a free plugin, it’s genuinely simple. This guide walks you through it.
LearnDash isn’t the problem, by the way — it’s a great LMS. It just controls the course page by default, and this is about handing that control back to you.
Why the course page fights you
Most of a LearnDash site is ordinary Divi work. A homepage is a homepage. A sales page is a sales page. You already know how to make those beautiful.
The single course page is different. By default, LearnDash generates it for you — it automatically adds a progress/status bar at the top and the course content list (lessons, topics, quizzes) at the bottom, and wraps it all in its own spacing. That’s convenient, but it’s also why you can’t simply design it in Divi: LearnDash is controlling the page, not you.
So designing a course page in Divi comes down to two things:
- Switch off LearnDash’s automatic output, so you get a clean, blank page.
- Put the LearnDash elements back where you want them, inside your Divi design.
Doing that by hand means custom code. But there’s now a free plugin that does it for you.
The easy way: our free Course Page Builder plugin
We built a free plugin for exactly this — Powdi Course Page Builder for LearnDash and Divi, available in the WordPress plugin repository. It works with both Divi 4 and Divi 5.
Here’s how simple it makes the process.
Step 1 — Install and activate the plugin
Install Powdi Course Page Builder for LearnDash and Divi from the WordPress repository and activate it.
That’s the whole setup. The moment it’s active, it automatically:
- switches off LearnDash’s default progress/status bar,
- switches off the default course content list, and
- removes the leftover top and bottom spacing on the course page.
You’re now looking at a clean, blank course page that’s fully under your control in Divi. Nothing to configure.
(And if you ever want the default LearnDash layout back, just deactivate the plugin — it’s completely reversible.)
Step 2 — Build the page in Divi
Now open the course with the Divi Builder and design it like any other page. Sections, rows, columns, images, buttons, your own headings and calls to action — the full Divi toolkit, finally applied to your course page.
Step 3 — Place the LearnDash elements with shortcodes
Wherever you want a LearnDash element to appear, drop a Divi Code module and add one of these shortcodes:
- [powdcopa_course_infobar] — displays the full LearnDash status bar for the course.
- [powdcopa_course_action_button] — displays just the action button (for example, “Login to enroll”). It appears only to users who haven’t taken action yet, such as visitors who aren’t logged in or enrolled. Handy when you want to place a clear call-to-action button on its own, exactly where it belongs in your design.
And for the list of lessons, topics, and quizzes, you can use LearnDash’s own native [course_content] shortcode, placed wherever you like in your layout. LearnDash offers many other shortcodes too — for course lists, student progress, and more — and you can find the full reference in their official documentation.
Because these sit inside normal Divi modules, you can wrap them in styled sections, arrange them in columns, and build your own design around them. The LearnDash functionality stays live and dynamic; the design is entirely yours.
Step 4 — Style the LearnDash elements to match your site
When the LearnDash elements first appear, they come with only light default styling — mainly text and colors. That’s on purpose, so they don’t fight your theme. To make them match your brand, you can add a little CSS.
Paste the CSS below into Divi → Theme Options → Custom CSS (or your child theme’s stylesheet). Every value is just an example — change the colors and sizes to match your own design. Each line is commented so you know exactly what it does.
Here’s a complete starting point covering the status bar, the action button, and the course content list:
/* =============================================
STATUS BAR — [cpbld_learndash_status]
The course info bar (Current Status | Price | Get Started).
============================================= */
/* Status container when the user IS enrolled (progress bar) */
.learndash-wrapper .ld-course-status.ld-course-status-enrolled {
background-color: #f0f3f6;
border: 0px solid #d1e7dd;
border-radius: 6px;
padding: 20px 10px;
}
/* Status container when the user is NOT enrolled */
.learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
background-color: #f0f3f6;
border: 0px solid #d1e7dd;
border-radius: 6px;
padding: 20px 10px;
}
/* The headings in the info bar (Current Status | Price | Get Started).
The long prefix makes sure the style applies inside Divi. */
.et-db #et-boc .et-l .ld-course-status.ld-course-status-not-enrolled h2.ld-course-status-label,
.ld-course-status.ld-course-status-not-enrolled h2.ld-course-status-label {
font-size: 11px;
color: #728188;
}
/* Separating line color between the 3 columns */
.learndash-wrapper .ld-course-status.ld-course-status-not-enrolled>* {
border-color: #bec5cb !important;
}
/* Status label (e.g. NOT ENROLLED) */
.learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-tertiary-background {
background-color: #3f3a64 !important;
color: #ffffff !important;
border-radius: 12px;
}
/* Course price */
.learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-segment .ld-course-status-price {
color: #617175;
font-size: 32px;
}
/* Button (Take This Course) */
.learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-segment .btn-join {
background-color: #235af3;
border: 0;
border-radius: 20px;
width: 100%;
}
/* --- ENROLLED STATE (progress view) --- */
/* "33% Complete" text.
NOTE: uses LearnDash's SECONDARY color — you can also change
that globally in LearnDash settings. */
.learndash-wrapper .ld-course-status.ld-course-status-enrolled .ld-progress-percentage {
color: #20ad96 !important;
font-size: 16px;
}
/* "Last activity on..." text. */
.learndash-wrapper .ld-course-status.ld-course-status-enrolled .ld-progress-steps {
color: #617175;
font-size: 13px;
}
/* Progress bar track (background behind the fill). */
.learndash-wrapper .ld-course-status.ld-course-status-enrolled .ld-progress-bar {
background-color: #e6ebf0;
border-radius: 20px;
}
/* Filled portion of the progress bar.
NOTE: uses LearnDash's SECONDARY color (changeable in LearnDash settings). */
.learndash-wrapper .ld-course-status.ld-course-status-enrolled .ld-progress-bar-percentage {
background-color: #20ad96 !important;
border-radius: 20px;
}
/* "In Progress" status tag.
NOTE: uses LearnDash's PRIMARY color (changeable in LearnDash settings). */
.learndash-wrapper .ld-course-status.ld-course-status-enrolled .ld-status-progress {
background-color: #3f3a64 !important;
color: #ffffff !important;
border-radius: 12px;
}
/* =============================================
ACTION BUTTON — [cpbld_learndash_action]
The standalone enroll / "Take this Course" button.
Note: uses !important to override the button's inline styles.
============================================= */
a#btn-join.btn-join {
background-color: #20ad96 !important; /* button color — change to your brand */
color: #ffffff !important; /* text color */
border-radius: 20px !important; /* rounded corners (0 = square) */
border: 0 !important;
padding: 12px 32px !important; /* top/bottom left/right */
font-size: 15px !important;
/* width: 100%; */ /* uncomment for a full-width button */
}
a#btn-join.btn-join:hover {
background-color: #1b9482 !important; /* darker shade on hover */
color: #ffffff !important;
}
/* =============================================
COURSE CONTENT LIST — [course_content]
The list of lessons (LearnDash's native shortcode).
============================================= */
/* The whole lesson list container. */
.ld-lesson-list {
background-color: #ffffff;
border-radius: 6px;
padding: 0; /* set to 10px / 20px to add framing space */
}
/* The "Course Content" heading above the list. */
.ld-lesson-list .ld-section-heading h2 {
font-size: 22px;
color: #3f3a64;
}
/* Each lesson row. */
.ld-lesson-list .ld-item-list-item {
background-color: #f0f3f6;
border-radius: 6px;
margin-bottom: 8px;
padding: 6px 12px;
}
/* Each lesson row on hover. */
.ld-lesson-list .ld-item-list-item:hover {
background-color: #e6ebf0;
}
/* The lesson title text. */
.ld-lesson-list .ld-item-title {
font-size: 16px;
color: #333333;
}
/* The lesson title color on hover. */
.ld-lesson-list .ld-item-name:hover .ld-item-title {
color: #20ad96;
}
/* Incomplete lesson icon (empty circle). */
.ld-lesson-list .ld-status-icon.ld-status-incomplete {
border-color: #bec5cb !important;
}
/* Completed lesson icon (filled circle with checkmark). */
.ld-lesson-list .ld-status-icon.ld-status-complete.ld-secondary-background {
background-color: #20ad96 !important;
}
/* The checkmark inside a completed lesson icon. */
.ld-lesson-list .ld-status-complete .ld-icon-checkmark {
color: #ffffff !important;
}
Don’t be put off by the length — you don’t have to use all of it. Style the parts you care about, delete the rest, and adjust the colors and sizes to fit your brand. Dedicated Divi modules are on the way to make this even easier, but for now this gives you full control.
Step 5 — Apply the design across your courses
You usually don’t want to rebuild this by hand for every course. Two approaches help:
- Save your layout to the Divi Library and load it onto each course as a starting point.
- Use the Divi Theme Builder to assign one course template to all your courses, so every course page inherits the same design while still pulling in its own dynamic content.
A note on lessons
For lesson pages, you don’t need to do any of this. LearnDash’s Focus Mode already gives students a clean, distraction-free lesson view that looks good out of the box. It’s usually smarter to lean on Focus Mode for lessons and put your design energy into the course pages, the course listing, and the rest of your site.
Want the whole site designed for you? Meet Divi eLearn
The free plugin gives you the power to design your course pages in Divi. But a professional course site is more than the course page — it’s the homepage, the course grid, the supporting pages, the checkout… all pulling together.
Building every piece of that from scratch is a serious amount of design work. That’s exactly why we made Divi eLearn for LearnDash — a complete, professionally designed LearnDash child theme for Divi. It’s the done-for-you version of everything above.
With eLearn you get:
- Three ready-made homepages with hero sections, a styled course grid, and an opt-in section
- A customizable course grid with per-course meta fields, reused across your homepage and archives
- Matching about, contact, archive, and blog pages (with two designed single-article templates built via the Divi Theme Builder)
- A complete WooCommerce selling experience — styled cart and checkout, mini cart, and a fully customizable account dashboard
- One coherent design from homepage to course to checkout
Designed course page layouts built with this same take-over-and-build approach, already done for you
So you have two honest paths. Start free with the Powdi Course Page Builder plugin and design your course pages yourself… or start from a complete, designed site with Divi eLearn for LearnDash and customize from there.
Either way, the goal is the same: LearnDash course pages that finally look like they belong to your site.
