💡 Come impostare lo scroll infinito in Elementor con Ajax Load More

• Installa il plugin gratuito Ajax Load More dal repository WordPress.org e attivalo.
• Copia la struttura HTML di un singolo post dalla griglia di Elementor usando DevTools e costruisci un Repeater Template.
• Nel Shortcode Builder, seleziona "Infinite Scroll" come Loading Style e imposta posts_per_page (4-6 per una griglia a 2-3 colonne).
• Aggiungi scroll_container e transition_container_classes con le classi CSS della griglia Elementor, così i post caricati ereditano gli stili.
• Avvolgi lo shortcode in un contenitore HTML con la classe univoca elementor-element-* del widget e posiziona il blocco nella pagina.
• Apri la pagina nel frontend, scorri fino in fondo e verifica che i post si carichino allo scroll senza ricaricare la pagina.

Cosa ti serve

Prima di iniziare, assicurati che due cose siano installate e attive sul tuo sito:

• Elementor (versione free o Pro), il builder con cui hai creato la griglia dei post.
• Ajax Load More, un plugin gratuito per caricare contenuti via AJAX. Scarica da WordPress.org

Tieni a portata di mano anche la documentazione ufficiale e la pagina degli esempi. Ci sono decine di snippet già pronti per scenari diversi: dai post standard a WooCommerce e ACF.

Il widget Post integrato in Elementor offre solo la paginazione numerata; né la versione free né la Pro possono caricare post allo scroll. Ajax Load More colma questa lacuna: aggiunge infinite scroll, un pulsante "Carica altro" e il lazy load, mantenendo l'aspetto della griglia. La chiave è un Repeater Template corretto. Una volta costruito, i post caricati sono visivamente indistinguibili da quelli già presenti nella pagina.

Il breve video qui sopra mostra l'integrazione in azione: i post di Elementor si caricano senza interruzioni, senza ricaricare la pagina né salti di layout.

Step 1: Costruire un Repeater Template per la griglia Elementor

La parte più importante è trasferire correttamente la struttura HTML di un singolo post da Elementor nel template di Ajax Load More. Se il template non corrisponde al layout reale, i post caricati "si sfalderanno": i margini si sposteranno, le card scompariranno e la griglia si romperà.

Apri la pagina con la griglia nel browser, premi F12 (DevTools), vai alla scheda Elements e trova il nodo DOM di un singolo post. Ti serve l'HTML COMPLETO di un elemento, dal tag di apertura <article> o <div class="elementor-post"> fino al tag di chiusura.

Un template base per una griglia Elementor (due colonne, skin Cards) ha questo aspetto:

1
<article class="elementor-post elementor-grid-item post-<?php the_ID(); ?>">
2
  <div class="elementor-post__card">
3
    <a class="elementor-post__thumbnail__link" href="<?php the_permalink(); ?>">
4
      <div class="elementor-post__thumbnail">
5
        <?php if (has_post_thumbnail()) {
6
          the_post_thumbnail('alm-thumbnail');
7
        } ?>
8
      </div>
9
    </a>
10
    <div class="elementor-post__text">
11
      <h3 class="elementor-post__title">
12
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
13
      </h3>
14
      <div class="elementor-post__excerpt">
15
        <?php the_excerpt(); ?>
16
      </div>
17
      <a class="elementor-post__read-more" href="<?php the_permalink(); ?>">
18
        Read more »
19
      </a>
20
    </div>
21
    <div class="elementor-post__meta-data">
22
      <span class="elementor-post-date">
23
        <?php the_time('d.m.Y'); ?>
24
      </span>
25
    </div>
26
  </div>
27
</article>
28

Salva il template nel pannello di amministrazione: Ajax Load More → Repeater Templates, clicca «Add New». Assegnagli un nome significativo, ad esempio «Elementor Grid 2 Columns».

A cosa prestare attenzione:

• Le classi elementor-post, elementor-post__card e elementor-post__thumbnail sono classi «native» di Elementor. Garantiscono che i post caricati corrispondano visivamente alla griglia originale.
• the_post_thumbnail('alm-thumbnail') utilizza la dimensione thumbnail registrata dal plugin Ajax Load More. Se il tuo tema ha una dimensione personalizzata registrata, sostituisci alm-thumbnail con quella.
• <?php the_ID(); ?> nella classe dell'<article> assegna a ogni post un identificatore univoco, utile per il targeting CSS.

Importante: le classi possono variare in base alla skin del widget Posts (Classic, Cards, Full Content). Prendi le classi DAL TUO markup invece di copiare il codice sopra così com'è. Tutto deve corrispondere, incluso ordine e spaziatura.

Step 2: Costruire lo shortcode di Ajax Load More

Vai su Ajax Load More → Shortcode Builder. Il builder visuale genererà uno shortcode in base ai tuoi parametri:

• Post Type: post (o il tuo custom post type).
• Posts per Page: quanti post caricare per ogni iterazione. Per una griglia a 2-3 colonne, usa 4-6.
• Loading Style: Infinite Scroll (scorrimento infinito). Alternative: pulsante «Load More», lazy load.
• Container Type: div.
• Transition: animazione per i nuovi post: Fade, Slide o None.

Uno shortcode base avrà un aspetto simile a questo:

1
[ajax_load_more post_type="post" posts_per_page="4" 
2
  loading_style="infinite classic" 
3
  container_type="div" 
4
  scroll="true" 
5
  transition="fade"
6
  button_label="Loading..."]

Per l'integrazione con Elementor, due parametri aggiuntivi sono critici: scroll_container e transition_container_classes. Essi «legano» l'output di Ajax Load More alla griglia CSS di Elementor:

1
[ajax_load_more post_type="post" posts_per_page="4" 
2
  scroll_container="elementor-grid-2" 
3
  transition_container_classes="elementor-posts-container elementor-posts elementor-grid elementor-posts--skin-cards elementor-has-item-ratio"
4
  loading_style="infinite classic"
5
  images_loaded="true"
6
  offset="2"]

Parametri chiave spiegati:

• scroll_container="elementor-grid-2" è il contenitore della griglia a due colonne. Per tre colonne, cambia in elementor-grid-3; per quattro, usa elementor-grid-4.
• transition_container_classes="..." include TUTTE le classi CSS del contenitore della griglia copiate da DevTools. Senza di esse, i post caricati non erediteranno gli stili di Elementor e verranno visualizzati come un elenco semplice.
• images_loaded="true" attende che le immagini siano completamente caricate prima di mostrare un nuovo blocco. Questo elimina i salti di layout durante il caricamento.
• offset="2" salta i primi N post. È necessario se alcuni post sono già visualizzati dal widget standard di Elementor (vedi step 4).

Step 3: Wrapper HTML per lo shortcode

Ajax Load More richiede che lo shortcode sia all'interno di un contenitore HTML che replichi la struttura della griglia Elementor. Senza il wrapper, gli stili della griglia non verranno applicati e la magia non funzionerà.

1
<div class="elementor-element-6ba59dc elementor-posts--skin-cards">
2
  <div class="elementor-posts-container elementor-posts elementor-grid elementor-has-item-ratio">
3
    [ajax_load_more post_type="post" posts_per_page="4" 
4
      scroll_container="elementor-grid-2"
5
      transition_container_classes="elementor-posts-container elementor-posts elementor-grid elementor-posts--skin-cards elementor-has-item-ratio"
6
      loading_style="infinite classic"
7
      images_loaded="true"
8
      offset="2"]
9
  </div>
10
</div>

La classe elementor-element-6ba59dc è l'identificatore univoco del TUO widget Posts. Trovalo in DevTools (inizia sempre con elementor-element- e termina con un hash). Questa classe porta con sé tutti gli stili applicati al widget nell'editor di Elementor: margini, ombre, border radius e colori delle card.

Step 4: Preservare gli stili CSS della griglia

Se elimini semplicemente il widget Posts e lasci solo lo shortcode di Ajax Load More, tutti gli stili generati da Elementor scompariranno dal <head> della pagina. La griglia si romperà all'istante.

Un approccio funzionante: lascia il widget Posts sulla pagina con un numero minimo di post (2-3) e imposta offset="2" nello shortcode di Ajax Load More. In questo modo:

• Elementor genera il CSS per i primi due post, quindi gli stili rimangono nel corpo della pagina.
• Ajax Load More recupera i post rimanenti a partire dal terzo, con le stesse classi e gli stessi stili.

Questo approccio ha un inconveniente: ogni volta che modifichi QUALSIASI impostazione del widget Posts nell'editor di Elementor, la classe univoca elementor-element-* viene rigenerata. Devi aggiornarla nel wrapper HTML. Richiede 30 secondi via DevTools, ma non puoi dimenticartene.

Step 5: Posizionarlo sulla pagina

Aggiungi il wrapper HTML con lo shortcode usando il widget «Shortcode» o «Text Editor» in Elementor; entrambi accettano HTML. Posiziona il blocco dove si trovava o sarebbe collocato il widget Posts.

Salva la pagina e aprila nel frontend. Scorri fino in fondo. I post dovrebbero iniziare a caricarsi automaticamente non appena lo scroll raggiunge il contenitore.

Se non funziona, ecco tre controlli rapidi:

• Console del browser (F12 → Console): errori JavaScript in rosso indicheranno conflitti tra plugin o sintassi dello shortcode non corretta.
• Classe scroll_container: confrontala con l'effettiva classe CSS del contenitore sulla pagina. Anche un solo carattere sbagliato (ad esempio, uno spazio invece di un trattino) rompe il trigger dello scroll.
• Ajax Load More → Impostazioni: assicurati che il plugin sia attivo e non bloccato da un plugin di caching (WP Rocket, W3 Total Cache). Le richieste Ajax a volte vengono cachate, quindi aggiungi /wp-admin/admin-ajax.php alle esclusioni.

⁉️🤔 Domande frequenti

Funziona con la versione gratuita di Elementor?

Sì. Ajax Load More non dipende da Elementor Pro. Ha bisogno solo della struttura HTML della griglia, che la versione gratuita fornisce. Copia le classi tramite DevTools e costruisci il template; non sono richieste funzionalità Pro.

È possibile caricare custom post types invece dei soli articoli?

Sì. Nello shortcode, specifica post_type="your_cpt". Ajax Load More funziona con qualsiasi tipo di contenuto pubblico: articoli standard, pagine, prodotti WooCommerce, elementi del portfolio e così via. Ogni tipo ha bisogno del proprio Repeater Template.

I post caricati hanno un aspetto diverso dalla griglia originale. Cosa c'è che non va?

Il problema è quasi sempre in transition_container_classes: hai copiato classi incomplete o hai commesso un errore in una di esse. Apri DevTools, trova il contenitore della griglia originale, copia l'intera stringa delle classi e incollala nello shortcode. Il secondo problema più comune: scroll_container punta all'elemento sbagliato.

Gli add-on Premium di Ajax Load More sono necessari per una configurazione base?

Per lo scroll infinito sugli articoli, no. La versione gratuita è sufficiente. Gli add-on Premium (Elementor Widget Connector, Single Posts, WooCommerce, SEO, Filters) estendono gli scenari: scroll infinito all'interno di singoli articoli, integrazione con filtri, paginazione SEO con URL univoci. Se il tuo progetto cresce e hai bisogno di queste funzionalità, valuta il Pro Bundle.

Perché gli stili della griglia "scompaiono" dai post caricati dopo modifiche in Elementor?

Ogni volta che salvi il widget Post, Elementor rigenera la classe univoca elementor-element-*. Trova la nuova classe in DevTools e sostituiscila nel wrapper HTML dello shortcode. Non c'è modo di automatizzare questa operazione in modo nativo; devi farlo manualmente. Tuttavia, richiede solo circa 30 secondi.

Conviene aspettare lo scroll infinito nativo di Elementor?

Nei sei anni trascorsi dalla pubblicazione delle prime guide su questo tema, il widget Post integrato in Elementor non ha ancora ricevuto lo scroll infinito, né nella versione gratuita né in quella Pro. La paginazione numerata resta l'unica opzione per archivi e griglie di post.

Ajax Load More colma questa lacuna completamente e offre anche di più. Il plugin è attivamente sviluppato: conta oltre 200.000 installazioni attive su WordPress.org, aggiornamenti regolari (l'ultimo meno di un mese fa al momento in cui scriviamo) e più di una dozzina di add-on per diversi scenari. La versione gratuita gestisce scroll infinito, pulsante "Carica altro", caricamento lazy e Repeater Template personalizzati. Questo copre la maggior parte dei progetti Elementor.

Se Elementor gestisce la griglia di post del tuo sito e i tuoi visitatori hanno bisogno dello scroll infinito, costruisci il Repeater Template seguendo le istruzioni sopra. Mezz'ora per la configurazione iniziale e i post si caricheranno senza ricaricare la pagina.

🔗 Ajax Load More su WordPress.org