isotropic-2022
Share
Blog
Search
Menu

Infinitely Load Blog Posts In Elementor

By James LePage
 on November 29, 2020
Last modified on January 7th, 2022

Infinitely Load Blog Posts In Elementor

By James LePage
 on November 29, 2020
Last modified on January 7th, 2022

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!

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.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
blue
blue
1 year ago

but if you follow this tutorial step by step <---
Why the article stopped? Where I can find the tutorial?
thanks

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
Love web dev? Join the Isotropic weekly newsletter.
cross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
0

Your Cart is Empty