isotropic-2022
Share
Blog
Search
Menu

Implementing Infinite Scroll On The Default Elementor Posts Widget

By James LePage
 on May 6, 2020
Last modified on January 7th, 2022

Implementing Infinite Scroll On The Default Elementor Posts Widget

By James LePage
 on May 6, 2020
Last modified on January 7th, 2022

As unfortunate as it is, Elementor doesn't provide any support for Ajax infinite loading. We've been requesting this feature for awhile, so it doesn't look like they'll be adding in anytime soon. Luckily for you, it's a pretty easy thing to implement with a free and super simple third party plugin. In this blog post we're going to introduce the plugin, discuss the best settings for ajax infinite loading, and show you some examples.

The Plugin

Catch Infinite Scroll allows you to add the magic of infinite scroll on your website. The plugin will help in increasing the user engagement on your WordPress site. The inspiration behind crafting Catch Infinite Scroll is Jetpack’s Infinite Scroll. Catch Infinite Scroll is a single solution to all those loading issues caused by the change of the page. With the plugin installed and activated, your users will be able to simply scroll down and go deeper into your website. The plugin will load content automatically as you scroll down the page or you can also add a “Load More” button to load more content. You will have control over some of the crucial features available in the plugin, such as, choosing between Click or Scroll to load more content, add a custom image, the load more text, and finish text. Display your contents online in a sequential way with the new infinite scrolling plugin—Catch Infinite Scroll, without affecting your wallet.

From the Devs

How It Works

When your page hits the bottom (where Elementor's pagination would be), this plugin activates the infinite load and loads more posts. The process repeats.

Setting It Up For Elementor

Simply install the plugin. In settings, change the following settings:

Change "Load On" to scroll.

For the default posts element in Elementor Pro, need to change the default entries to the following selectors.

  • Navigation Selector: nav.elementor-pagination
  • Next Selector: nav.elementor-pagination a.next
  • Content Selector: .elementor-posts-container
  • Item Selector: article.elementor-post

Click save changes and you're done. Now you have infinite loading on your posts element in your Elemenor site.

Some neat things:

The infinite load will load the specified "Posts Per Page". IE, when you toggle the ajax infinite load, it'll pull up 5 more posts.

This plugin is a super simple way to implement Infinite Scroll on any Elementor based website. It's also quite powerful for a free plugin, while other solutions that do similar things cost $15 to $20. If you are looking for some more advanced features, you can purchase the pro version of the plugin, but much of the styling can be done in CSS (with the pro version, your dashboard gives you some styling features and more functionality).

Hopefully sometime in the future elementor base this functionality it's base installation, but for now this is perfectly capable and easy to implement solution to infinite scroll and Elementor.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram