If you’ve spent any amount of time building websites with WordPress and/or WooCommerce, you know that it can be time-consuming to display your content the way you actually want. With the combination of Divi 5‘s Loop Builder and Theme Builder, those frustrations are a thing of the past. These features enable you to create flexible Loops for posts, products, events, or any custom post type, all utilizing the Divi elements you already know and love.
In this post, we’ll dive into how these tools work together to unlock infinite customization options. Let’s dive in!
Understanding The Loop Builder
Divi 5’s Loop Builder gives you ultimate creative freedom, letting you harness the full potential of your site’s database without touching a line of code. At its core, it enables you to query and loop through any content, such as blog posts, products, user profiles, or even custom post types, and display it dynamically using any Divi element.
You can pull post titles, featured images, or custom fields like event dates or product prices into a sleek CSS grid, slider, or any style you can think of. The Loop Builder makes it happen, transforming static layouts into unique showcases of your content.
Unmatched Flexibility
What sets the Loop Builder apart is its flexibility. You’re not stuck with pre-made blog modules or standard WooCommerce archive templates. You can turn virtually any Divi container into a Loop, building layouts that align with your site’s design. For example, you can create a slider where each slide pulls a different product’s image and price, all driven by your site’s data.
Filter, Sort, And Loop
With the Loop Builder, you can fine-tune exactly what content shows up. For example, if you want to display only featured products or events after a certain date, you can. You can also sort posts by date, title, or a custom field, and add pagination to keep things tidy. The Loop Builder handles dynamic content effortlessly.
Third-Party Plugin Support
The Loop Builder supports WooCommerce, enabling you to create dynamic shop pages, and integrates seamlessly with Advanced Custom Fields (ACF) for retrieving custom data. It also works with plugins like Events Calendar, making it a go-to for specialized sites. The Loop Builder is more than just a feature. It’s a tool for building dynamic, brand-aligned content displays that scale with your site.
Combining The Loop Builder With Theme Builder
You already know that Divi’s Theme Builder is perfect for building global templates, such as headers, footers, posts, and archives. By dropping the Loop Builder into your Theme Builder templates, you can turn plain archive pages into dynamic, custom showcases.
The Theme Builder sets the stage, and the Loop Builder brings content to life. We’ll walk through the steps to create a blog archive page using Divi 5’s Loop Builder and Theme Builder. By the end, you’ll have a better understanding of how they work together to create dynamic layouts.
Create A New Template
Combining the Loop Builder and Theme Builder is a breeze. To get started, navigate to Divi > Theme Builder.
Click the + Add New Template button to create a new template.
Next, click Build New Template.
When the Template Settings modal appears, scroll to locate the Archive Pages option. Tick the All Category Pages checkbox and click Create Template to continue.
Click Add Custom Body.
Create The Loop Section
When the Theme Builder loads, add a new section with a single-column row.
In the row’s Content tab, click to edit the single Column. Expand the Loop menu and toggle Loop Element on.
The Query Type should be Post Type (set as default).
Leave all settings at their defaults, except Posts Per Page. Set it to display 15 posts.
In the Design tab, expand the Layout menu. Enter 20px into the Vertical Gap field.
Next, we need to adjust some settings in the Row. Head to the Design tab of the row. Expand the Layout menu and swap the Layout Style to Grid. Add 20px Horizontal and Vertical Gap and change the Number of Columns to 3.
Head back to the Column where we’ve set up the Loop. Click the Design tab and expand the Spacing menu. Add 20px Padding to all sides.
Finally, click to expand the Border menu. Add 20px Border Radius to the Column.
Add Content To The Loop
With our Loop settings in place, we can start adding content. In the Column’s Content tab, expand the Background menu. Click the Background Image tab and hover above the field to reveal the Dynamic Content icon.
When the custom field options appear, click Loop Featured Image. This will add each blog post’s featured image into the Loop.
Add A Text Module
The next step is to add a Text module to the first Column of the Loop. In the Body field, click the Dynamic Content icon and choose Loop Post Terms.
Switch to the Design tab and style the module as desired.
Add A Heading Module
In the first Column, add a Heading module. Click the Dynamic Content icon and choose Loop Post Title.
Switch to the Design tab and style the module.
Add A Second Text Module
This text module will house our post excerpt. Click the Dynamic Content icon and select Loop Excerpt.
When the modal appears, set the Number Of Words to 25.
Style the module using the following settings:
Add A Button Module
Select and add a Button module to the Loop column. Expand the Link menu. Click the Dynamic Content icon and select Loop Link.
Style the button and save your page. That’s it! As you can see, creating a blog archive page with the Loop Builder and Theme Builder is straightforward. It allows you to break free from traditional Divi modules, giving you ultimate creative freedom for your designs.
If you’d like to see the Loop Builder and Theme Builder in action on your site, fill out the form below to download the files. To install the file, navigate to Divi > Theme Builder, click the Import and Export button, and locate the file on your computer. Click Import Divi Theme Builder Layout to load it.
Combine The Loop & Theme Builder In Divi 5 Today
Divi 5’s Loop Builder and Theme Builder are more than just features; they are essential tools for building websites. They enable you to create dynamic websites that feel custom, all without the hassle. Whether you’re filtering products, looping users, or making a custom blog post archive template, this combo provides nearly endless creative possibilities.
Download the latest release of Divi 5, experiment with the Loop Builder and Theme Builder, and let us know your thoughts in the comments!
Leave A Reply