Elementor is an intuitive and user friendly page builder for WordPress. It powers more than 3 million websites across both the free and Pro versions of the plugin.

Today, we are going to take a look at implementing infinite scroll on your single (blog) post articles created with Elementor. For this, we will be using Elementor Pro, Ajax Load More and the Single Posts add-on for Ajax Load More.

By the end of this quick start guide I’m hopeful that you will have a better understanding of what it takes to implement infinite scrolling on Elementor post articles.

Implementation

There are 3 essential steps involved to begin infinite scrolling with Elementor and Ajax Load More – none of these steps are overly difficult or time consuming and should not require a background in website development to complete.

The implementation steps are as follows:

  1. Create the Elementor Single Template
  2. Build the Ajax Load More Repeater Template
  3. Add the Ajax Load More Shortcode

Alright, let’s get started.


1. Creating the Elementor Single Template

The first step is to create your Elementor single template. For this you will go to Templates > Add New in your WordPress admin – this will pop up an Elementor lightbox asking for a few key details.

Users that have already built a custom Elementor Single Template can skip this step and move onto step 2.

Elementor create new template screen

Choose Single as the template type and give your template a name that will be easily remembered and referenced later on – e.g. Single Template 🙂

After the template has been created, Elementor will send you directly to the template edit screen. From there you can start dragging and dropping widgets to build out the template for your article pages.

Elementor page building process

Once you’ve got your Single Template built just right, go onto the next step and create the Ajax Load More Repeater Template.


2. Building the Ajax Load More Repeater Template

For those familiar with Ajax Load More, you know just how important it is to create the perfect Repeater Template. This is the code that will loop over and over as users load additional content via infinite scroll.

In your WordPress Admin, goto Templates > Saved Templates and locate your Single Template. Copy the contents of the elementor-template shortcode (on the right side) to your clipboard.

Select the shortcode from the Elementor admin

After copying the shortcode, goto Ajax Load More > Repeater Templates and add the elementor shortcode directly to a Repeater Template using the do_shortcode method.

Ajax Load More Elementor Repeater Template Screen

Pro Tip: Open a Repeater Template with global $post; at the very beginning to ensure the current $post object is always in scope.

When the template has been created, move on to the next step and add the ajax_load_more shortcode to your Elementor footer.


3. Adding the Ajax Load More Shortcode

The next step is to add the Ajax Load More shortcode to the top of your site footer.

In the majority of cases the shortcode is placed in the footer as the site footer is constant element, which means it doesn’t change from post to post. It also allows for Ajax Load More to be loaded independently of the Elementor Single Template which is key to implementing infinite scroll with Elementor.

The process to completion for this step depends on how you’ve decided to build out your content.

Elementor Footer Templates

For Elementor sites that make use of Header and Footer templates, you’ll need to edit your Footer Template under Templates > Saved Templates.

Locate the Footer Template used by your Single Templates and click Edit with Elementor – the template should open in edit mode.

Elementor Template In WP Admin

In this example, I’m using a Global Footer template that is used on both pages and posts throughout the entire site.

With the template in edit mode, locate the shortcode widget/module and drag it into your footer above the rest of the content.

Adding Ajax Load More to Elementor screencast

With the shortcode widget now at the very top of the Footer Template, take your Ajax Load More shortcode and add it directly to the widget textarea.

The Ajax Load More shortcode inside the Elementor Shortcode Widget

You’ll notice the Ajax Load More shortcode has an elementor parameter set to true. This new parameter tells Ajax Load More to perform unique Elementor only tasks on the server side before rendering the shortcode output.

Footer.php

For sites that use a standard WordPress footer (footer.php), you will need to edit the file directly in your current theme directory.

The location to place the ajax_load_more shortcode will vary from theme to theme. You may need to experiment with the shortcode location to get it just right for your specific case.

Note: You should always use a child theme when making modifications to a core theme file such as footer.php. Child themes allow us to keep updates when a theme update is applied.

After the shortcode has been added your site footer and assuming you have blog content ready to go, you’re ready to test what was just created.

The Results

With steps 1 thru 3 complete you should now have Ajax Load More working to infinite scroll/lazy load your Elementor posts – visit one of your post pages and begin testing the plugin functionality.

If everything is working correctly, Ajax Load More will load the previous posts in chronological order once you’ve reach the site footer.

Click the link below to view the results of this guide implemented on an Elementor example website.

Wrapping Things Up

When I originally set out to write this guide I had no idea how simple it would actually be to have Elementor and Ajax Load More working together to create a seamless infinite scroll experience.

The simplicity of the Elementor templating system makes the process of building Repeater Templates an afterthought, where historically this has been the most challenging and time consuming task for Ajax Load More users.

Whether your an Ajax Load More user or you’re not, I highly recommend giving Elementor a try – it really is a game changer in the WordPress world.

In my next tutorial, we will be looking at implementing infinite scroll on sites built with Beaver Builder.

Do you have Elementor or Ajax Load More specific questions or suggestions? Leave them in the comments and I’ll do my best to help you out!

Comments

5 thoughts on “Elementor Infinite Scrolling with Ajax Load More”

  1. Avatar

    Olle

    December 26, 2019 @ 1:21 pm
    Reply

    Thanks. If you need help testing with Beaver Builder. I’ll be happy to help. I have infinite scroll for single posts working with another plugin but have som problems with the Callbacks and reinitializing of Beaver Builder layouts.

    Olle

  2. Avatar

    PADU

    December 12, 2019 @ 12:58 pm
    Reply

    Thank you sharing this. It’s possible to appear next permalink on each scroll?

    1. Avatar

      Darren Cooney

      December 14, 2019 @ 11:39 am
      Reply

      Hi Padu,
      Not sure what you mean… you want to display the link?

  3. Avatar

    Olle

    December 12, 2019 @ 4:01 am
    Reply

    Interesting. When will you have the Beaver Builder tutorial ready? I’m using it now and need this functionality.

    1. Avatar

      Darren Cooney

      December 14, 2019 @ 11:40 am
      Reply

      Hi Olle,
      Likely not til the new year. Just started it a few days ago.

Leave a Reply

Your email address will not be published. Required fields are marked *