Infinite Scroll in Elementor (New Plugin)

Hey there, today we are going to look at the easiest way to implement ajax load more elementor and elementor pro infinite scroll. For this, we will be using Elementor and Infinite Scroll Elementor Plugin for infinite scroll.

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 widget. I was looking for some way to add infinite scroll but I couldn't find any accurate solution to add ajax to the default Elementor post widgets.

Addon plugins 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 this makes the website bloated and heavy. And as a result, the GTmetrix and Google PageSpeed scores go down which will indirectly affect your ranking in Google.

So I had to step in and make a plugin of my own, with the help of resources around the web, Infinite Scroll, and Elementor developer documentation, I went ahead and made ajax load more pagination for default elementor widgets possible.

Along with Elementor widgets, it also has the ability to add Infinite Scroll to Custom Selectors. What this does is that you can add it to every other Elementor Addon widget that has support to traditional pagination. And the great thing is that it adds only one JavaScript file and zero CSS file.

Widgets

1. Infinite Scroll Elementor - ISE [Working]
2. Button Load Elementor - ISE [Working]
3. Infinite Single Post - ISE [Coming soon]
4. Infinite Comments - ISE [Coming soon]

Plugin Applicable to

1. Elementor Posts
2. Elementor Posts Archive
3. Elementor WooCommerce Products
4. Custom Selectors [Supports every Elementor Addon]

Features

1. Control Loading Animation.
2. Style Loading Animation.
3. Customizable Loading Animation and Loading Text.
4. Customizable Last Text and Error Text.
5. Style Load More Button.
6. Support for Other Elementor Addons.

Options

• Infinite Scroll
• Load More Button

Tutorial

There are 4 basic steps involved to add ajax load more to elementor
The implementation steps are as follows:

1. Install the Infinite Scroll Elementor plugin.
2. Create a template using Elementor.
3. Add Elementor Posts, Elementor Products, Elementor Posts Archive, or Elementor Products Archive widget to your template.
4. Add Infinite Scroll Elementor - ISE widget below the Post template.

And that's it, you have successfully added elementor load more pagination in WordPress.

Download Plugin

How to install Infinite Scroll Elementor

1. Go to Infinite Scroll Elementor's Github Releases page.
2. Locate 'Latest Release'.
3. Click on 'Source code (zip)' to download the latest version.
4. Upload the .zip file to WordPress plugins and click on activate.

And that is all you have to do to install and use WordPress infinite scroll – ajax load more.

How to Add Infinite Scroll to Elementor Posts

Here are 10 easy steps in which you will learn how to add Infinite Scroll to Elementor Post widget. Note that these steps will work both for Elementor Posts and Elementor Post Archive widgets.

1. Add Elementor post widget to your template.
2. Style the post widget, add all your desired elements and styles.
3. Select and add any query you desire.
4. [Important] Inside the pagination tab change Pagination from None to Previous/Next, this is very important for elementor lazy load posts to work.
5. Inside Pagination, you can enter any number to set Page Limit or you can remove the number and empty the box to make Elementor posts widget infinite scroll i.e scroll till the end of the Query.
6. Now locate the Infinite Scroll Elementor - ISE widget in the Elements panel.
7. Place it below the Elementor Post widget.
8. Infinite Scroll is Off by default, you can also set it to Yes to turn it ON.
9. Select target widget (in this case Elementor Post widget) from Pagination For dropdown list.
10. Ajax infinite scroll will not work inside the Elementor editor, so just save/update the template and preview the template.

And there you have it, you just added lazy load posts to Elementor.

How to Add Ajax Load More Button in Elementor

Here are 10 easy steps in which you will learn how to add Ajax Load More in Elementor Post widget.

1. Locate the Button Load Elementor - ISE widget in the Elements panel.
2. Place it below the Elementor Post widget.
3. Button Load is Off by default, you can also set it to Yes to turn it ON.
4. Select target widget (in this case Elementor Post widget) from Pagination For dropdown list.
5. Ajax infinite scroll will not work inside the Elementor editor, so just save/update the template and preview the template.

And there you have it, you just added lazy load posts to Elementor.

How to Add Infinite Scroll to Elementor Products WooCommerce Widget

Here are 9 easy steps in which you will learn how to add Infinite Scroll to WooCommerce Product widget in Elementor.

1. Add the Elementor Product widget to your template.
2. Configure the Product widget to your desired setting.
3. Select and add any query you desire.
4. [Important] Inside the content tab, set the Pagination to On by clicking on NO and make it YES, this is very important for elementor lazy load posts to work.
5. Now locate the Infinite Scroll Elementor - ISE widget in the Elements panel under the Infinite Scroll Elementor category or you can just search for Infinite Scroll Elementor - ISE.
6. Place it below the woocommerce widget.
7. Infinite Scroll is ON by default, you can also set it to No to turn off the element.
8. Select target widget (in this case Elementor Products) from Pagination For dropdown list.
9. Ajax infinite scroll will not work inside the Elementor editor, so just save/update the template and preview the template.

Hurrah! there you go, you just added WooCommerce Infinite Scroll to Elementor Products widget.

How to add Loading Animation to Infinite Scroll Elementor

✔ This feature was revived in version 2.2.0, as the comments in the post suggested that you wanted more control over the Loading Image and Animation.

1. After adding the ISE widget you will see an option named Show Loading Animation, you need to turn it on and make it YES.
2. Inside that, you will see an option named Loading Type
3. Select Animation and you are good to go.

How to add Loading Text to Infinite Scroll Elementor

✔ This feature was added in version 2.2.0 to give more customizing options.

1. After adding the ISE widget you will see an option named Show Loading Animation, you need to turn it on and make it YES.
2. Inside that, you will see an option named Loading Type
3. Select Text.
4. A new text box named Loading Text will appear.
5. Add your custom text and you are good to go.

How to add Last Post Text

The Last Post Text option will let you add a text at the end of the pagination.

1. After adding the ISE widget you will see an option below Show Loading Animation.
2. Inside that, you will see a text box named Last Text.
3. Add your custom text and you are good to go.

How to add No Post Error Text

The No Post Error Text option will let you add a text if there is no post at all.

1. After adding the ISE widget you will see an option below Show Loading Animation.
2. Inside that, you will see a text box named Error Text.
3. Add your custom text and you are good to go.

Step by Step Guides: YouTube Videos

Alternative to Infinite Scroll Elementor

While there are a lot of plugins that you can use in WordPress to implement infinite scroll, Catch Infinite Scroll is one of the options (other than Infinite Scroll Elementor) to load the next WordPress posts with ajax in Elementor.

Infinite Scroll Elementor (ISE) vs Catch Infine Scroll

Drawbacks and limitations of Catch in Elementor

• You set WordPress infinite scroll and ajax load more to only one widget.
• Once you set infinite scroll to a widget it gets applied to the whole site and Catch has no control over it.
• You cannot use Catch more than once on the same page.
• Limited styling options.
• The plugin is not native to Elementor.
• Adds menu item in WordPress dashboard (for those who like it clean in the admin area).

Benefits of using Infinite Scroll Elementor in Elementor

• You set WordPress infinite scroll and ajax load more to unlimited widgets.
• Unlike Catch, ISE gives you total control over where infinite scroll gets applied.
• You can use ISE more than once on the same page.
• The plugin comes default with beautiful Loading Animation and No more post text.
• The plugin is native to Elementor and does not apply anywhere else.
• It does not add any menu item in the WordPress admin area.
• No bloat codes, it adds only one JavaScript file and zero CSS.

How to Install Catch Infinite Scroll

1. Install the plugin.
2. Inside plugin settings, you need to change the following settings:
3. Set "Load On" to scroll or load more.
4. To apply Catch to Elementor Posts widget add the following selectors.
   1. Navigation Selector: nav.elementor-pagination
   2. Next Selector: nav.elementor-pagination a.next
   3. Content Selector: .elementor-posts-container
   4. Item Selector: article.elementor-post

Changelog

To learn about the changelog check Changelog of Infinite Scroll Elementor plugin.