Skip to main content

How to Add Infinite Scroll to Loops in Divi 5

Learn how to create infinite loading on scroll using Loop Builder in Divi 5.

Out of the box, the Loop Builder doesn't include an infinite scroll. The following article will use the YITH Infinite Scrolling plugin to enable infinite scrolling on the Loop Builder.

Prerequisite

  1. YITH Infinite Scrolling plugin installed and activated.

  2. Loop enabled on a section, row, column, or module.

  3. Strucutre: We recommend using a Section with two Rows:

    • In the first Row, the Loop item (it can contain any module you want). Our recommendation would be to use the Group module as the Looped item.

    • The second Row contains the Pagination module.

Install and activate the YITH Infinite Scrolling plugin

  1. Log in to your WordPress Dashboard.

  2. Go to Plugins → Add Plugin.

  3. Use the Search Plugin box on the top right.

  4. Search for YITH Infinite Scrolling.

  5. Click the Install Now button.

  6. Click the Activate button.

Configure the Loop

  1. Open the page that contains the Loop in Visual Builder.

  2. Open the looped element settings by either clicking on it or by clicking on the Gear icon.

    Divi 5 - Open the Looped element's settings

  3. Go to the Advanced tab → Attributes.

  4. Click the + Add Attribute button.

  5. Choose class and for the Attribute Value, paste in dt-loop-item.

    Divi 5 - Set the dt-loop-item class attribute

Configure the Pagination module

  1. Add the Pagination module after the looped element.

  2. In the Content tab → Target → Target Loop, set the looped element.

  3. Go to the Advanced tab → Attributes.

  4. Click the + Add Attribute button

  5. Choose class and for the Attribute Value, paste in dt-looped-pagination.

    Divi 5 - Set the dt-looped-pagination class attribute

  6. Save the changes

Configure the Section

  1. Open the section's settings that contain the two Rows.

  2. Go to the Advanced tab → Attributes.

  3. Click the + Add Attribute button.

  4. Choose class and for the Attribute Value, paste in dt-loop-wrapper.

    Divi 5 - Set the dt-loop-wrapper class attribute

Note: You can use any class names, as long as they are valid class names. If you decide to use other class names, ensure that the new ones are set correctly in the YITH Infinite Scrolling plugin's settings.

Configure the YITH Infinite Scrolling plugin

  1. Go to your WordPress Dashboard.

  2. From the left sidebar, click the YITH option.

  3. Set the following class names for each option:

    • Navigation Selector: .dt-looped-pagination.

    • Next Selector: .dt-looped-pagination .nav-next a.

    • Item Selector: .dt-loop-item.

    • Content Selector: .dt-loop-wrapper.

    YITH Infinite Scrolling plugin configuration

  4. Click the Save Option button.

⚠️ Important Notes:

  1. In the Prepare the Loop section, the attribute values do not contain the .(dot) in front of the string. When you set the YITH Infinite Scrolling settings, the string has the .(dot) in front.

  2. On your page, ensure you have enough content so you can scroll the page in order to activate the infinite loading.

Related Articles
How to Customize the Woo Products Module to Include Infinite Scrolling
How to Customize the Blog Module to Include Infinite Scrolling
The Pagination Module in Divi 5
Loop Builder in Divi 5
Build Custom Loops using Loop Builder in Divi 5
Did this answer your question?