If you've built your content website with Elementor, and want to automatically load a new post when a visitor gets to the end of a current one, this article is for you.

Many major content websites and news publications utilize the technique of infinitely loading blog posts To recommend relevant content to their visitors, get more pageviews, and increase metrics for advertising purposes. Because you can build virtually anything with the Elementor page builder, it's relatively simple to implement infinite scrolling of content in blog posts in your WordPress website. This article is going to offer guidance in how to do that.

Without any further ado, let's get into the tutorial. this should take just a few minutes to implement, and in no time you'll have more page views, higher time spent on your website, and more advertising revenue. Also, you'll notice that we have implemented this same feature on our website. Scroll to the bottom of this post, and a new one will load automatically.

Install The Ajax Load More Plugin

We are going to be using a third party plugin called Ajax Load More to implement this infinite blog posts scrolling functionality in our Elementor website. You can do this by using a third party JavaScript library for free, but it's fairly difficult to implement, and the Ajax load more plugin integrates directly into Elementor. You can also utilize this plugins Ajax technology on archive listings, and additional content types. However, we will only be discussing infinitely loading blog posts in this tutorial.

You’ll need to install the ALM plugin, which is free on the WordPress repository, and pick up the Single Post add-on, which is a paid addition. This helps you ”quickly add infinite scroll or load more to your Elementor Posts and WooCommerce listing widgets with Ajax Load More and the intuitive Elementor Widget Connector.”

The way this add-on works (for single posts) is fairly simple. As the user scrolls down the initially loaded content, the plugin will load the next post by using the built in WordPress function get_next_post(). It hooks into this and utilizes Ajax to render and display the content. Because it uses Ajax, the user can virtually scroll through every single post on your website, without leaving the initially loaded page. Pretty cool, huh?

When upcoming posts are loaded and come in to view, the browser address bar will update to the URL of the post currently in view. This is helpful because many users copy and paste the URL to share with their friends. By automatically updating it, your visitor will still have this option.

Implement The Infinite Single Post Loading With WordPress In Elementor

Once you've installed the plugin and its add-on, it's time to implement the infinite loading of single posts in Elementor. This requires some technical know how, but if you follow this tutorial step by step, you should be able to implement this even if you have no knowledge in PHP or WordPress development. Let’s do it!