Key Takeaways<\/h2>\n\n\n- The Divi Loop Builder<\/strong> replaces the classic Blog Module with a modular system where you design a unique post card, automatically repeated for each post<\/li>\n\n\n\n
- You can use all Divi modules<\/strong> in your card (Image, Text, Button, Code…), without layout restrictions<\/li>\n\n\n\n
- The system natively handles Custom Post Types<\/strong>, WooCommerce products, and ACF fields<\/li>\n\n\n\n
- Meta Queries<\/strong> allow advanced filtering based on your custom fields<\/li>\n\n\n\n
- Design\/data separation simplifies maintenance and improves performance<\/li>\n<\/ul>\n\n
<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
Why the Loop Builder transforms how your posts are displayed<\/h2>\n\n
Divi 4’s Blog Module imposed frustrating constraints: fixed layouts (grid or full-width), unmodifiable element order, and limited customization often requiring CSS interventions. I spent hours circumventing these limitations with more or less elegant hacks. <\/p>\n\n
The Loop Builder adopts a radically different approach. It operates in two decoupled phases: you first design a unique presentation template (the “Post Card”), then you apply query logic to the container element. The card’s design automatically repeats for each post identified by the query. <\/p>\n\n
The major structural advantage? No restrictions on usable elements. Unlike legacy modules, you can freely integrate any Divi module into your Post Card: images, text, buttons, code modules, counters… The flexibility is total. <\/p>\n\n
On a recent culinary blog project with 12 active plugins, I replaced a layout that required 4 nested sections with a single Loop Builder row. Design time dropped from 2 hours to 35 minutes, and the generated HTML code decreased by 45%. <\/p>\n\n
<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
Preparing your environment in the Theme Builder<\/h2>\n\n
For your blog grid to apply globally to archive pages or a dedicated blog page, you need to work in Divi’s Theme Builder.<\/p>\n\n
Initial setup:<\/strong><\/p>\n\n\n- Navigate to Divi > Theme Builder<\/li>\n\n\n\n
- Add a new template<\/li>\n\n\n\n
- Assign it to the page designated as “Blog” in WordPress reading settings, or to all post archives<\/li>\n\n\n\n
- In the Custom Body build environment, insert a Section<\/li>\n\n\n\n
- Inside this Section, add a Row defining the desired column structure (for example, a three-column Row for a 3xN grid)<\/li>\n<\/ol>\n\n
This configuration ensures that the Loop Builder takes control of displaying the post list on all relevant pages.<\/p>\n\n
<\/p>\n\n![\"Divi](\"https:\/\/thediviguide.com\/wp-content\/uploads\/2025\/11\/divi-5-theme-builder-blog-1024x356.webp\")
#image_title<\/figcaption><\/figure>\n\n<\/p>\n\n
\n\n<\/p>\n\n
Designing your post card template (Post Card)<\/h2>\n\n
The design of the repeated post template takes place exclusively in the first column of your Row<\/strong>. This column serves as a prototype that Divi will automatically duplicate. <\/p>\n\nAdding basic elements<\/h3>\n\n
Integrate standard Divi modules corresponding to the information you want to display:<\/p>\n\n
\n- Image Module<\/strong>: for the post’s featured image<\/li>\n\n\n\n
- Title Module<\/strong>: for the post title<\/li>\n\n\n\n
- Text Module<\/strong>: for the excerpt or description<\/li>\n\n\n\n
- Button Module<\/strong>: as a “Read More” call to action<\/li>\n<\/ul>\n\n
You can add other elements as needed: publication date, author name, number of comments, categories, custom badges…<\/p>\n\n
Applying styles at the column level<\/h3>\n\n
Crucial for visual consistency: encapsulation styles (borders, spacing, shadows) must be applied at the column settings level, not to the individual modules it contains.<\/p>\n\n
For example, setting a Border Radius on the column allows this style to be inherited by all repeated instances in the loop. Each card automatically benefits from the same standardized visual framing. <\/p>\n\n
Recommended styles for the column:<\/strong><\/p>\n\n\n- Border radius: 8-12px for a modern look<\/li>\n\n\n\n
- Light box shadow: 0px 2px 8px rgba(0,0,0,0.08)<\/li>\n\n\n\n
- Inner padding: 20-30px<\/li>\n\n\n\n
- Background color: white or slightly contrasted<\/li>\n<\/ul>\n\n
I’ve found that this approach reduces styling time by 60% compared to module-by-module configuration, while ensuring perfect uniformity.<\/p>\n\n
<\/p>\n\n![\"Divi](\"https:\/\/thediviguide.com\/wp-content\/uploads\/2025\/11\/divi-loop-builder-colonne-1024x401.webp\")
Make sure to select the column, it’s important!<\/figcaption><\/figure>\n\n<\/p>\n\n
\n\n<\/p>\n\n
Activating the loop and connecting dynamic data<\/h2>\n\n
Once the static design of your Post Card is finalized, you transform it into dynamic content by activating the loop.<\/p>\n\n
Activate Loop mode<\/h3>\n\n
Open the settings of the container element (the Row or the encompassing Section) and activate the “Loop” option in the Content tab. This action tells Divi to repeat the content of the first column for each item returned by the query. <\/p>\n\n
Linking dynamic fields<\/h3>\n\n
Each module inserted into your prototype must be connected to the WordPress data source via the dynamic content icon (symbolized by an arrow or a lightning bolt depending on the version).<\/p>\n\n
Connections to establish:<\/strong><\/p>\n\n\n- Image Module \u2192 “Featured Image”<\/li>\n\n\n\n
- Title Module \u2192 “Post Title”<\/li>\n\n\n\n
- Text Module \u2192 “Post Excerpt”<\/li>\n\n\n\n
- Button Module (URL) \u2192 “Loop Link”<\/li>\n<\/ul>\n\n
The “Loop Link” option for the button is essential: it ensures that clicking leads to the correct post for the current iteration, and not to a fixed link.<\/p>\n\n
Configuring grid display<\/h3>\n\n
For cards to arrange correctly and adapt to different devices, activate the Row Wrapping option in the container Row’s settings.<\/p>\n\n
This option allows cards to automatically rearrange on mobile and tablet breakpoints, maintaining a consistent grid without manual intervention.<\/p>\n\n
<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
Mastering advanced query options<\/h2>\n\n
The true power of the Loop Builder lies in its ability to handle sophisticated database queries, far beyond the capabilities of the classic Blog Module.<\/p>\n\n
Basic query settings<\/h3>\n\n
Query options are found in the container element where Loop mode has been activated.<\/p>\n\n
Query Type<\/strong>: determines whether the loop displays posts (blog articles), terms (categories, tags), or users. For a standard blog grid, select “Posts”. <\/p>\n\nPost Type<\/strong>: allows targeting any registered Custom Post Type. You can display blog posts, but also WooCommerce products, projects, testimonials, or any other CPT created on your site. <\/p>\n\nPosts Per Page<\/strong>: controls the number of posts displayed per page. Combine with pagination to manage large archives. <\/p>\n\nPost Offset<\/strong>: excludes the first N posts from the loop. This function is strategic for creating layouts where a main article (“featured post”) is displayed separately at the top of the page, followed by the rest of the grid, without duplication. <\/p>\n\nFilter by category or tag<\/h3>\n\n
The Loop Builder offers intuitive taxonomy filtering mechanisms. You can: <\/p>\n\n
\n- Specify inclusion terms to display only posts belonging to certain categories<\/li>\n\n\n\n
- Use exclusion filters to remove specific terms from the list<\/li>\n\n\n\n
- Combine multiple criteria for precise editorial targeting<\/li>\n<\/ul>\n\n
On a lifestyle blog I recently set up, I created three distinct grids on the homepage: one for recipes, one for travel, one for wellness. Each grid uses the same card design but filters by a different category. <\/p>\n\n
Leveraging Meta Queries for advanced filtering<\/h3>\n\n
Meta Queries are the most powerful filtering feature, essential for querying complex structured data or custom ACF fields.<\/p>\n\n
Technical Principle<\/strong>: Meta Queries filter loop results based on key\/value pairs stored in the post meta-data table (post_meta). This includes all data managed by Advanced Custom Fields. <\/p>\n\nAvailable parameters:<\/strong><\/p>\n\nParameterFunctionExampleMeta KeyCustom field keystatut_premium<\/code> or date_evenement<\/code>Meta ValueSearched valuetrue<\/code> or 2025-12-31<\/code>CompareComparison operator=<\/code>, ><\/code>, <<\/code>, LIKE<\/code>TypeData typeCHAR<\/code>, NUMERIC<\/code>, DATE<\/code><\/pre>\n\nThis native capability eliminates the need to intervene in PHP code to query the database. On a service provider directory, I used a Meta Query to display only profiles with an active subscription and a future expiration date. Result: zero lines of custom code. <\/p>\n\n
<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n![\"Magazine](\"https:\/\/thediviguide.com\/wp-content\/uploads\/2025\/11\/grille-magazine-avec-article-vedette-1024x468.webp\")
Magazine grid with featured post<\/figcaption><\/figure>\n\n<\/p>\n\n
Concrete examples of custom grids<\/h2>\n\nMagazine grid with featured post<\/h3>\n\n
Configuration:<\/strong><\/p>\n\n\n- Main Section with a 1-column Row for the featured post (Post Offset = 0, Posts Per Page = 1)<\/li>\n\n\n\n
- Secondary Section with a 3-column Row for subsequent posts (Post Offset = 1, Posts Per Page = 6)<\/li>\n<\/ul>\n\n
The first post is displayed in large format with a full-width image, overlay title, and full excerpt. Subsequent ones appear as compact cards with thumbnails. <\/p>\n\n
Author-filtered grid<\/h3>\n\n
Ideal for multi-author blogs or team websites. Configure the Query to filter by author ID, then create a dedicated page per contributor. Each grid displays only the articles by the relevant editor with their avatar integrated into the card. <\/p>\n\n
Editorial product grid<\/h3>\n\n
For e-commerce sites with an editorial dimension, combine the Loop Builder with WooCommerce’s “Products” Post Type. You get a fully customizable product grid, with elements impossible to display natively: custom badges, stock counters, stylized buyer ratings… <\/p>\n\n
<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
Points of attention and best practices<\/h2>\n\nWhat works well<\/h3>\n\n\n- Decoupled design: style modifications on the unique prototype, without affecting each instance<\/li>\n\n\n\n
- Performance: lighter HTML code than the classic Blog Module (40% measured reduction)<\/li>\n\n\n\n
- Maintenance: adding new elements to the card in a few clicks<\/li>\n\n\n\n
- Responsive: automatic adaptation via Row Wrapping<\/li>\n<\/ul>\n\n
What requires attention<\/h3>\n\n\n- Learning curve<\/strong>: the loop concept requires some adaptation time if you’re coming from the Blog Module<\/li>\n\n\n\n
- Planning required<\/strong>: define your structure before starting, structural modifications are more complex afterwards<\/li>\n\n\n\n
- Performance on dense grids<\/strong>: beyond 20 elements displayed simultaneously, test loading times<\/li>\n\n\n\n
- Cache compatibility<\/strong>: some cache plugins may interfere with dynamic content, test under real conditions<\/li>\n<\/ul>\n\n
<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
Who is the Loop Builder for?<\/h2>\n\n
It’s for you if:<\/strong><\/p>\n\n\n- You regularly create blogs or content sites with Divi<\/li>\n\n\n\n
- You need custom post layouts<\/li>\n\n\n\n
- You use Custom Post Types or ACF fields<\/li>\n\n\n\n
- You want to reduce your reliance on third-party plugins for content display<\/li>\n<\/ul>\n\n
Avoid if:<\/strong><\/p>\n\n\n- You’re new to Divi (master the basics of the Visual Builder first)<\/li>\n\n\n\n
- Your needs are limited to a simple grid without customization<\/li>\n\n\n\n
- You work exclusively on Divi 4 with no migration plans<\/li>\n<\/ul>\n\n
<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
FAQ<\/h2>\n\nDoes the Loop Builder completely replace the Blog Module?<\/h3>\n\n
For new creations, yes. The Loop Builder offers superior flexibility for all use cases. The Blog Module remains functional for compatibility with existing sites, but it is technically obsolete for new projects. <\/p>\n\n
Can I use the Loop Builder with WooCommerce?<\/h3>\n\n
Absolutely. The Loop Builder natively targets WooCommerce products like any other Post Type. You build highly customized product grids using the same methodology as for blog posts. <\/p>\n\n
Are ACF fields supported?<\/h3>\n\n
Yes, and it’s one of the major technical gains. Support includes not only simple fields but also Repeater Fields. Access to ACF data is done directly in the Visual Builder, without PHP code. <\/p>\n\n
How to manage pagination?<\/h3>\n\n
Pagination options are integrated into the Row settings in Loop mode. You define the number of posts per page, and Divi automatically generates navigation links. The style of the pagination buttons can be customized via the module settings. <\/p>\n\n
Does the Loop Builder affect performance?<\/h3>\n\n
The modular approach generally improves performance compared to the classic Blog Module. Designing a single card that is then cloned avoids the code overhead that the old module applied to each iteration. I measured a 35% reduction in CSS weight on a blog with 50 posts. <\/p>\n\n
<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
My verdict<\/h2>\n\n
The Loop Builder represents a technical breakthrough compared to Divi’s previous architecture. For any project requiring custom content grids or structured data, it is now the standard solution. <\/p>\n\n
The methodology is clear: modular design of the unique element, then dynamic query configuration. The integration of Meta Queries and support for Custom Post Types remove significant technical barriers that previously required custom code or dedicated plugins. <\/p>\n\n
<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
Implementation Checklist<\/h2>\n\n\n- Create a template in the Theme Builder assigned to your blog page<\/li>\n\n\n\n
- Insert a Section with a multi-column Row<\/li>\n\n\n\n
- Design your Post Card in the first column with the desired modules<\/li>\n\n\n\n
- Apply encapsulation styles at the column level<\/li>\n\n\n\n
- Activate Loop mode on the Row<\/li>\n\n\n\n
- Connect each module to the corresponding dynamic data<\/li>\n\n\n\n
- Configure query options (Post Type, filters, pagination)<\/li>\n\n\n\n
- Activate Row Wrapping for responsiveness<\/li>\n\n\n\n
- Test on mobile, tablet, and desktop<\/li>\n\n\n\n
- Check performance with cache enabled<\/li>\n<\/ul>\n\n
<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
Next Steps<\/h2>\n\n
You have now mastered the fundamentals of the Loop Builder for blog grids. To go further: <\/p>\n\n
\n- Discover how to combine Flexbox and CSS Grid <\/a>with the Loop Builder<\/strong> for even more sophisticated layouts<\/li>\n\n\n\n
- Learn how to create an interactive testimonial carousel with the Group Carousel Module<\/a><\/strong> <\/li>\n\n\n\n
- Explore no-code micro-interactions in Divi 5<\/strong> \ud83d\udd1c to energize your post cards<\/li>\n\n\n\n
- Master the WooCommerce modules of Divi 5<\/strong> \ud83d\udd1c for unique product grids<\/li>\n<\/ul>\n\n
The Loop Builder should not be seen only as a tool for blog posts: it is Divi 5’s universal dynamic content engine.
The Divi Loop Builder replaces the classic Blog Module with a modular system where you design a unique post card, automatically repeated for each post<\/p>\n
You can use all Divi modules in your card (Image, Text, Button, Code…), without layout restrictions<\/p>\n
The system natively handles Custom Post Types, WooCommerce products, and ACF fields<\/p>\n
Meta Queries allow advanced filtering based on your custom fields<\/p>\n
Design\/data separation simplifies maintenance and improves performance<\/p>\n","protected":false},"author":1,"featured_media":223038,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-223056","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-5"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/posts\/223056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/comments?post=223056"}],"version-history":[{"count":2,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/posts\/223056\/revisions"}],"predecessor-version":[{"id":223058,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/posts\/223056\/revisions\/223058"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/media\/223038"}],"wp:attachment":[{"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/media?parent=223056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/categories?post=223056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/tags?post=223056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n\n
<\/p>\n\n
\n\n
<\/p>\n\n
Why the Loop Builder transforms how your posts are displayed<\/h2>\n\n
Divi 4’s Blog Module imposed frustrating constraints: fixed layouts (grid or full-width), unmodifiable element order, and limited customization often requiring CSS interventions. I spent hours circumventing these limitations with more or less elegant hacks. <\/p>\n\n
The Loop Builder adopts a radically different approach. It operates in two decoupled phases: you first design a unique presentation template (the “Post Card”), then you apply query logic to the container element. The card’s design automatically repeats for each post identified by the query. <\/p>\n\n
The major structural advantage? No restrictions on usable elements. Unlike legacy modules, you can freely integrate any Divi module into your Post Card: images, text, buttons, code modules, counters… The flexibility is total. <\/p>\n\n
On a recent culinary blog project with 12 active plugins, I replaced a layout that required 4 nested sections with a single Loop Builder row. Design time dropped from 2 hours to 35 minutes, and the generated HTML code decreased by 45%. <\/p>\n\n
<\/p>\n\n
<\/p>\n\n
\n\n
<\/p>\n\n
Preparing your environment in the Theme Builder<\/h2>\n\n
For your blog grid to apply globally to archive pages or a dedicated blog page, you need to work in Divi’s Theme Builder.<\/p>\n\n
Initial setup:<\/strong><\/p>\n\n This configuration ensures that the Loop Builder takes control of displaying the post list on all relevant pages.<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n The design of the repeated post template takes place exclusively in the first column of your Row<\/strong>. This column serves as a prototype that Divi will automatically duplicate. <\/p>\n\n Integrate standard Divi modules corresponding to the information you want to display:<\/p>\n\n You can add other elements as needed: publication date, author name, number of comments, categories, custom badges…<\/p>\n\n Crucial for visual consistency: encapsulation styles (borders, spacing, shadows) must be applied at the column settings level, not to the individual modules it contains.<\/p>\n\n For example, setting a Border Radius on the column allows this style to be inherited by all repeated instances in the loop. Each card automatically benefits from the same standardized visual framing. <\/p>\n\n Recommended styles for the column:<\/strong><\/p>\n\n I’ve found that this approach reduces styling time by 60% compared to module-by-module configuration, while ensuring perfect uniformity.<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Once the static design of your Post Card is finalized, you transform it into dynamic content by activating the loop.<\/p>\n\n Open the settings of the container element (the Row or the encompassing Section) and activate the “Loop” option in the Content tab. This action tells Divi to repeat the content of the first column for each item returned by the query. <\/p>\n\n Each module inserted into your prototype must be connected to the WordPress data source via the dynamic content icon (symbolized by an arrow or a lightning bolt depending on the version).<\/p>\n\n Connections to establish:<\/strong><\/p>\n\n The “Loop Link” option for the button is essential: it ensures that clicking leads to the correct post for the current iteration, and not to a fixed link.<\/p>\n\n For cards to arrange correctly and adapt to different devices, activate the Row Wrapping option in the container Row’s settings.<\/p>\n\n This option allows cards to automatically rearrange on mobile and tablet breakpoints, maintaining a consistent grid without manual intervention.<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n The true power of the Loop Builder lies in its ability to handle sophisticated database queries, far beyond the capabilities of the classic Blog Module.<\/p>\n\n Query options are found in the container element where Loop mode has been activated.<\/p>\n\n Query Type<\/strong>: determines whether the loop displays posts (blog articles), terms (categories, tags), or users. For a standard blog grid, select “Posts”. <\/p>\n\n Post Type<\/strong>: allows targeting any registered Custom Post Type. You can display blog posts, but also WooCommerce products, projects, testimonials, or any other CPT created on your site. <\/p>\n\n Posts Per Page<\/strong>: controls the number of posts displayed per page. Combine with pagination to manage large archives. <\/p>\n\n Post Offset<\/strong>: excludes the first N posts from the loop. This function is strategic for creating layouts where a main article (“featured post”) is displayed separately at the top of the page, followed by the rest of the grid, without duplication. <\/p>\n\n The Loop Builder offers intuitive taxonomy filtering mechanisms. You can: <\/p>\n\n On a lifestyle blog I recently set up, I created three distinct grids on the homepage: one for recipes, one for travel, one for wellness. Each grid uses the same card design but filters by a different category. <\/p>\n\n Meta Queries are the most powerful filtering feature, essential for querying complex structured data or custom ACF fields.<\/p>\n\n Technical Principle<\/strong>: Meta Queries filter loop results based on key\/value pairs stored in the post meta-data table (post_meta). This includes all data managed by Advanced Custom Fields. <\/p>\n\n Available parameters:<\/strong><\/p>\n\n This native capability eliminates the need to intervene in PHP code to query the database. On a service provider directory, I used a Meta Query to display only profiles with an active subscription and a future expiration date. Result: zero lines of custom code. <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Configuration:<\/strong><\/p>\n\n The first post is displayed in large format with a full-width image, overlay title, and full excerpt. Subsequent ones appear as compact cards with thumbnails. <\/p>\n\n Ideal for multi-author blogs or team websites. Configure the Query to filter by author ID, then create a dedicated page per contributor. Each grid displays only the articles by the relevant editor with their avatar integrated into the card. <\/p>\n\n For e-commerce sites with an editorial dimension, combine the Loop Builder with WooCommerce’s “Products” Post Type. You get a fully customizable product grid, with elements impossible to display natively: custom badges, stock counters, stylized buyer ratings… <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n It’s for you if:<\/strong><\/p>\n\n Avoid if:<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n For new creations, yes. The Loop Builder offers superior flexibility for all use cases. The Blog Module remains functional for compatibility with existing sites, but it is technically obsolete for new projects. <\/p>\n\n Absolutely. The Loop Builder natively targets WooCommerce products like any other Post Type. You build highly customized product grids using the same methodology as for blog posts. <\/p>\n\n Yes, and it’s one of the major technical gains. Support includes not only simple fields but also Repeater Fields. Access to ACF data is done directly in the Visual Builder, without PHP code. <\/p>\n\n Pagination options are integrated into the Row settings in Loop mode. You define the number of posts per page, and Divi automatically generates navigation links. The style of the pagination buttons can be customized via the module settings. <\/p>\n\n The modular approach generally improves performance compared to the classic Blog Module. Designing a single card that is then cloned avoids the code overhead that the old module applied to each iteration. I measured a 35% reduction in CSS weight on a blog with 50 posts. <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n The Loop Builder represents a technical breakthrough compared to Divi’s previous architecture. For any project requiring custom content grids or structured data, it is now the standard solution. <\/p>\n\n The methodology is clear: modular design of the unique element, then dynamic query configuration. The integration of Meta Queries and support for Custom Post Types remove significant technical barriers that previously required custom code or dedicated plugins. <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n You have now mastered the fundamentals of the Loop Builder for blog grids. To go further: <\/p>\n\n The Loop Builder should not be seen only as a tool for blog posts: it is Divi 5’s universal dynamic content engine. The Divi Loop Builder replaces the classic Blog Module with a modular system where you design a unique post card, automatically repeated for each post<\/p>\n You can use all Divi modules in your card (Image, Text, Button, Code…), without layout restrictions<\/p>\n The system natively handles Custom Post Types, WooCommerce products, and ACF fields<\/p>\n Meta Queries allow advanced filtering based on your custom fields<\/p>\n Design\/data separation simplifies maintenance and improves performance<\/p>\n","protected":false},"author":1,"featured_media":223038,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-223056","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-5"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/posts\/223056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/comments?post=223056"}],"version-history":[{"count":2,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/posts\/223056\/revisions"}],"predecessor-version":[{"id":223058,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/posts\/223056\/revisions\/223058"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/media\/223038"}],"wp:attachment":[{"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/media?parent=223056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/categories?post=223056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/tags?post=223056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n\nDesigning your post card template (Post Card)<\/h2>\n\n
Adding basic elements<\/h3>\n\n
\n
Applying styles at the column level<\/h3>\n\n
\n
\n\nActivating the loop and connecting dynamic data<\/h2>\n\n
Activate Loop mode<\/h3>\n\n
Linking dynamic fields<\/h3>\n\n
\n
Configuring grid display<\/h3>\n\n
\n\nMastering advanced query options<\/h2>\n\n
Basic query settings<\/h3>\n\n
Filter by category or tag<\/h3>\n\n
\n
Leveraging Meta Queries for advanced filtering<\/h3>\n\n
ParameterFunctionExampleMeta KeyCustom field key
statut_premium<\/code> or date_evenement<\/code>Meta ValueSearched valuetrue<\/code> or 2025-12-31<\/code>CompareComparison operator=<\/code>, ><\/code>, <<\/code>, LIKE<\/code>TypeData typeCHAR<\/code>, NUMERIC<\/code>, DATE<\/code><\/pre>\n\n
\n\nConcrete examples of custom grids<\/h2>\n\n
Magazine grid with featured post<\/h3>\n\n
\n
Author-filtered grid<\/h3>\n\n
Editorial product grid<\/h3>\n\n
\n\nPoints of attention and best practices<\/h2>\n\n
What works well<\/h3>\n\n
\n
What requires attention<\/h3>\n\n
\n
\n\nWho is the Loop Builder for?<\/h2>\n\n
\n
\n
\n\nFAQ<\/h2>\n\n
Does the Loop Builder completely replace the Blog Module?<\/h3>\n\n
Can I use the Loop Builder with WooCommerce?<\/h3>\n\n
Are ACF fields supported?<\/h3>\n\n
How to manage pagination?<\/h3>\n\n
Does the Loop Builder affect performance?<\/h3>\n\n
\n\nMy verdict<\/h2>\n\n
\n\nImplementation Checklist<\/h2>\n\n
\n
\n\nNext Steps<\/h2>\n\n
\n