Introducing Loop Builder For Divi 5
Today, we introduce Loop Builder Divi 5, which allows you to construct looping post-based and term-based content using any Divi element.
Divi’s loop builder is unique in its freedom; you can loop anything without being restricted to a static loop module or container. Build your looping element, then customize your query using various convenient options and meta queries.
It supports custom post types, including WooCommerce, custom fields created with ACF, and even ACF repeater fields.
It’s an incredible feature!
Check out the following video to see the new feature in action. 👇
Loop Anything
First things first: What is a loop builder? Simply put, it’s a tool that lets you display a loop of content from your website’s database (like posts, products, categories, and authors) and customize the design of each item in the loop.
This allows you to create post-based content, such as custom blog feeds, product lists, event calendars, course lists, category pages, and everything else!
- First, build a template for the looped items using Divi elements and design settings.
- Next, customize the query that controls the content in the loop (number of posts, post type, category, etc.).
- Finally, plug in dynamic content from the loop into your template (post title, featured image, excerpt, etc.).
Before I get into the details, let me give you examples of what you can create using Divi’s new loop builder.
Example #1: Custom Blog Feed
Look at the beautiful blog feed in the video below. You will be familiar with a blog post loop because it’s core to WordPress and something featured by the Divi blog module, but this example isn’t a blog module; it’s a custom loop.
I constructed my blog template using Divi elements and design settings. Next, I turned on looping for the column that contains my content elements and chose to loop through posts. The column gets repeated, with each instance representing a post in the loop.
Finally, I plugged in dynamic content from the loop, such as the post tile and featured image, so that each item in the loop displays its unique content. You can do this for any post type to create any type of post-based content.
Example #2: Featured WooCommerce Products
In this example, I created a loop of featured WooCommerce products for my homepage. The template was constructed using modules and groups within a column looped within a row.
I customized the query to show specific products I wanted to feature.
Example #3: Events Calendar
I created a loop of upcoming events from the Events Calendar plugin in this example. Divi’s loop builder gives you complete freedom to design your looping element, so you can get creative with the design of your loops, especially with Divi 5’s flexbox layout system.
You can also tap into any custom field (post meta) for any post type. In this case, I could use the event price and date fields.
Example #4: LMS Course Slider
You can even loop module sub-items like a slide within a slider.
The looping slide in the video below displays featured courses from Tutor LMS.
Divi has had the concept of post-based modules, like the Post Slider and Blog modules, but with dynamic content and Divi’s new loop builder, any element can be turned into a dynamic loop.
Example #5: WooCommerce Category Page
You can also loop through terms and users.
In this example, I created a top-level product page that loops through all WooCommerce product categories.
Each item in the loop is a category rather than a post. The product category title and featured image are pulled dynamically from the terms meta.
Example #6: Blog Authors
In the example video below, I made a page featuring all our blog’s authors.
It loops through all users with the author role, and displays their name, avatar, and bio.
Exploring Query Loop Options
Let’s look at the Loop Builder’s query options that control which posts appear in a loop. You can choose which post type to loop through, filter posts by categories and tags, filter specific posts, or build custom meta queries to target specific content. You can also control post ordering and offset.
- Query Type – Choose what you would like to loop, whether posts, terms, or users.
- Post Type – If you are looping posts, you can choose which post type to loop, such as blog posts, WooCommerce products, Divi projects, etc.
- Terms – If you are looping terms, you can choose which term to loop, such as categories and tags.
- Users – If you are looping users, you can choose which role of users to loop, such as authors or contributors.
- Include Posts With Specific Terms – If you are looping posts, you can choose to loop through only posts from specific categories and tags.
- Exclude Posts With Specific Terms – You can also exclude posts from specific categories and tags from your loop.
- Include Specific Posts – If you are looping posts, you can include only specific posts in your loop, which is excellent for featuring blog posts or products.
- Exclude Specific Posts – You can also exclude specific posts from your loop.
- Order By – Order your looped items by ascending or descending.
- Posts Per Page – Choose how many looped items should appear on each page.
- Post Offset – Display only every n items. This allows you to create multiple loops through the same query, each with a unique set of posts and design.
- Meta Query – Build custom queries to filter your loop using any post meta key.
- Meta Key – The meta key in the post_meta table.
- Meta Value – The value of the item with the specific meta key.
- Compare – Once you are querying a specific meta key, you can choose how to compare the value to affect the query (is equal to, is greater than, etc).
- Type – The type of value being compared, such as number, date, time, etc.
Custom Field & Post Type Support
Divi’s loop builder supports custom fields in two ways. Firstly, you can use custom meta queries to display specific content in your loop based on the posts’ data in the post_meta table, which includes all custom field data. Secondly, you can display data from the wp_postmeta table, such as custom field data, as content within your loop template.
Support For Advanced Custom Fields (ACF)
Divi’s loop builder supports custom fields created using Advanced Custom Fields (ACF). When selecting a custom field, you’ll find all ACF fields at the top, which are labeled with their associated field names.
Support For ACF Repeater Fields
Divi’s loop builder also supports ACF repeater fields. If you used ACF to create a query loop, you can select it from the Query Type menu, and everything will fall into place.
Try Divi 5 Today
Loop Builder for Divi 5 is available today, and it’s one of many features coming to Divi this year.
You can follow along as we progress through the final release of Divi 5 and beyond, with updates every two weeks. Depending on your priorities, you can use Divi 5 now to build new websites or wait until we add more features, whatever works best for you.
As outlined in Divi 5’s original multi-phase release schedule, the Divi 5 Public Alpha is like “Divi 5 Lite.” It’s missing a few features and may not be suitable for existing websites, but it’s ready to be used on new websites if you prefer the experience to Divi 4.
We want you to try it, and if you love it, use it; when everyone loves it, we’ll make it official.
Have You Tried Flexbox?
In case you missed it, we recently released the all-new flexbox-based layout system for Divi 5.
This is no minor update. It reinvents Divi, allowing you to build any layout structure, including responsive layout breakdown, custom module ordering, easy vertical alignment and element positioning, and much more. No stone was left unturned, no option was forgotten—we did it all, and it’s best in class. There’s a link in the video description to learn more.
Watch this video for all the details. 👇
More Divi 5 Updates Are On The Way
2025 is the year of Divi 5. The tedious work is behind us. We built the super-fast foundation, and now it’s time for Divi to make its comeback.
If you’re here for the Divi comeback, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.
Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁
The post Introducing Loop Builder For Divi 5 appeared first on Elegant Themes Blog.
The Tech Zone
Comments
Post a Comment