The Loop Builder is the newest feature. It offers a new way to build custom blog feeds, product grids, or any other dynamic content, all within the Divi 5 Visual Builder. This powerful new addition allows creators to build looping content with flexibility, transforming how we display posts, products, and other custom post types.
In this post, we’ll explore the Loop Builder’s features and provide a step-by-step guide on how to use it. Let’s get started!
What Is Divi 5’s Loop Builder?
The Loop Builder in Divi 5 is a new feature that allows Divi users to create and customize dynamic, looping designs directly within the Visual Builder. Whether you’re showcasing blog posts, WooCommerce products, or other custom post types, Divi 5’s Loop Builder lets you build content loops using any Divi element without being confined to static, predefined modules.
Subscribe To Our Youtube Channel
Divi 5’s Loop Builder’s advantage lies in its freedom. You can design intricate layouts with custom queries and style them with Divi’s full suite of design tools. This means you can create everything from sleek blog feeds to dynamic product grids with complete control, all within a no-code, drag-and-drop interface
Key Features Of Loop Builder
Divi 5’s Loop Builder has powerful features that make it a standout tool for creating dynamic, customized content loops. Here’s a closer look at what makes it so versatile and user-friendly:
1. Flexible Loop Creation
With Loop Builder, you aren’t limited to predefined modules. You can toggle the loop option on any Divi element, transforming it into a dynamic content loop. Loops allow you to build custom templates using the Visual Builder, giving you the freedom to create layouts that match your vision, from minimalist blog grids to portfolios.
2. Custom Query Options
Loop Builder puts you in control of what content to display. You can customize Loops by post type, category, number of posts, or advanced meta queries. It fully supports custom post types (CPTs), such as Woo products, events, or content filtered by author. This means you can create loops for virtually any content type on your site, without writing code or using third-party plugins.
3. Dynamic Content Integration
Seamlessly pull dynamic content into your loop templates, including post titles, featured images, excerpts, or custom fields. Loop Builder offers native support for ACF, including repeater fields, allowing you to display data directly within your loops. This integration ensures your content is both dynamic and highly customizable.
4. Design Freedom
Style your looped content with the Visual Builder to create unique, eye-catching layouts like grids, carousels, or sliders. Every aspect is fully customizable, ensuring your loops align with your brand.
How The Loop Builder Works
Divi 5’s Loop Builder simplifies creating dynamic content loops, making it accessible for beginners and advanced users. Before building a loop, let’s review all the settings within Divi 5’s Loop Builder.
Understanding Divi 5’s Loop Builder Settings
The Loop Builder in Divi 5 lets you create dynamic sections on your website by fetching and displaying various types of content based on your specific criteria. Let’s go over each setting so you have a better understanding of what they do and how to use them.
Query Type
This is the foundational choice for your Loop. It tells Divi 5 what content you want to pull into your layout. You can choose between posts, terms, or users. Posts are standard content like blog posts, projects, or any custom post type you have on your site. Terms refer to categories, tags, or custom taxonomies. Finally, users allow you to display information about users on your site, such as authors or contributors.
Post Type
If choosing posts for your query type, this setting refines which specific kind of post you want to display. This can be blog posts, products, projects, pages, or any custom post type you have registered, like recipes or testimonials.
Terms
When choosing Terms as the query type, this setting lets you pick which specific categories or tags you want to loop. For example, these can be tags, formats, project categories, project tags, or a custom taxonomy term.
Users
This setting allows you to filter which user roles you want to include when looping users. Examples include authors, contributors, editors, and administrators.
Include Posts With Specific Term
Divi 5 allows you to loop posts through specific categories and tags, narrowing your post selection to only include those assigned to certain categories or tags.
Exclude Posts With Specific Terms
This setting does the opposite of the setting above. It removes posts from your Loop assigned to specific categories or tabs. It’s useful for when you want to show all of your blog posts, except for those in a certain category.
Include Specific Posts
If you are looping posts, you can include only specific posts, which is excellent for featuring blog posts or products. For example, you can create a featured post section on your home or landing page and use Divi’s Loop Builder to display only the posts or products you want to feature.
Exclude Specific Posts
This allows you to remove specific individual posts from your Loop. It’s a great way to prevent certain posts from appearing in a general blog post feed, like if they are outdated or part of a special promotion displayed elsewhere on your site.
Order By
This determines the sequence in which your looped items will appear. You can sort by publish date, none, ID, title, post name, last modified date, random, author, or comment count.
Posts Per Page
This setting controls how many items are displayed within the Loop on a single page of your content. This is a good way to showcase a certain number of posts or products on a landing, portfolio, or archive page.
Post Offset
This setting allows you to skip several items from the beginning of your query result. Post offset is incredibly useful for creating unique layouts. For example, you might have one large featured post at the top (using a separate module), and then a loop that displays the rest of your posts, starting from the second one.
Meta Query
Meta Query is the setting where the Loop Builder gets powerful for custom content. It allows you to filter your content based on custom fields you’ve added to your posts, terms, or users.
Meta Key
A meta key is the unique identifier for custom data associated with your content. This data is stored in the post_meta table in your WordPress database.
Meta Value
The meta value is the specific value you are looking for within the meta key field.
Compare
This setting defines how the meta value should be compared against the actual value stored in the database for the meta key. Options include equals, not equals, greater than, greater than or equal, less than, less than or equal, contains, does not contain, in list, not in list, field exists, and field does not exist.
Type
The type tells Divi how to interpret the meta value during the comparison. It’s crucial for accurate comparisons, especially with numbers or dates. You can choose from character, numeric, binary, date, datetime, decimal, signed, or unsigned.
By combining these settings, you can create highly sophisticated and dynamic content displays on your Divi sites, pulling in exactly the content you want, in the order you wish, and filtered precisely the way you want.
Creating A Loop In Divi 5 (Blog Post Grid)
Add New 3-Column Row
Start by adding a three-column row to a page in the Visual Builder.
Style the first column by adding a 15px border radius, 25px padding on all sides, and a 1px solid #000000 border.
Enable Loop On Column
Next, enable the Loop Element toggle in the first column’s content settings.
Row Layout Wrapping
Next, we will need to enable wrapping on our row so that the elements will drop to the next line once space runs out. Navigate to the row’s design tab, expand the Layout dropdown menu, and select Wrap under Layout Wrapping.
You can adjust the horizontal gap between loop elements under Layout > Horizontal Gap.
Add Loop Content
Once these settings are in place, we can add modules to our Loop. Click into the first column to add an Image Module. You’ll notice that each column will automatically add an image placeholder.
Click the Dynamic Content icon in the Image module’s settings. Next, select Loop Featured Image from the available options.
Choose the Thumbnail Size from the dropdown menu and click Apply.
Add a Heading Module underneath the image module in the first column. Click the Dynamic Content icon and choose Loop Post Title. Style the Heading as you’d like.
Next, add a Text Module into the first column of the Loop. Click the Dynamic Content icon and select Loop Author.
Finally, we’ll add another Text Module for the post excerpt. Once added, click the dynamic content icon and select Loop Excerpt.
When the dialog box appears, you can set any before and after text, the loop position, and the number of words, and read more text.
Using Loop Custom Fields
To display custom fields in your Loop, you can use Divi 5’s integration with custom post types and fields, including those created with Advanced Custom Fields (ACF). For example, we created a custom post type for Books using ACF so we can display their information using the Loop Builder.
In the Visual Builder, select post type as the query type and Books as the post type.
Divi 5’s Loop Builder makes it easy to tap into custom fields, enhancing the flexibility of your dynamic content. When using ACF, you can access Loop Custom Fields by selecting the Dynamic Content Icon in any compatible module.
One of the best features of Divi 5’s ACF integration is how fields are labeled for convenience. When selecting a custom field in the Dynamic Content menu, Divi displays the ACF field’s label (as defined in the ACF field group) rather than just the meta key. This makes identifying and selecting the correct field intuitive, especially when managing multiple custom fields.
For example, if you have an ACF field named Genre for a custom post type for Books, you can pull this data into a Text module to display the genre dynamically within your Loop.
Divi 5 Supports ACF Repeater Fields
Divi 5 allows you to display complex, repeating data sets within your loops. First, ensure that an ACF Repeater field is set up in ACF.
Add a module like the Image module to your loop column. Select Loop Custom Field in the dynamic content settings, then choose the repeater field. Divi will display the repeater’s subfields, letting you select specific data, such as the image subfield, to create a dynamic gallery within your Loop. For example, you could create a portfolio showcase where each image in the Loop displays a series of images from its repeater field, styled as a grid.
User And Terms Loops
Divi 5’s Loop Builder can also be used to loop users and terms. For a user loop, you can create a team member showcase. To accomplish this, set the Query Type to Users, filter by role, and add modules like an Image module for the user’s avatar and a Text module for their name.
For a Terms loop, you can build a project category showcase. This is a great way to create a category page to display different projects and their categories. Simply set the Query Type to terms, select a taxonomy, and include specific terms.
Whether you want to loop posts, projects, categories, or authors, Loop Builder can handle diverse content types beyond posts, offering endless creative possibilities.
Benefits Of Using Divi 5’s Loop Builder
Divi 5’s Loop Builder isn’t just a feature. It’s a transformative tool that makes it easy to create dynamic layouts. Here are the key benefits that make it a must-have for Divi users:
- Flexibility: Loop Builder offers creative freedom, allowing you to loop any content type using any Divi element, from rows to sliders. Unlike modules that lock you into predefined layouts, Loop Builder gives you full design control, enabling unique layouts without sacrificing creativity.
- Efficiency: Boost your workflow with reusable loop templates built directly in the Visual Builder. Create a single template, customize its query and styling, and apply it across multiple pages or post types.
- Native Integration: Loop Builder is built into Divi 5, offering a seamless, native solution for complex content displays.
- Enhanced CPT Support: Loop Builder fully supports Woo, ACF, and custom post types, making it ideal for complex websites.
Build Dynamic Websites With Divi 5’s Loop Builder
Loop Builder in Divi 5 empowers Divi users to create flexible, dynamic content loops for any post type or taxonomy, from blog posts and Woo products to custom post types. It can transform any Divi element into a customizable loop, seamlessly integrate with custom post type plugins like ACF, and give users full design control within the Visual Builder. Loop Builder redefines how dynamic content is displayed.
We encourage you to dive into the Loop Builder by downloading Divi 5 and discover how it can elevate how you build websites with Divi!
Leave A Reply