Implementing Infinite Scroll On The Default Elementor Posts Widget

Authored By: James LePage
Published On: May 6, 2020

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

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.

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.