Infinite Scroll Pagination in Elementor Posts

Firstly, to ensure that pagination works correctly in the Elementor Posts widget, it’s important to set the pagination parameter posts_per_page to a number equal to or lower than what you plan to display in the posts widget. This will set the maximum number of entries shown per page.

Reading Settings

You can easily modify the posts_per_page value in the WordPress admin by navigating to Settings > Reading in the sidebar menu.

Within the Reading Settings page, we can modify the posts_per_page value using a text field. In my case, I display 3 posts per page.

Include Posts Widget

Now we can go to the page or template where we want to display our posts with pagination.

We will use the Posts widget from the Elementor Pro version.

In the Layout tab of the post widget’s settings options, we will set the number of posts we want to display with each request. In my case, I’ve set it to show 3 posts per page again since I have few publications, and I want the loading effect to be noticeable when entering the blog and scrolling down.

Let’s remember to set our CPT «Entries» as the query source to load the blog posts.

Finally, within the Pagination settings tab, we will select the infinite scroll option.

We can also apply a loading animation and a custom message when there are no more posts to load.

Facebook
Twitter
LinkedIn