Infinite Scroll in Elementor (New Plugin)

A few days ago while I was working on a new project, I was asked by the client to add Ajax Load More and Infinite Scroll functionality to the Elementor Post List Blocks. I had everything ready in the Post List Blocks with Custom CSS and ACF (Advanced Custom Fields) but when I looked for the Load More button in the Pagination section, it wasn’t there.  So I looked for some other way to implement it but I couldn’t find any accurate solution to add ajax to the default Elementor post widgets and ended up buying a plugin.

The problem with these custom plugins is that they come with additional widgets and extra hooks that you would use on very rarely or never even use. They inject a lot of extra CSS and JavaScript files on every page of the website and while doing these they eat up a lot of server resources and while doing these the website becomes bloated and heavy. And as a result, the GTmetrix and Google PageSpeed scores go down which will indirectly affect your ranking in Google.

However, that was past but now with some help from around the web and Elementor developer documentation I have found a new plugin addon for Elementor that adds Ajax Load More and Infinite Scroll functionality to Elementor Posts, Elementor Products, Elementor Posts Archive and Elementor Products Archive Widgets. It also has Custom Selectors so that you can add them to every other Elementor widget. And the great thing is that it adds little to no JavaScript code and zero CSS.
The plugin is currently in the queue for approval in the WordPress Plugin Repository.

Widgets

1. Infinite Scroll
2. Load More
3. Lazy Load Single Post

Pagination applicable to

1. Elementor Posts
2. Elementor Products
3. Elementor Posts Archive
4. Elementor Products Archive
5. Custom Selectors

Options

1. Adjust Image Ratio
2. Enable support for JetSmartFilters
3. Add Bottom Offset
4. Add Animation Time

Extra Options

1. Add Loading Image
2. Add No More Items Text

Tutorial

1. How to use Infinite Scroll?

1. Locate the Infinite Scroll widget in the Elements panel, under Infinite Scroll Elementor category, and place it below the widget you want.
2. Select “Yes” beside Infinite Scroll (don’t do anything if it is “Yes” by default).
3. Select target widget from Pagination For dropdown list.
4. Make Image Ratio “Yes” if you have modified Image Ratio in the target widget. Turn it “Yes” or “No” to what fits best.
5. Turn JetSmartFilters to “Yes” if you are using JetSmartFilters plugin, ignore if you do not use it.
6. Adjust Bottom Offset and Animation Time if you want to.
7. Optional: In Extra Options section you can assign Loading Image ID and No More Items ID if you want to.

2. How to use Load More Button?

1. Locate the Load More widget in the Elements panel, under Infinite Scroll Elementor category.
2. Place it below the target widget (in the same section and column).
3. Insert a section or inner section below the target Elementor widget.
4. Give this section or inner section an ID or Class in Advanced section (e.g. load-more-posts).
5. Add a Button widget inside this new section.
6. In the Load More widget select “Yes” beside Load More (don’t do anything if it is “Yes” by default).
7. In the input filed of Assign Load More ID insert the same ID (E.g. #load-more-posts) or class (E.g. .load-more-posts).
8. Select target widget from Pagination For dropdown list.
9. Make Image Ratio “Yes” if you have modified Image Ratio in the target widget. Turn it “Yes” or “No” to what fits best.
10. Turn JetSmartFilters to “Yes” if you are using JetSmartFilters plugin, ignore if you do not use it.
11. Adjust Bottom Offset and Animation Time if you want to.
12. Optional: In Extra Options section you can assign Loading Image ID and No More Items ID if you want to.

3. How to show Loading Image while scrolling?

1. Insert a section or inner section below the target widget and give it an ID or class (E.g. loading-image-container).
2. Add an Image widget inside the new section, add an image or gif.
3. Select Infinite Scroll or Load More widget.
4. In the input field of Assign Loading Image ID under Extra Options section insert the same ID (E.g. #loading-image-container) or class (E.g. .loading-image-container).

4. How to show “No More Items Left” at the end?

• Insert a section or inner section below the target widget and give it an ID or class (E.g. no-more-image-container).
• Add an Image widget inside the new section, add an image or gif.
• Select Infinite Scroll or Load More widget.
• In the input field of Assign No More Items ID under Extra Options section insert the same ID (E.g. #no-more-image-container) or class (E.g. .no-more-image-container).

5. What is and how to use “JetSmartFilters”?

1. This option enables compatibility for JetSmartFilters.
2. It only works on a pagination base page.
3. In JetSmartFilters widget set filter setting Apply type to “AJAX” and Apply on to “Value change”.

Download from Github