Skip to main content

Build Custom Loops using Loop Builder in Divi 5

Learn how to build custom loops in Divi 5 using Loop Builder to design dynamic lists of posts, products, and more.

Updated this week

Loop Builder in Divi 5 lets you turn any element into a dynamic list of content. Instead of using a fixed "blog feed" module, you design one card (post, product, team member, etc.), then tell Divi to repeat it automatically for each item that matches your query.

You can loop through:

  • Posts and custom post types (blog posts, projects, products, etc.)

  • Terms (categories, tags, custom taxonomies)

  • Users (authors, team members)

  • Custom field data, including ACF fields and repeaters

This gives you a visual, no-code way to build custom blog feeds, WooCommerce grids, team directories, and more.

When it makes sense to use Loop Builder

Use Loop Builder when:

  • You want a custom blog feed layout instead of a fixed blog module design.

  • You need product grids or carousels that match your brand, instead of WooCommerce defaults.

  • You're building category or archive templates that should auto-update as content changes.

  • You have custom post types and custom fields (e.g., Books, Events, Team Members) and want them displayed in a structured way.

  • You want multiple different loops on the same page (featured posts at the top, regular posts below, related content, etc.).

Stick with simple modules (like the Blog module) when you just need a quick, standard feed and don't care about custom layout or filters.

Key Loop Builder concepts

Before you start, keep these pieces in mind:

  • Loop Container – the element you turn into a loop (Section, Row, Column, Group, or specific modules). Divi repeats this element for every item in the query.

  • Loop Item Template – the layout inside that container (image, title, meta, button, etc.). This is the design that gets repeated.

  • Loop Query – the rules that define which items show in the loop (post type, category, order, item count, meta query, etc.).

  • Dynamic Content – special "Loop" fields like Loop Featured Image, Loop Post Title, Loop Excerpt, Loop Product Price, etc. These pull the correct data into each repeated card.

  • Pagination Module – optional, used to split large loops into pages. You point it at the loop you created, so the navigation controls that specific loop.

Once you understand those five ideas, the rest is just layout and styling.

How to access Loop Builder in Divi 5

Divi 5 - Loop Builder

You enable Loop Builder from inside the Visual Builder:

  1. Open a page or template with the Divi 5 Visual Builder.

  2. Add or select the element you want to repeat (typically a Column, Group, or sometimes a module).

  3. Open that element's settings.

  4. In the Content tab, find the Loop option group.

  5. Enable the Loop Element option.

Once Loop is enabled, a set of Loop settings appears, where you configure the query (what to show and how many items).

Tip: give the loop container a clear Admin Label ("Blog Loop Column", "Product Loop Group") so it's easier to target later with pagination or interactions.

Step-by-step: build a simple blog post loop

This section walks you through a basic blog grid loop, similar to the examples on the Elegant Themes blog.

1. Design a single postcard

  1. In the Visual Builder, add a new Section.

  2. Add a Row.

  3. Inside the column, build your post "card":

  4. Style this card (colors, fonts, spacing, borders) until it looks the way you want.

You only need to design this once; the loop repeats it for every post.

2. Turn the card into a loop

  1. Select the Column that holds your card.

  2. Open its settings and go to the Content tab.

  3. Enable the Loop Element toggle in the Loop options group.

    Divi 5 - Enable Loop

  4. (Optional) Open the Row's settings and in the Design tab choose:

    Divi 5 - Warp Looped Elements

    • Layout Style:

      • Layout Wrapping: Wrap

  5. (Optional) Open the Column's settings and in the Design tab choose:

    Divi 5 - Resize Looped Elements

    • Sizing:

      • Column Class: 1/3

Now, Divi treats this column as a loop container.

3. Configure the loop query

In the loop settings for that column:

  1. Set Query Type to Post Types(default).

  2. Choose Post Type to Posts (your regular blog posts).

  3. Set Posts Per Page to how many cards you want visible at once (for example, 6 or 9).

  4. Set Order By to Publish Date(default) and Order to Descending(default) to show newest first.

  5. Leave Post Offset at 0 for now (used later to skip items for secondary loops).

  6. Optionally, limit by category/tag with Include Posts With Specific Term if this loop should show only certain topics.

Save the loop settings.

4. Connect modules to dynamic loop content

Now wire each module inside the loop to real data:

  1. Featured Image

    • Edit the Image module in the card.

    • Hover over the Image field and click the Dynamic Content icon.

    • Choose Loop Featured Image.

  2. Post Title

    • Edit the Heading module.

    • Use the Dynamic Content icon on the text field.

    • Choose Loop Post Title.

  3. Author / Meta

    • In a Text module, click the Dynamic Content icon.

    • Choose Loop Author, Loop Post Date, or similar meta fields, and optionally add static text before/after ("by", separators, etc.).

  4. Excerpt

    • In the excerpt Text module, use Dynamic Content and choose Loop Excerpt.

    • Set word count and "Read more" text if needed.

  5. Button / Card Link

    • In the Button module, set the link via Dynamic Content to Loop Link or Post URL.

    • Optionally, set the whole loop container to use Loop Link so clicking anywhere on the card opens the post by editing the Column settings, and in the Content Tab → Module link use the Dynamic Content Icon and choose Loop Link.

Anything inside that loop container that uses these Loop fields will now update automatically for each post.

5. Adding pagination to a loop

Pagination keeps loops fast and readable when you have many items.

To connect the Pagination module to your loop:

  1. Under your loop Column, add a new Row.

  2. Insert the Pagination module.

  3. In Pagination settings → Content tab → Target, choose the Column that contains the Loop.

  4. Customize the Previous/Next labels as needed ("Older Posts / Newer Posts", arrows, etc.).

⚠︎ Important notes:

  • The Pagination module must sit outside the loop container.

  • The loop query must have Posts Per Page set to a finite number (for example, 6); otherwise, pagination has nothing to paginate.

When you save and preview, clicking the pagination links changes only the loop items; the rest of the page stays the same.

Real-world Loop Builder use cases

Here are some concrete patterns pulled from Elegant Themes' Loop Builder tutorials and examples.

Custom blog feeds

  • Build a blog archive template using Loop Builder instead of a fixed Blog module.

  • Create different layouts: card grid, list view, or masonry layouts by combining Loop Builder with CSS Grid or Flexbox.

  • Use category filters in the query to create category-specific feeds (e.g., "News", "Tutorials", "Case Studies").

WooCommerce product grids and category pages

  • Replace the Woo Products module with Loop Builder so you control every detail of each product card.

  • Use Loop Builder plus CSS Grid for custom WooCommerce category pages that auto-update when products change.

  • Add sale badges, ratings, or meta fields with Dynamic Content and ACF fields.

Team directories and custom CPT grids

  • Create a "Team Member" custom post type with fields like job title, photo, and social links.

  • Use Loop Builder to display a responsive directory grid, powered by ACF and Grid/Flex.

  • Apply the same pattern for portfolios, events, locations, or any other custom content.

Advanced layouts with Flexbox and carousels

  • Combine Loop Builder with Flexbox for advanced blog layouts, magazine-style grids, and mixed card sizes.

  • Loop inside a Group Carousel to build product or post sliders that use full Loop data (image, title, price, etc.).

Tips to avoid confusion

A few habits that help keep Loop Builder manageable, especially when you're starting:

  • Loop only where it makes sense
    Use a single, clear loop container (often a column or group). Keep headings, section titles, and CTAs outside the loop so they don't repeat.

  • Use Admin Labels aggressively
    Label your loop containers and pagination clearly so you can target the correct loop, especially on templates with multiple loops.

  • Always use Dynamic Content inside loops
    If you leave static text or images inside the loop, that same content appears on every item. Use Loop-specific fields for anything that should change per item.

  • Control performance with query options
    Use Posts Per Page, Order By, Offset, and Meta Queries to show only what you need and to avoid loading unnecessary items.

Once you have your first loop working, you can reuse the same approach everywhere: design one card, enable Loop, set the query, hook up Dynamic Content, and optionally add pagination.

Did this answer your question?