🎉 Announcing the WooCommerce Add-on for Ajax Load More
Don't show this again

Elementor is an intuitive and user friendly page builder for WordPress. It powers more than 5 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

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

  1. Avatar

    Jorge

    July 01, 2020 @ 11:42 pm
    Reply

    Does this work for Elementor Posts widget?

    1. Avatar

      Darren Cooney

      July 02, 2020 @ 9:39 am
      Reply

      This specific example is for single posts only as it uses the Elementor template as a Repeater Template.

      I’m hoping to tackle Elementor post widgets soon.. It’s tricky as include so much custom CSS it’s very difficult to pull out into an ALM listing.

  2. Avatar

    Mer

    June 11, 2020 @ 3:11 am
    Reply

    I tried it for archive elementor. it’s working but the background featured image are all the same

    1. Avatar

      Darren Cooney

      July 29, 2020 @ 8:35 am
      Reply

      Hi Mer,
      Not sure what you mean about the background feature image. Is this a widget?

  3. Avatar

    Emily Chiang

    May 07, 2020 @ 7:55 am
    Reply

    It kinda works, but the URL doesnt change for me..

    1. Avatar

      Darren Cooney

      May 07, 2020 @ 8:04 am
      Reply

      Hi Emily,
      Are you running the Single Posts add-on? That is required.
      https://connekthq.com/plugins/ajax-load-more/add-ons/single-posts/

      1. Avatar

        Emily Chiang Hai Yee

        May 13, 2020 @ 4:51 am
        Reply

        Thanks for clarifying.
        BTW, how to avoid the same post being loaded on the next post?
        Say a user selects the 3rd post in blog catalog, as he finished reading, the 2nd post loaded next, then the 3rd post appears again in the following ajax load.

        1. Avatar

          Darren Cooney

          May 13, 2020 @ 7:59 am
          Reply

          Hi Emily,
          I’ve never had this issue come up before. Can you share a link to this?

          1. Avatar

            Abuel

            August 14, 2020 @ 12:46 am

            Hi Darren!
            I also had the same issue. No matter what blog post i open, the next post to appear when i scroll is always the second post on my timeline then the next.
            Is there a way to make it dynamic?
            Thanks!

          2. Avatar

            Darren Cooney

            August 14, 2020 @ 6:53 am

            Hi Abuel,
            You need the Single Posts addon for Ajax Load More to get this functionality.

            https://connekthq.com/plugins/ajax-load-more/add-ons/single-posts/

  4. Avatar

    Antonis C.

    February 27, 2020 @ 11:42 pm
    Reply

    Greetings! I am using Elementor and I am considering to purchase Ajax Load More in order to implement Infinite Scroll per article. But what I really need is the scroll to fetch “same category” posts (provided that each post has only one category). Do you think that it is possible? Thanks for this helpful guide!

    1. Avatar

      Darren Cooney

      February 28, 2020 @ 8:56 am
      Reply

      Hi Antonis,
      Yes, that is possible using the `single_post_taxonomy` shortcode parameter.
      https://connekthq.com/plugins/ajax-load-more/add-ons/single-posts/#shortcode

      Let me know if you need more clarification.

  5. Avatar

    Ashley

    February 22, 2020 @ 11:30 pm
    Reply

    Can this be used on long pages, i.e. not posts?

    1. Avatar

      Darren Cooney

      February 26, 2020 @ 1:01 pm
      Reply

      Hi Ashley,
      You can use the Next Page addon for long pages, but not this Single Posts add-on.
      https://connekthq.com/plugins/ajax-load-more/add-ons/next-page/

  6. 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

  7. 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?

  8. 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 *