The Loop Builder is one of Divi 5's most powerful dynamic content tools. Instead of relying on the fixed structure of the Blog module, you design a single post item yourself and let Divi repeat it for every matching post.

This guide is for designers and site builders who want a dynamic post feed that still feels fully custom. By the end, you will have a responsive blog page with featured images, post titles, excerpts, metadata, Read More buttons, and pagination.

What the Loop Builder Does

The Loop is the WordPress mechanism that retrieves and displays content such as posts, pages, products, categories, authors, or custom post types.

In earlier Divi workflows, the Blog module was the fastest way to output a post feed, and it still works well for simple layouts. But it comes with a fixed structure, so it is not ideal when you want complete control over the repeated item design.

The Loop Builder gives you that control visually. You design one item, configure the query, and Divi repeats that design for each matching item. Its main advantages:

Custom layout control: Build the repeated item with Divi elements instead of one predefined module layout.
Dynamic content fields: Pull in featured images, post titles, terms, authors, publish dates, excerpts, and links.
Flexible query options: Display posts, products, terms, users, menus, custom post types, and supported custom field data.
Design system consistency: Reuse the same Design Variables and Presets from earlier in the course so every loop item matches the rest of the site.
Theme Builder support: Use loops inside templates for archives, search results, product archives, and other dynamic views.

Prepare Your Site

Before building, create at least 6 to 8 published blog posts. Each should include a featured image, a title, an excerpt, and any categories or tags you want to display.

Having at least 6 posts gives the Loop enough content to display and lets you test pagination later.

If you do not have content yet, a test-content plugin such as FakerPress can generate placeholder posts.

Next, create a new page named Blog, publish it, and open it in the Visual Builder. Add a Heading module and any introductory content you want above the loop so the page has a clear title before the dynamic post list begins.

Build A Blog Layout With The Loop Builder

The workflow has four main parts.

Build one post-card layout.
Turn that layout into a Loop element.
Connect each module to dynamic content.
Add pagination and responsive adjustments.

Create the Structure

After the Section containing the Heading module (your page title), add a new Section by clicking the Blue + icon.
Add a 1 Column Row.
Label the Column - Column Looped.
Add the Image module - this module will display the post's Featured Image. Label it Featured Image.
Add the Group module. Label it Right Column.
Inside the Group module, add
1. A Text module - this module will display the post's category. Label it Post Category.
2. A Heading module - this module will display the post title. Label it Post Title.
3. A new Group module and label it Post Meta Information containing:
  - Two Text modules - these will display the author and publish date.
  - Label each Text module: Post Author, respectively Post Publish Date.
4. A Text module - this module will display the post excerpt. Label it Post Publish Date.
5. A Button module - this will link to each individual post inside the Loop. Label it Read More Button

💡Pro Tip: Give a meaningful name for each module. For example: Featured Image, Right Column, Category, Post Title, etc.

Note: Moving forward, we are going to reference the Labels set above.

Create the Two-Column Layout and Apply All Styles

Open the Row settings and in the Desing tab → Layout → Layout Wrapping, enable the Wrap option.
Open the column that contains all the modules and from
- The Desing tab → Layout → Layout:
  - Set both the Horizontal and Vertical Gap to 0px.
  - Set the Layout Direction to Row.
  - Set the Layout Wrapping to Wrap
- The Desing tab → Border, apply the Rounded - Regular option group preset.
Open the Image module's settings (Featured Image) and go to the Desing tab → Sizing → Column Class and choose 2/5.
Open the settings of the first Group module (Right Column) and:
- In the Content tab → Background → Background color, apply the Background - Light Gray variable.
- In the Desing tab → Layout, for both Horizontal and Vertical Gap, apply the Spacing - XSmall variable.
- In the Desing tab → Sizing → Column Class, choose 3/5
- In the Desing tab → Spacing → Padding, apply the Spacing - Medium variable
Open the first Text module (Post Category) settings and:
- In the Content tab → Background → Background Color, apply the White variable.
- In the Desing tab → Text → Text Size, apply the Body Small variable.
- In the Desing tab → Spacing → Padding, apply the Spacing - XSmall to all four fields (top, bottom, left, right).
Open the Heading module (Post Title) settings and apply the Heading 3 element Preset.
Open the inner Group module (Post Meta Information) settings and:
- In the Desing tab → Layout → Horizontal Gap, apply the Spacing - XSmall variable.
- In the Desing tab → Layout → Vertical Gap, apply the 0px value.
- In the Desing tab → Layout Direction, choose Row
- In the Desing tab → Align Items, choose Center.
- In the Desing tab → Sizing → Alignment, choose Start.
For each Text module inside the Group module (Post Meta information):
- Stack two element presets: Dark Text and Small element presets
- In the Design tab → Text → Paragraph tab → Text Color, apply the Text – Dark Transparent variable
- In the Design tab → Text → Link tab → Link Text Color, apply the Text – Dark Transparent variable
For the Text module below the Group module (Post Meta information), labeled Post Excerpt:
- Apply the Dark Text element preset.
For the Button module, apply the Text - Primary element preset.

Enable the loop

At this point, the Column has a "2 column layout", and this will be the repeated item in the loop.

Open the Column's settings
From the Content tab → Loop, enable the Loop Element option.
Configure the Query:
1. Order: Ascending
2. Posts per Page: 6

Apply Dynamic Content Fields

With the Loop enabled, connect each module to the correct dynamic content field:

Image module: In the Content tab, hover over the Image field to reveal the Insert Dynamic Content icon, then choose Loop Featured Image.
First Text module: Assign Loop Post Terms to the Body field.
Heading module: Assign Loop Post Title to the Heading field.
First Text module in the Group: Apply Loop Author, and enter by in the Before field so the output reads like a byline.
Second Text module in the Group: Apply Loop Publish Date, and enter M, Y in the Custom Date Format field to show the abbreviated month and year.
Text module below the Group: Apply Loop Excerpt to the Body field.
Button module: Set the Button Text to Read More and assign Loop Link to the Button Link URL field.

Add Loop Pagination

Select the Row that contains the Looped Column.
Go to the Content Tab → Elements.
Click on the + Add Element button to insert a new Column.
Label this new column Column - Loop Pagination.
Add the Pagination module and open its settings.
In the Pagination module's Content tab → Target, select the Loop column (labeled Column - Looped).

Make the Loop Layout Responsive

The Flexbox-based layout gives the page a strong responsive starting point, but it is worth reviewing across Tablet and Phone breakpoints.

Switch to the Tablet breakpoint. We can notice that the previous 2-column layout doesn't fit quite well on smaller screensize.
With the Tablet breakpoint selected:
- Open the Column's settings (labeled Column - Looped) and from the Desing tab → Layout → Layout Direction, choose Column.
- Open the Feature Image settings, and from the Desing tab → Sizing → Column Class, choose 100% (Fullwidth).
- Open the Group module that contains the post title, excerpt, button, etc. (labeled Right Column) and from the Desing tab → Sizing → Column Class, choose 100% (Fullwidth).

Other things to keep in mind

Check typography, spacing, image size, button placement,
Check how the two columns stack on smaller screens.
Click the ellipsis menu to open the Breakpoints modal, where you can enable or disable Divi's available breakpoints. For more on managing these, see Divi 5 Customizable Breakpoints.
Cycle through each active breakpoint and look for spacing, alignment, and readability issues.

For targeted changes on any compatible setting, use the Responsive Editor.

Use loops in the Theme Builder

The Loop Builder also works inside the Theme Builder.

Instead of rebuilding the same layout for every archive, you create a template once and let it pull the correct content for the page being viewed.

This is useful for category, tag, and author archives, search results, product archives, and custom post type archives.

You can enable the Loop Builder on a Row, Column, Group, or supported module inside a template, just as you did on the Blog page.

Important note: When building archive templates, set the Query Type to Posts for Current Page so the Loop displays the correct content for the archive context.

You can use Flexbox or CSS Grid to control the layout, for example, Grid for a card-based archive and Flexbox for stacked or horizontal lists. For more on the template workflow, see Building Templates for Your Website with Theme Builder in Divi 5.

Best practices

Start with Design Variables and Presets. Style the repeated item first so every item stays consistent. If you plan to reuse the layout, save it to the Divi Library.
Test responsiveness early. Dynamic content varies from post to post, so test with real titles, excerpts, categories, and images on Tablet and Phone.
Keep accessibility in mind. Use a clear heading hierarchy for post titles, give featured images meaningful alt text in WordPress, and confirm links and buttons are keyboard-accessible.
Build for scalability. The same techniques power portfolios, product grids, team directories, event listings, menus, and custom post type archives.

For a more compact reference on this workflow, see How to Build a Custom Blog Feed using Loop Builder.