Divi 5 Loop Builder: Ultimate Guide to Use it Perfectly

If you have ever tried creating a custom blog feed or product grid in Divi, you know the struggle. The older Blog Module of Divi 4 offered only fixed layouts: grid or full-width with limited styling options. Where simple elements reorder or display custom fields data wasn’t possible without applying custom CSS or relying on third-party plugins.

The Divi 5 finally solved this with a major step forward, introducing the new Loop Builder. It redefines how dynamic content works and is customized within the visual builder. 

You can now display dynamic content across posts, products, and custom post types with a custom layout. And even able to pull dynamic data from Advanced custom fields (ACF). 

With full support for Custom Post Types (CPT), WooCommerce products, user profiles, events, and more. The Loop Builder gives you complete design freedom to create beautiful, data-driven layouts.

Divi Blog Module vs Divi 5’s Loop Builder

Feature	Divi Blog Module	Divi 5 Loop Builder
Purpose	Display standard blog posts with preset layouts.	Display any dynamic content with full design freedom.
Design Flexibility	Fixed layout (grid or full width) with limited control over element order and structure.	Fully customizable layout using any Divi elements.
Supported Content	Default posts and simple custom post types.	Posts, WooCommerce products, custom post types, users, categories, and repeater fields.
Custom Fields	Not supported without external plugins or custom code.	Natively supports ACF and dynamic custom fields.
Query Options	Basic category, tags, and order filters.	Advanced filters, meta queries, post offsets and sorting controls.
Best For	Simple blog layout, basic news sites, company updates.	Dynamic grids, product showcase, and custom data layouts.

Introducing Divi 5 Loop Builder

In WordPress, a loop is the process that displays repeating content items such as posts, products, or categories from your database. Each item in the loop pulls data, such as the title, image, or excerpt, and displays according to your chosen query settings. 

For example, your main blog page or blog archive page is basically a loop that shows your latest post. And it’s one of the ways loops work in WordPress.

The Divi 5 Loop Builder uses the same concept and brings it into the visual builder. You can design your own loop layout from scratch using Divi elements.

You need to build a template for a single item using elements such as the post title, featured image, or custom data, and Divi automatically repeats it for all relevant items. And it’s not limited only to blogs; you can use it to display a wide range of content visually.

Using the Divi 5’s Loop Builder, you can: 

• Display custom blog feeds, product lists, and portfolio grids.
• Show events, courses, or WooCommerce Products data dynamically.
• Loop through authors, categories, or ACF repeater fields to create a dynamic section.

It’s the same WordPress loops you’ve been using for years. Now available inside your Divi visual builder with control over every part visually.

How Divi 5 Loop Builder Works

Before building your first loop, it’s essential to understand the key settings and elements of the Loop Builder and how they work together to create any loop. Let’s take a look at the Divi 5 Loop builder inside and out.

1. Query Type:

These settings instruct Divi on what type of content to display in the loop. Here you can choose from:

• Posts: If you choose posts as your query type, this setting defines which kind of posts you want to display. It can be anything, such as blog posts, WooCommerce Products, Projects, Pages, or any custom post type you have registered, like recipes or testimonials.

• Terms: If you choose ‘Terms’ as the query type, these settings allow you to select specific categories or tags you want to loop through. It can be tags, formats, project categories, project tags, or custom taxonomy terms.

• Users: Selecting users as a query type allows you to include user tools in the loop. For example, Authors, Contributors, Editors and administrators.

2. Configure Query Settings:

After you choose a query type, Divi will show related settings to help you decide what content should appear in the loop. You can include or exclude specific items, filter by terms or custom fields, and control how they are ordered or displayed.

For Posts:

Use this when looping through posts, products, or any custom post type.

• Post Type: Choose what type of content to display, such as Posts, Products, Projects, Media, or any custom post type like Testimonials or Recipes.
• Include / Excludes Terms: Filter posts by specific categories or tags, or exclude the ones you don’t want to show.
• Include / Exclude Specific Posts: Manually select specific posts or products to feature or hide.
• Add Meta Query: Filter posts based on custom fields by defining the Meta Key, Meta Value, Compare Condition, and Type. For example, you can show products where the “Price” field is greater than 50, or display posts marked as “Featured.”
• Order By: Control how items appear by sorting them based on publish date, last modified date, author, or comment count.
• Order: Reorder loop items by choosing Ascending or Descending. Ascending shows the oldest items first, while Descending shows the newest.
• Post Per Page: Set how many posts you want to display per page before pagination appears.
• Post Offset: Skip a certain number of posts from the start of your query results. This is useful when you want to display a featured post separately and start your loop from the next one.
• Ignore Sticky Posts: Prevent sticky posts from appearing at the top of your loop. When enabled, sticky posts will be treated like regular posts and sorted according to your ordering criteria.

For Terms:

When you select Terms as the Query Type, Divi lets you loop through taxonomy terms such as categories, tags, or any custom taxonomy from WordPress or installed plugins.

You can display terms from:

• Default WordPress: Categories, Tags, and Formats. 
• Divi and Custom Plugins: DF Page Categories, Project Categories, DF Media Categories.
• WooCommerce: Product Categories, Product Tags, Product Type, Brands, Product Visibility, and Shipping Classes.

These options enable the design of dynamic layouts that display groups of content, such as a grid of product categories or a list of blog tags with featured images and titles.

• Meta Query: Filter terms based on custom taxonomy metadata by defining the Meta Key, Meta Value, Compare Condition, and Type. For example, you can show only featured product categories or hide inactive ones.

Additional settings for term-based loops:

• Terms per Page: Control how many taxonomy items display before pagination appears.
• Term Offset: Skip a specific number of terms from the beginning of the loop, useful for separating featured and regular categories.

Use these options to create a WooCommerce category grid or a visual layout of blog categories that automatically updates when new ones are added.

For Users:

When you select Users as the Query Type, the Divi Loop Builder allows you to loop through registered user profiles and display details such as their name, avatar, role, and any custom data. This option is ideal for building author lists, team sections, or member directories that update automatically as new users are added.

Available settings:

• Users: Display users based on specific roles such as Administrator, Editor, Author, Contributor, Subscriber, or Customer.
• Meta Query: Filter users by custom metadata. Define the Meta Key, Meta Value, Comparison Condition, and Type to display only users that match specific criteria. For example, you can show only authors with published posts or customers with active memberships.
• Order By: Choose how users are sorted in the loop. Options include Display Name, Username, Registration Date, Email, Post Count, or ID.
• Order: Set the sorting direction. Use Descending to show the newest or highest values first, or Ascending to show the oldest or lowest first.
• User Per Page: Control the number of profiles displayed before pagination appears.
• User Offset: Skip a specific number of users from the beginning of the list, useful when separating featured members or administrators from the general listing.

Create a dynamic author grid, staff directory, or customer showcase that updates automatically as new users register on your website.

How to Create a Loop in Divi 5 (step-by-step)

Now you know how the Loop Builder works. Let’s create a practical example using it. Now we will be going to design a masonry-style blog layout using Divi 5’s Loop Builder and CSS Grid. It will help you understand how looping and grid controls work together to create flexible and dynamic post layouts.

Step 1: Configure The Layout

• Start by creating a new page from your WordPress dashboard and open it in the Visual Builder.
• Add a new section to the page and set its background color to #E7F6FA.

• Switch to the Design tab and expand the Layout menu. Set the Layout Style to Flex, add a 60px Horizontal and Vertical Gap, and keep the other settings at their defaults as shown in the screenshot below.

• Now add a single-column row inside the section, insert a Heading module, and set the heading text to Blog. Switch to the Design tab and set Heading Tag to H1, Heading Font to Times New Roman, and Font Size to 64px.

• Add another single-column row under the heading for showing blog posts.

Step 2: Enable and Configure CSS Grid

• Select the single-column row under the blog heading and switch to the Design tab.
• Expand the Layout menu and choose Grid as the Layout Style. Set Horizontal Gap and Vertical Gap to 60px, Column Widths to Equal Width Columns, Number of Columns to 3, and Row Heights to Auto Height Rows.

• Scroll down and set Grid Direction to Row, Grid Density to Dense, Justify Content to Start, and keep Align Items, Align Content, and Justify Items set to Stretch as the default.

Create Grid Offset Rules:

Now we are going to set up a couple of Grid Offset Rules. This lets us apply targeted adjustments to specific items within the grid, such as shifting positions or resizing automatically, without adding any custom CSS.

• Click + Add Grid Offset Rule to create a new rule.

Use the following settings for creating the first offset rule:

• Target Offset: Custom nth-child Rule
• Custom nth-child Rule: n
• Offset Rule: Row Span
• Offset Value: 5

This rule instructs Divi to target every item in the grid and make it span five rows vertically. In simple terms, it lets selected posts take up extra height within the grid, creating a staggered, masonry-style look where posts of different sizes fit together naturally.

Use the following settings for creating the second offset rule:

• Target Offset: Custom nth-child Rule
• Custom nth-child Rule: 2n+2
• Offset Rule: Row Span
• Offset Value: 4

The second rule targets every second item in the grid, starting from the second post, and makes it span four rows vertically. It introduces alternating heights among grid items, giving your layout a more dynamic flow.

Step 3: Configure the Loop Builder for Dynamic Blog Posts

Now our grid is ready. Let’s connect it to dynamic blog content using the Divi 5 Loop Builder. Follow these simple steps to do this:

• Select the row and go to the Content tab, then click the column settings (pencil icon) to open its options.

• Expand the Loop section below and toggle Loop Element On.

• Set Query Type to Post Type, and Post Type to Posts. This enables the Loop Builder to display blog posts inside your grid.

• Scroll to the Posts Per Page field and set it to 6. This defines how many posts will appear in your grid before pagination appears.

• Expand the Link section and click the Insert Dynamic Content icon beside the Column Link URL field.

• From the dropdown menu, select Loop Link.

• Keep all other settings as the default and click Apply to save changes.

Step 4: Design The Looped Item

It’s time to design each loop item. Follow these few steps to do this:

• Within the Column Settings, expand Background and choose white as the background color (#FFFFFF).

• Switch to the Design tab and set both Horizontal and Vertical Gap to 0 under Layout settings within the Flex style layout. And keep the res as the default.

• Now, within the same column settings, scroll down to locate Border and expand it.

• Set the Border Radius to 20px to create rounded corners. Choose a 1px border width and keep the other settings at their defaults.

• Now expand Box Shadow under the Border settings.

• Select the 2nd preset and set Horizontal Position to 2px, Vertical Position to 5px, Blur Strength to 8px, Spread Strength to 0px, keep the shadow color at #000000 with 18% opacity, and choose Outer Shadow to add visual depth.

Step 5: Display Blog Feature Images:

Now it’s time to show the blog featured images on these cards. Follow these steps:

• Click the blank “+ icon” from the first group item.

• Choose the Group module from the module list.

• The Group module is now added to every group item.

• Click any + icon inside any Group module and select the Image module.

• The Image module will be automatically inserted into every Group module.

• Hover over the image field, click the Insert Dynamic Content icon, select Loop Featured Image, and click Apply.

• With the image selected, switch to the Design tab, expand Sizing, and set Min Height to 150px.

Step 5: Display Blog Headings:

Now we are going to display the blog heading under the featured image. Follow these steps:

• Click the + icon under the Image module to add a new module.

• Select the Group module from the list.
• Within the Group module, click the + icon and choose Heading.
• With the Heading module selected, go to the Content tab, hover over the Heading field, and click Insert Dynamic Content.

• Choose Loop Post Title from the context menu.

Customize Blog Heading:

• Switch to the Design tab within the Heading Module selected.

• Heading Font: Times New Roman
• Heading Font Color: #151B54
• Heading Font Size: 20px

Step 5: Display Post Meta Data:

Now we are going to show post metadata such as the post excerpt, author information, and publication date on these cards. Follow these steps:

Display Post Published Date:

• Click the + icon after the blog heading.

• Choose the Text module from the list.

• A Text module will be added with placeholder text.

• With the Text module selected, go to the Content tab, hover beside the Body field, and click Insert Dynamic Content.

• Choose Loop Published Date from the context menu.

• The placeholder text is now replaced with the blog’s published date.

Customize Post Published Date:

• Go to the Design tab with the published date Text module selected.

• Expand Text and apply the following:

• Text Font: Abel
• Text Font Weight: Medium
• Text Font Color: #144DFF
• Text Font Size: 14px

Display Post Author:

Follow these steps to display the post author:

• Click the + icon above the published date text element.

• Choose the Text Module from the available module list.

• With the Text module selected, go to the Content tab, hover beside the Body field, and click Insert Dynamic Content.

• Choose Loop Author from the menu.

• The post author now appears before the published date.

Customize Post Author:

Now we will customize the author appearance following these steps:

• Switch to the Design tab with the author Text module selected.

• Expand the text settings and apply the following changes:

• Text Font: Abel
• Text Font Weight: Semi Bold
• Text Font Style: Uppercase
• Text Font Color: #144DFF
• Text Font Size: 15px
  

Display Post Excerpt:

Now we are going to display the post excerpt after the published date. Follow these steps:

• Click the + icon below the published date.

• Select the Text module from the list.

• With the Text module selected, go to the Content tab, hover beside the Body field, and click Insert Dynamic Content.

• Click the icon and select Loop Excerpt from the menu.

• Set Number of Words to 20 and apply the changes.

• The post excerpt now displays with a 20-word limit.

Step 5: Display Read More Button:

Follow these steps to add a read more button after every post excerpt.

• Click the + icon below the post excerpt.

• Select the Button module.

• The Button module is now added after every post excerpt.

Customize the Read More Button:

• Click any button and go to the Content tab.

• Change the Button Text to Read More.
• Expand Link, hover over the Button Link URL field, and click Insert Dynamic Content.

• Click the icon and select “Loop Link” from the context menu.

• Select Apply to save the changes.

• Now every Read More button is connected to the post URL.

• Click the Button Link Target dropdown below and select In A New Tab.

• Now, whenever someone clicks the Read More button, your blog post will open in a new tab.
• With the button selected, go to Design → Button → Use Custom Styles For Button, and toggle it on.

• Adjust the Button Background, Border, Text, and Icon settings to match your brand. We have chosen:

• Button Background Color: #5656f7
• Opacity: 24%
• Button Border Radius: 20px (top, bottom, left, right)
• Button Font: Arial
• Button Font Weight: Regular
• Button Font Color: Black
• Button Text Size: 15Px
• And place a blue button icon on the left.

• Expand Alignment and set Button Alignment to Middle.

Step 5: Customize the Overall Blog Loop

Now we are going to customize the overall design of this blog loop to make it more appealing. You can do your own by following these steps:

• Click the Row settings icon and go to the Design tab.

• Expand Layout and set the Horizontal and Vertical Gap to 20px.

• It now reduces the gap among the post cards.

Tips and Best Practices for Using Loop Builder Efficiently

Using Divi 5’s Loop Builder becomes easier once you understand a few best practices that help improve performance, consistency, and workflow efficiency.

• Start with a plan: Before building, decide what content type you want to display (posts, products, users, etc.) and how the layout should look. This saves time during design.
• Use global styles: Apply global presets for text, buttons, and spacing to ensure your loop cards remain consistent across the site.
• Optimize queries: Avoid loading too many posts at once. Limit your query results and use pagination for better performance.
• Keep designs lightweight: Use only necessary modules within the loop to prevent slow rendering in the builder.
• Combine with CSS Grid or Flexbox: Structure your loop container with Grid or Flex layouts for more control over spacing and alignment.
• Test responsiveness: Always check how your loop looks on mobile and tablet views. Adjust column gaps, padding, and image sizes as needed.
• Leverage Dynamic Content: Utilize custom fields (ACF or native WordPress fields) to make your loops truly dynamic, eliminating the need for duplicate layouts.

These minor adjustments make a big difference when managing large or complex content displays across multiple pages.

FAQs About Divi 5 Loop Builder

Question: Can I use the Divi 5 Loop Builder for WooCommerce Products?
Answer: Yes, you can display and style product listings using the Loop Builder within the Divi visual builder without any extra plugins.

Question: Is the Loop Builder available in Divi 4?
Answer: No. Loop Builder is the newest feature introduced in Divi 5. And it’s not available in the oldest version of Divi 4.

Question: Can I display custom post types and custom fields as loop elements?
Answer: Yes, you can display custom fields as the loop element using Divi 5’s Loop Builder. It supports ACF, Meta Box, and similar plugins.

Question: Can I use pagination with loops?
Answer: Not really. Divi’s Blog Module is still great for quickly listing posts, while the loop builder is ideal for creating fully custom layouts within many other query types, besides blogs.

Final Thought

Divi 5 Loop Builder gives you complete creative freedom to design how content appears on your website dynamically. It fills in the missing pieces of Divi, allowing you to create any dynamic content layout within the Divi Visual Builder.

If you have been waiting to build fully custom, dynamic content layouts inside Divi, this is the feature you have been looking for. 
Please don’t hesitate to leave a comment if we have missed anything. We always appreciate hearing from you and are eager to improve. Share this article with your friends who want to create a dynamic content layout using Divi.