💡 Comment configurer le défilement infini dans Elementor avec Ajax Load More

• Installez le plugin gratuit Ajax Load More depuis le dépôt WordPress.org et activez-le.
• Copiez la structure HTML d’un article unique depuis la grille Elementor à l’aide des DevTools et construisez un modèle de répéteur (Repeater Template).
• Dans le Shortcode Builder, sélectionnez «Infinite Scroll» comme style de chargement et définissez posts_per_page (4 à 6 pour une grille de 2 ou 3 colonnes).
• Ajoutez scroll_container et transition_container_classes avec les classes CSS de la grille Elementor afin que les articles chargés héritent des styles.
• Enveloppez le shortcode dans un conteneur HTML portant la classe unique elementor-element-* du widget et placez le bloc sur la page.
• Ouvrez la page en frontend, faites défiler jusqu’en bas et vérifiez que les articles se chargent au défilement sans rafraîchissement de la page.

Ce dont vous aurez besoin

Avant de commencer, assurez-vous que deux éléments sont installés et activés sur votre site:

• Elementor (version gratuite ou Pro), le constructeur dans lequel votre grille d’articles est créée.
• Ajax Load More, un plugin gratuit pour charger du contenu via AJAX. Télécharger depuis WordPress.org

Gardez également à portée de main la documentation officielle et la page d’exemples. Vous y trouverez des dizaines d’extraits prêts à l’emploi pour différents scénarios: des articles standards à WooCommerce en passant par ACF.

Le widget Articles intégré d’Elementor ne propose qu’une pagination numérotée; ni la version gratuite ni la version Pro ne peuvent charger des articles au défilement. Ajax Load More comble cette lacune: il ajoute le défilement infini, un bouton «Charger plus» et le chargement différé tout en préservant l’apparence de la grille. La clé réside dans un Repeater Template correct. Une fois celui-ci construit, les articles chargés sont visuellement indiscernables de ceux déjà présents sur la page.

La courte vidéo ci-dessus montre l’intégration en action: les articles Elementor se chargent de manière fluide, sans rafraîchissement de page ni saut de mise en page.

Étape 1: Construire un Repeater Template pour la grille Elementor

La partie la plus importante consiste à transférer correctement la structure HTML d’un article unique depuis Elementor dans le modèle d’Ajax Load More. Si le modèle ne correspond pas à la mise en page réelle, les articles chargés «se déstructureront»: les marges se décaleront, les cartes disparaîtront et la grille se cassera.

Ouvrez la page contenant la grille dans votre navigateur, appuyez sur F12 (DevTools), allez dans l’onglet Éléments et trouvez le nœud DOM d’un article unique. Vous avez besoin du HTML COMPLET d’un élément, de la balise ouvrante <article> ou <div class="elementor-post"> jusqu’à la balise fermante.

Un template de base pour une grille Elementor (deux colonnes, skin Cartes) ressemble à ceci:

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

Enregistrez le template dans le panneau d'administration: Ajax Load More → Repeater Templates, cliquez sur «Add New». Donnez-lui un nom explicite, par exemple «Elementor Grid 2 Columns».

Points d'attention:

• Les classes elementor-post, elementor-post__card et elementor-post__thumbnail sont des classes «natives» d'Elementor. Elles garantissent que les posts chargés correspondent visuellement à la grille d'origine.
• the_post_thumbnail('alm-thumbnail') utilise la taille de miniature enregistrée par le plugin Ajax Load More. Si votre thème a une taille personnalisée, remplacez alm-thumbnail par celle-ci.
• <?php the_ID(); ?> dans la classe de <article> donne à chaque post un identifiant unique, utile pour le ciblage CSS.

Important: les classes peuvent différer selon le skin du widget Posts (Classic, Cards, Full Content). Reprenez les classes DE VOTRE PROPRE balisage plutôt que de copier le code ci-dessus tel quel. Tout doit correspondre, y compris l'ordre et l'espacement.

Étape 2: Construire le shortcode Ajax Load More

Allez dans Ajax Load More → Shortcode Builder. Le constructeur visuel va générer un shortcode basé sur vos paramètres:

• Post Type: post (ou votre type de post personnalisé).
• Posts per Page: combien de posts charger par itération. Pour une grille de 2 à 3 colonnes, utilisez 4 à 6.
• Loading Style: Infinite Scroll (défilement infini). Alternatives: bouton «Load More», lazy load.
• Container Type: div.
• Transition: animation pour les nouveaux posts: Fade, Slide ou None.

Un shortcode de base ressemblera à ceci:

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..."]

Pour l'intégration avec Elementor, deux paramètres supplémentaires sont critiques: scroll_container et transition_container_classes. Ils «lient» la sortie d'Ajax Load More à la grille CSS d'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"]

Paramètres clés expliqués:

• scroll_container="elementor-grid-2" est le conteneur de la grille à deux colonnes. Pour trois colonnes, passez à elementor-grid-3; pour quatre, utilisez elementor-grid-4.
• transition_container_classes="..." inclut TOUTES les classes CSS du conteneur de la grille copiées depuis les DevTools. Sans elles, les posts chargés n'hériteront pas des styles Elementor et s'afficheront comme une simple liste.
• images_loaded="true" attend que les images soient complètement chargées avant d'afficher un nouveau bloc. Cela élimine les sauts de mise en page pendant le chargement.
• offset="2" saute les N premiers posts. C'est nécessaire si certains posts sont déjà affichés par le widget Elementor standard (voir étape 4).

Étape 3: Wrapper HTML pour le shortcode

Ajax Load More exige que le shortcode soit à l'intérieur d'un conteneur HTML qui reproduit la structure de la grille Elementor. Sans ce wrapper, les styles de la grille ne s'appliqueront pas et la magie ne fonctionnera pas.

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 est l'identifiant unique de VOTRE widget Posts. Trouvez-la dans les DevTools (elle commence toujours par elementor-element- et se termine par un hash). Cette classe porte tous les styles appliqués au widget dans l'éditeur Elementor: marges, ombres, rayons de bordure et couleurs des cartes.

Étape 4: Préserver les styles CSS de la grille

Si vous supprimez simplement le widget Posts et ne laissez que le shortcode Ajax Load More, tous les styles générés par Elementor disparaîtront du <head> de la page. La grille se cassera instantanément.

Une approche qui fonctionne: laissez le widget Posts sur la page avec un nombre minimal de posts (2 à 3), et définissez offset="2" dans le shortcode Ajax Load More. De cette façon:

• Elementor génère le CSS pour les deux premiers posts, donc les styles restent dans le corps de la page.
• Ajax Load More récupère les posts restants à partir du troisième, avec les mêmes classes et styles.

Cette approche a un inconvénient: chaque fois que vous modifiez UN paramètre du widget Posts dans l'éditeur Elementor, la classe unique elementor-element-* est régénérée. Vous devez la mettre à jour dans le wrapper HTML. Cela prend 30 secondes via les DevTools, mais vous ne pouvez pas l'oublier.

Étape 5: Placement sur la page

Ajoutez le wrapper HTML avec le shortcode en utilisant le widget «Shortcode» ou «Text Editor» dans Elementor; les deux acceptent le HTML. Placez le bloc là où le widget Posts se trouvait ou aurait dû se trouver.

Enregistrez la page et ouvrez-la en frontend. Faites défiler jusqu'en bas. Les posts devraient commencer à se charger automatiquement dès que le défilement atteint le conteneur.

Si cela ne fonctionne pas, voici trois vérifications rapides:

• Console du navigateur (F12 → Console): les erreurs JavaScript en rouge indiqueront des conflits de plugins ou une syntaxe de shortcode cassée.
• Classe scroll_container: comparez-la à la classe CSS réelle du conteneur sur la page. Une seule erreur de caractère (par exemple, un espace au lieu d'un tiret) casse le déclencheur de défilement.
• Ajax Load More → Réglages: assurez-vous que le plugin est actif et n'est pas bloqué par un plugin de cache (WP Rocket, W3 Total Cache). Les requêtes Ajax sont parfois mises en cache, ajoutez donc /wp-admin/admin-ajax.php aux exclusions.

⁉️🤔 Foire aux questions

Est-ce que cela fonctionne avec la version gratuite d’Elementor?

Oui. Ajax Load More ne dépend pas d’Elementor Pro. Il a seulement besoin de la structure HTML de la grille, que la version gratuite fournit. Copiez les classes via les DevTools et construisez le template; aucune fonctionnalité Pro n’est requise.

Peut-on charger des types de publication personnalisés au lieu des seuls articles?

Oui. Dans le shortcode, spécifiez post_type="your_cpt". Ajax Load More fonctionne avec tout type de publication public: articles standards, pages, produits WooCommerce, éléments de portfolio, etc. Chaque type nécessite son propre Repeater Template.

Les articles chargés ont un aspect différent de la grille d’origine. D’où vient le problème?

Le problème vient presque toujours de transition_container_classes: vous avez copié des classes incomplètes ou commis une erreur dans l’une d’elles. Ouvrez les DevTools, trouvez le conteneur de la grille d’origine, copiez la chaîne complète des classes et collez-la dans le shortcode. Le deuxième problème le plus fréquent: scroll_container pointe vers le mauvais élément.

Les add-ons Premium d’Ajax Load More sont-ils nécessaires pour une configuration de base?

Pour le défilement infini sur des articles, non. La version gratuite est suffisante. Les add-ons Premium (Elementor Widget Connector, Single Posts, WooCommerce, SEO, Filters) étendent les scénarios: défilement infini au sein d’un article unique, intégration de filtres, pagination SEO avec des URL uniques. Si votre projet évolue et que vous avez besoin de ces fonctionnalités, intéressez-vous au Pro Bundle.

Pourquoi les styles de la grille «disparaissent-ils» des articles chargés après des modifications dans Elementor?

Chaque fois que vous enregistrez le widget Posts, Elementor régénère la classe unique elementor-element-*. Trouvez la nouvelle classe dans les DevTools et remplacez-la dans l’enveloppe HTML du shortcode. Il n’y a aucun moyen d’automatiser cela de manière native; vous devez le faire manuellement. Cela ne prend toutefois qu’une trentaine de secondes.

Faut-il attendre un défilement infini natif de la part d’Elementor?

Au cours des six années écoulées depuis la publication des premiers guides sur ce sujet, le widget Posts intégré d’Elementor n’a toujours pas reçu de défilement infini, ni dans la version gratuite ni dans la version Pro. La pagination numérotée reste la seule option pour les archives et les grilles d’articles.

Ajax Load More comble cette lacune complètement, et même au-delà. Le plugin est activement développé: il compte plus de 200 000 installations actives sur WordPress.org, des mises à jour régulières (la dernière datant de moins d’un mois au moment où nous écrivons ces lignes) et plus d’une douzaine d’add-ons pour différents scénarios. La version gratuite gère le défilement infini, un bouton «Charger plus», le chargement différé et les Repeater Templates personnalisés. Cela couvre la plupart des projets Elementor.

Si Elementor gère la grille d’articles de votre site et que vos visiteurs ont besoin d’un défilement infini, construisez le Repeater Template en suivant les instructions ci-dessus. Une demi-heure pour la configuration initiale, et les articles se chargeront sans rafraîchissement de la page.

🔗 Ajax Load More sur WordPress.org