In This Article
1. Overview
2. What the Loop Builder actually does
3. What you’ll need
4. Setting up the custom fields (for details like duration and level)
5. Building the grid, step by step
5.1. Section and row
5.2. Turn the first column into the loop
5.3. Add the card elements (each set to dynamic content)
5.4. Check mobile
6. The honest trade-off
7. Which approach is right for you
8. The takeaway
2. What the Loop Builder actually does
3. What you’ll need
4. Setting up the custom fields (for details like duration and level)
5. Building the grid, step by step
5.1. Section and row
5.2. Turn the first column into the loop
5.3. Add the card elements (each set to dynamic content)
5.4. Check mobile
6. The honest trade-off
7. Which approach is right for you
8. The takeaway
In an earlier article, we looked at the LearnDash course grid problem in Divi — how the built-in grid keeps you boxed into shortcodes, with the good, styling-rich version locked away in the block editor where Divi users can’t comfortably reach it.
Divi 5 changes that story. With the new Loop Builder, you can build a course grid completely from scratch — designed entirely in the Builder, pulling each course’s data in dynamically, styled with the same tools you use everywhere else on your site. No shortcode to fight, no Gutenberg detour.
Here’s exactly how to build one — and, honestly, where this approach stops and a different one takes over.
What the Loop Builder actually does
Instead of dropping in a fixed grid and styling around it, the Loop Builder lets you design one course card by hand, then repeats it automatically for every course in your query. You build the card with normal Divi modules — an image, a heading, some text, a button — and tell each one to pull its content dynamically from the current course. Divi does the repeating.
That means total design control: the card looks exactly how you build it, matches the rest of your site, and lives natively in the Builder.
What you’ll need
- Divi 5 (the Loop Builder is a Divi 5 feature).
- LearnDash, with a few published courses. In the Loop Builder, your courses show up as the “courses” post type.
- For extra details like duration or level, a custom field per course (more on that below — it’s simple, and no plugin is required).
Setting up the custom fields (for details like duration and level)
The default course grid can’t show things like course length or level. The Loop Builder can — you just store them as custom fields first. Here’s the one-time setup:
- In WP Admin, go to Courses and open any course.
- Make sure Custom Fields is switched on: open Screen Options (top right) and tick Custom Fields.
- Scroll down to the Custom Fields panel and click Add Custom Field. Enter a name and value — for example, name duration, value 120 hours. Add another for level.
- Once a field exists, every other course lets you pick it from the Name dropdown and just enter that course’s value.
The same logic works for any detail you want to show — duration, level, format, anything.
Building the grid, step by step
1. Section and row
- Add a new Section. Give it left and right padding of 20px.
- Add a Row, starting with 3 equal columns (we’ll style one, switch on the loop, then drop down to a single column).
- Row settings — Layout: Flex, horizontal gap 3.5, vertical gap 40, direction Row, align items Stretch, wrapping Wrap, align content Stretch; Width: 100%.
2. Turn the first column into the loop
- Open the first column and enable the Loop element.
- Query type: Post Type. Post type: courses.
- Column design — vertical gap 10px, sizing Shrink to fit, column class 1/3, border radius 6px.
- Box shadow — Preset 1, horizontal 0, vertical 3, blur 16, spread 0, colour #000 at 20%, position Outer shadow.
- Now delete the other two columns — the loop handles the repetition, so you only design one card.
3. Add the card elements (each set to dynamic content)
Inside that column, add and wire up each module:
Image module — set the image to dynamic content Loop Featured Image.
Text module (categories) — dynamic content Loop Post Terms, taxonomy Course Categories. Design: font weight Semi Bold, size 12px, set your colour, turn on uppercase (text capitalization); margin top 10, bottom 0, left/right 20px.
Heading module (title) — dynamic content Loop Post Title. Design: text size 22px, line height 1.3em; margin left/right 20px.
Group module (the custom fields — duration & level) — add a Group, then two Text modules inside it.
- Group settings: Layout: Flex, horizontal gap 20px, vertical gap 20px, direction Row, align items Center; padding left/right 30px.
- Each Text module: dynamic content Loop Post Custom Field. Pick your field (duration, level) from the dropdown — or, if it isn’t listed, choose Enter custom meta key and paste the field name into the Meta Key field.
Group module (the author) — add another Group with an Image and a Text module.
- Group settings: Layout: Flex, horizontal gap 10px, vertical gap 20px, direction Row, align items Center; padding left/right 20px.
- Image module: dynamic content Loop Author Profile Picture. Design: max width 40px, border radius 50px (round avatar).
- Text module: dynamic content Loop Author.
Button module — set the button text to “See Course.” Under Link → Button Link URL, set dynamic content Loop Link. Design: alignment Center, button width 100%; margin bottom, left and right 20px each.
That’s the whole card. Divi repeats it for every course, each pulling its own image, title, categories, details, author, and link.
4. Check mobile
It’ll display fine on mobile out of the box, but scroll through it on a phone and adjust spacing or sizes to taste.
The honest trade-off
This is a genuinely capable way to build a course grid — and it’s worth being clear about what you gain and what you don’t, so you pick the right tool.
What you gain: complete design control. The card is yours — layout, spacing, typography, the details you show, all built visually in Divi and matching the rest of your site. You can show things the default grid never could, like duration and level.
What you give up: it’s static. You’re entering values into fields, so there’s no automatic, enrollment-aware behaviour. There’s no ribbon that switches on its own — showing “Free,” or changing to “Enrolled” and “Continue Study” once someone’s logged in and owns the course — the way LearnDash’s built-in grid does. Whatever you put in a field shows the same to everyone. And you build and maintain the grid yourself.
So the Loop Builder is the right choice when you want a custom, designed browsing grid and you’re happy managing the details yourself. If you need the automatic, state-aware ribbons — or you’d simply rather not build the whole thing from scratch — that’s where the other two options come in.
Which approach is right for you
Three honest options, depending on what you need:
- The built-in LearnDash grid (shortcode). Least design control, but you get the automatic status ribbons (price / Free / Enrolled) with no setup. Fine if the default look works for you. (This is what the first article covers.)
- The Divi 5 Loop Builder (this article). Full design control, any details you want, built visually — but static, and you assemble and maintain it yourself.
- A ready-made course grid module. The middle ground done for you: 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 the loop grid can’t reproduce. It’s part of the Divi eLearn for LearnDash theme.
The takeaway
Divi 5’s Loop Builder is a real step forward — for the first time, you can design a LearnDash course grid entirely in the Builder, exactly the way you want it, with details the default grid can’t show. If you like building things yourself and want full control, it’s genuinely worth learning.
And if you’d rather not build and maintain every piece by hand, the Divi eLearn for LearnDash theme gives you the whole course platform — course grid, course pages, checkout, and account area — already designed and supported, so you can focus on your courses instead of the plumbing.
