Share Your Thoughts

Infinite Scroll

Infinite Scroll is a Zion Builder element that automatically adds the next page, saving users from a full page load. This element will work with Zion Builder’s Repeater Query builder. The major features are:

  1. Load on scroll
  2. Loading after clicking on the view more button
  3. Inbuilt mansory and isotope function
Infinite Scroll Element Settings
Infinite Scroll Settings for Builder Editor

Enable The Element

At first, you will activate the Infinite Scroll element after activating your license key. You will go to your Dashboard -> Zion Builder -> ZiUltimate page. Under the Elements tab, you will get the elements list. Select the Infinite Scroll element and save the settings.

How To Use

You will create the posts/pages/cpts or products list with a repeater query builder. Now add the “Infinite Scroll” element inside the provider wrapper(like zion’s pagination element). Please check the tree view structure.

Placed it inside the provider wrapper

After that, you will put the repeater provider selector(class or ID) into the “Repeater Provider Selector” (class or ID) text field & consumer selector into the “Repeater Consumer Selector” text field(like the above screenshot). The rest of the settings will adjust based on your requirement. See the complete video below:

Create Custom View More Button

You can disable the scrolling effect and add the “View More” button. The user will click on the button and the next page will load. There have two options: inbuilt and custom. You can use any element like button, icon+button, container or section with icon/button, etc. for the custom view more button. See the example below:

Setting Custom Scroller Element