How To Use Divi 5’s Loop Builder & Pagination Module Together

Static lists of post content are fine if you are showing a selected and limited set of those posts. But often, you want users to access more content than your original loop shows. You want to decide how much content loads initially and give readers a clear way to move between batches. That’s where Divi 5’s Loop Builder and Pagination Module make a perfect pair.

This post will walk you through how each works, then show you how to connect them. By the end, you’ll know how to build looped layouts with proper pagination.

Meet Divi 5’s Loop Builder

The Loop Builder is one of Divi 5’s biggest upgrades. It gives you freedom that the old Blog Module never could. Any element can become a “looped” container. That means Divi will automatically repeat it for each post, product, or custom post type that matches your query.

Instead of being stuck with a pre-designed list of posts, you design one “template” item as the loop. Divi uses that for each result, swapping in dynamic content from the loop’s query. This could be:

• Titles pulled from post data
• Featured images
• Custom fields
• Links to full posts or products

You can use any module to display this data, not just a blog-specific one. Want a fancy Blurb Module showing your latest course listings? Done. Need a custom product card layout for WooCommerce items? Also done.

It’s flexible because you’re building the design and content structure yourself. Divi handles the repetition.

Switching from the Blog Module to the Loop Builder means moving from a standard template to a fully customizable layout system. I have really enjoyed building with it, and I know you will too!

Meet the Pagination Module

Pagination is a fancy way to say “split the results into pages.” Instead of dumping all items on a single page, you break them into smaller sets. That helps with:

• Page load times
• Readability
• Scanability

The Pagination Module in Divi 5 does exactly that, but with some smart integration. It’s not tied to blog posts only. Instead, it can connect to any loop you have built on the page.

It works by adding two navigation elements—previous and next links—whose labels you can customize. If there are older items past the current set, “Older” (or your chosen text) will be active. If there are newer items, “Newer” will be active.

Building a Loop + Pagination Layout

Let’s run through the full setup. This example assumes you want a custom loop with pagination under it. Here’s the flex layout I created that will display our loop. You can download the fully built layout below.

Note that the card is set to ~50% width and Flex-Grow, so when a looped card is in a flex-row by itself, it will become full-width inside its container.

Step 1: Create the Loop Container

Add a Section to your page. Inside it, add the module(s) you want to repeat. This could be a single module (like a Blurb) or a more complex layout of multiple modules in a Column or Group.

With your container selected, open its settings and enable the Loop option.

Choose your data source. This is the “query” the loop will run.

First, choose the Query Type. Depending on your website’s configuration, you might see these options:

• Post Type (like your blog posts or custom post types like ‘projects’)
• Terms (Categories and taxonomies)
• Users (Return a list of site users, like authors)
• Repeater Field (A custom field created by a plugin for creating a loop within a loop)

Next, depending on what type of Query you chose above, you will get the chance to be more specific. Selecting “Post Type” might allow you to use such post types as:

• Blog Posts
• Projects
• Products
• Whatever CPT you’ve custom-built for yourself

From there, you can get even more specific with what should appear in your loop. You can:

• Include items with a specific category or tag
• Exclude items with a specific category or tag
• Include specific items (by post ID)
• Exclude specific items (by post ID)
• Build your own Meta Query (useful for creating inclusions/exclusions based on custom field data)
• Set the Order of matching Queries (like alphabetical and descending)
• Items per page value controls how many show up in the loop
• Post Offset, in case you want to start your loop later in the cycle
• Ignore sticky posts

This is how our example looks at this point. We created the loop and assigned it to our blog post Post Type. I set the display limit to 3.

Now, we must assign the various text fields and items we want to hyperlink with Dynamic Loop Content.

Step 2: Add Dynamic Content Inside the Loop

Our next task is to click into each of the loop’s modules and replace static text or images with dynamic content fields. For example:

• In a Text Module, choose “Post Title” from the dynamic content picker
• In an Image Module, you can choose “Featured Image”
• In a Button Module, set the link to “Post URL”
• On the whole looped container, also set the link to “Post URL”

This tells Divi to pull the right content for each looped item.

Remember—anything inside the loop is repeated for each result. Keep non-loop content (like headings, ads, or CTAs) outside of it. If you have a piece of content in the loop that is not connected with dynamic data, every item in the loop will display that as-is (like the “Read →” text on the bottom right of the example card).

Step 3: Add the Pagination Module

Below your loop section, add a new Row. Insert the Pagination Module. In the module’s settings, locate the Target field. Use it to select your loop from a dropdown list of loops on the page. This links the pagination controls to that specific loop. Pro tip: if you use Admin Labels, it’s easier to select the right target. This goes for interactions as well.

Customize the labels for “Previous” and “Next.” You could use “Older Posts / Newer Posts,” “Back / Forward,” or even “← / →” for a minimal style.

The key is that the Pagination Module must sit outside the loop it controls. That and making sure it is assigned to the right target (if you have multiple loops on the same page/template).

Step 4: Test the Interaction

Save your page and preview it. Click “Older” to go to the next set of loop items.

Note how the URL changes with a query parameter that identifies the loop’s page. Also note that only the loop content shuffles/changes—headers, footers, and sidebars should stay the same.

Get This Loop Layout

Want to dissect this layout and see how things are built for yourself? Download it here!

Once you unzip your folder, navigate to your Divi Library to upload the file. Once uploaded, you’ll be able to add the section to any page you’re working on.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Enjoy a More Dynamic Divi

Divi 5’s Loop Builder and Pagination Module are a big leap forward in flexibility. The Loop Builder frees you from the rigid designs of older modules, letting you build your own repeated layouts with dynamic content. The Pagination Module keeps those layouts fast and manageable by breaking them into user-friendly chunks.

The Loop Builder and Pagination Module, paired with other new Divi 5 features (Flexbox, Interactions, HSL Color Controls), is as powerful as ever. You can make some incredible page designs with all of this.

Once you’ve built your first paginated loop, you’ll see how easy it is to reuse the approach across blogs, product grids, portfolios, or any content type you need to organize.