Your course grid is the page where browsing turns into buying. It’s where a visitor sees everything you offer, compares, and picks the course they’re going to enrol in. Get it right and it quietly does a lot of selling. Get it wrong — or leave it looking default — and people bounce before they ever reach a single course page.
And if you’re building your site in Divi, getting it right is harder than it should be. Here’s why, and what to do about it.
The real problem: the default grid is decent, but rigid
Let’s be fair to LearnDash here, because it’s better than people expect. The course grid is now built right into LearnDash core — you don’t need to install a separate add-on — and out of the box it actually looks fine. A tidy grid of cards, each with an image, the course title, a button, and a little ribbon in the corner. For a default, it’s perfectly presentable.
The problem isn’t that it’s ugly. The problem is that it’s rigid.
Out of the box, each card shows the featured image, the title, a button (“Enroll Now,” or “Continue Study” once someone’s enrolled), and a ribbon showing the price (or “Free,” or “Enrolled”). You can add a bit more per course from each course’s Course Grid Settings — a short description, a duration, custom button and ribbon text. So it’s not bare.
The catch is where the real flexibility lives. There are two versions of the grid, and the capable one — Course Grid 2.0, with its different skins, card layouts, filters and styling controls — is built for the block editor. LearnDash’s own documentation says as much, and notes the options are more limited when you use shortcodes instead. And as a Divi user, shortcodes are exactly where you’re steered: their docs are explicit that with a page builder you use shortcodes, not blocks, and that Divi can’t edit LearnDash’s dynamic content the way an Elementor add-on can. So the styling-rich version of the grid sits on the other side of a wall from how you actually build.
None of that makes the default grid bad. It makes it limited in Divi — you can set fields and style around fixed markup, but you can’t design the grid visually the way you design everything else, and the richest styling tools stay locked in the block editor. Frustrating, on the page where people choose what to buy.
The result, for a lot of LearnDash-on-Divi sites, is a course grid that’s plain, hard to customise, and clearly not part of the designed site around it — sitting on the most important browsing page you have.
What a good course grid actually needs
Before the fix, it’s worth being clear about what you’re aiming for, because a course grid is doing a real job:
- It has to look like the rest of your site. A polished homepage followed by a generic grid of course boxes breaks the spell. Consistency is what signals “this is a real, professional course platform.”
- It has to be scannable. Someone browsing should be able to take in their options quickly — clear titles, a thumbnail, and the few details that help them choose.
- It should show the right information per course. Not every course needs the same labels. The useful details — length, level, price, whatever matters for yours — should be yours to set.
- It has to work on a phone. Most browsing happens on mobile, so the grid needs to reflow cleanly to smaller screens.
The default grid handles the basics well — an image, a title, a button, a ribbon, and even a short description or duration if you fill those in. Where it gets frustrating is visual control: designing the card and the layout the way you would anything else in Divi.
What you can do to improve it yourself
Before we get to the easier route, let’s be fair — you can push the default grid a good way with a bit of CSS and one handy Divi trick. If you’re comfortable with that, here’s how.
First, the shortcode. The grid is generated by [ld_course_list] which takes parameters to control the output — num for how many courses show, and orderby / order to sort them:
[ld_course_list num="12" orderby="title" order="ASC"]
The Divi title trick. Here’s a genuinely useful one: if you paste that shortcode inside a Divi Text module, the course titles (which are H3 headings) pick up the Text module’s H3 styling options. So you can control the title font, size, colour, and spacing visually in the Builder — no CSS needed for the titles at all. Just drop the shortcode into a Text module and use its Design tab › Text › Heading H3 settings.
Styling the rest with CSS — the tidy Divi way. You don’t need a wrapper div or an ID. Because your shortcode is already inside a Divi Text module, you can put the CSS right in that module’s Advanced › Custom CSS box, and use Divi’s selector keyword — Divi automatically replaces selector with the precise selector for that exact module. So your styles stay scoped to this grid and nowhere else, with no manual IDs to manage.
Paste the shortcode in the Text module, then in Advanced › Custom CSS (the “Free Form” / main CSS box) add:
/* Tidy, even spacing between cards */
selector .ld-course-list-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
selector .ld_course_grid{
max-width:100%;
}
/* The card itself — equal height, soft border, rounded */
selector .ld_course_grid article.thumbnail.course {
display: flex;
flex-direction: column;
height: 100%;
border: 0px solid #1f2130;
border-radius: 6px;
box-shadow: 0 2px 18px 0 rgba(51, 51, 51, .23);
}
/* The image */
selector .ld_course_grid img {
border-radius:5px 5px 0 0;
}
/* The caption area (title + button) */
selector .ld_course_grid .thumbnail .caption {
display: flex;
flex-direction: column;
flex: 1;
padding: 26px;
}
/* The title in caption area */
selector .ld_course_grid .thumbnail .caption .entry-title{
margin-bottom: 16px !important;
}
/* The ribbon — shared shape for all three states */
selector .ld_course_grid .thumbnail.course .ribbon {
padding: 6px 26px;
border-radius: 4px;
border-bottom-left-radius:0;
font-weight: 600;
color: #fff;
}
/* The ribbon has three states, each with its own class —
style them separately so you don't flatten them into one colour:
.ribbon = the price (e.g. "250")
.ribbon.free = free courses
.ribbon.enrolled = courses the visitor is already enrolled in */
selector .ld_course_grid .thumbnail.course .ribbon:not(.free):not(.enrolled){
background: #c0392b; /* price */
}
selector .ld_course_grid .thumbnail.course .ribbon:not(.free):not(.enrolled)::before{
border-top-color:#c0392b;
border-right-color:#c0392b;
}
selector .ld_course_grid .thumbnail.course .ribbon.free {
background: #20ad96; /* free — green */
}
selector .ld_course_grid .thumbnail.course .ribbon.free::before{
border-top-color:#20ad96;
border-right-color:#20ad96;
}
selector .ld_course_grid .thumbnail.course .ribbon.enrolled {
background: #1f2130; /* enrolled — blue */
}
selector .ld_course_grid .thumbnail.course .ribbon.enrolled::before{
border-top-color:#1f2130;
border-right-color:#1f2130;
}
/* The button — push it to the bottom so every card lines up */
selector .ld_course_grid .ld_course_grid_button {
margin-top: auto !important;
}
selector .ld_course_grid .thumbnail.course .btn-primary {
padding:10px;
background-color:#20ad96;
color:#fff
}
/* Reflow to fewer columns on smaller screens */
@media (max-width: 980px) {
selector .ld-course-list-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
selector .ld-course-list-items { grid-template-columns: 1fr; }
}
Divi swaps selector for that module’s own wrapper when the page loads, so everything above only affects this grid — no wrapper div, no ID, nothing leaking into the rest of your site.
One honest caveat: LearnDash’s markup can differ between versions, so check your own grid to be safe — right-click a card › Inspect, confirm the class names match, and adjust if needed. And note what CSS can’t give you: real visual, in-Builder control. You’re still hand-writing styles to fight fixed markup rather than designing the card the way you design everything else in Divi — and the richer skin-and-card system stays locked in the block editor. Which is exactly where the next option comes in.
Your three options, honestly
So where does that leave you? There are now three genuine ways to handle a course grid in Divi, and the right one depends on what you need.
1. Style the built-in grid (the shortcode). The approach above — the LearnDash grid, improved with a little CSS and the Divi title trick. You keep the automatic status ribbons (price, “Free,” “Enrolled”) with no extra setup, but you’re styling around fixed markup, not designing freely.
2. Build your own with the Divi 5 Loop Builder. Divi 5’s Loop Builder lets you build a course grid completely from scratch — designing one card by hand and pulling each course’s image, title, categories, author, and even custom details like duration in dynamically. You get full visual control and can show things the default grid can’t. The trade-off: it’s static (no automatic enrollment-aware ribbons) and you build and maintain it yourself. We walk through the whole thing step by step in How to Build a LearnDash Course Grid with the Divi 5 Loop Builder.
3. Use a ready-made course grid module. The middle ground: a grid that’s already designed and assembled, where you just enter your data — and it keeps the automatically-styled ribbons for free and paid courses. That’s the option we’ll look at next.
Which is right? If you want the automatic ribbons with least effort, option 1. If you want total design freedom and don’t mind building it yourself, option 2. If you’d rather it came designed and done for you, with the ribbons kept — read on.
The fix: a course grid module built for Divi
That third option is exactly what the Divi eLearn for LearnDash theme gives you. It closes the gap with a proper Divi Builder module — “Divi LearnDash Course Grid” — that you drop onto the page like any other Divi module and style visually, right there in the Builder, while keeping the automatic free-and-paid ribbons the from-scratch route can’t reproduce.
That changes the whole experience:
- It’s native to Divi. The grid lives in the Builder alongside everything else you design, so it matches your site instead of standing out from it. No Gutenberg detour, no settling for the limited shortcode.
- You style it visually. Columns, spacing, fonts, colours — set the way you set everything else in Divi, with the module’s own settings panels.
- You control the details, and how they look, in Divi. The module gives you three fully customisable meta fields you set individually for each course, from the course’s own edit screen — duration and level on one, format and price on another. But the real difference from the default isn’t just which details show; it’s that you’re designing the card visually in the Builder rather than filling in back-end fields and styling around fixed markup. Leave a field blank and nothing shows. It’s your call, course by course.
The point isn’t just “a prettier grid.” It’s that you get control — a browsing page you design deliberately, that looks like it belongs to your site, on the page where visitors decide whether to go further.
Getting it right
A few things worth doing once you’ve got a grid you can actually control:
- Keep the cards consistent. Equal-looking cards, aligned details, and uniform thumbnails read as considered and trustworthy. Mismatched heights and stray fields read as unfinished.
- Show only what helps the decision. Use the meta fields for the details that genuinely help someone choose — not everything you could display. A clean card beats a cluttered one.
- Design it as a real page, not an afterthought. Give the grid a proper heading, a line of intro if it helps, and room to breathe. It’s a browsing experience, not just a list.
- Check it on mobile. Scroll it on your phone and make sure the cards reflow cleanly and stay tappable.
The takeaway
Your course grid is where people decide whether to explore your courses at all — and on LearnDash with Divi, the grid’s most powerful, visual tools live in the block editor, just out of reach of how you actually build.
A Divi-native course grid module solves that: a grid you design visually, that matches your site, with the details you control per course. It turns your most important browsing page from a generic afterthought into something that actually invites people in.
The Divi LearnDash Course Grid module is part of Divi eLearn for LearnDash — a complete course-platform child theme that builds your whole LearnDash site in Divi, from the course grid to the course pages, checkout, and account area. If you’d rather design every part of your course site visually instead of fighting defaults, that’s exactly what it’s built for.
Working on your individual course pages too? That’s a different page with its own default limitations — our free Powdi Course Page Builder for LearnDash and Divi plugin handles those. We’ve covered it in How to Design Your LearnDash Course Pages with Divi.
