💡 Cómo configurar el scroll infinito en Elementor con Ajax Load More

• Instale el plugin gratuito Ajax Load More desde el repositorio de WordPress.org y actívelo.
• Copie la estructura HTML de una sola entrada desde la cuadrícula de Elementor usando las DevTools y construya una plantilla de repetidor.
• En el Constructor de Shortcodes, seleccione «Infinite Scroll» como estilo de carga y defina posts_per_page (4-6 para una cuadrícula de 2-3 columnas).
• Añada scroll_container y transition_container_classes con las clases CSS de la cuadrícula de Elementor para que las entradas cargadas hereden los estilos.
• Envuelva el shortcode en un contenedor HTML con la clase única del widget elementor-element-* y coloque el bloque en la página.
• Abra la página en el frontend, desplace hasta el final y verifique que las entradas se cargan al hacer scroll sin recargar la página.

Qué necesitará

Antes de empezar, asegúrese de que dos elementos estén instalados y activos en su sitio:

• Elementor (versión gratuita o Pro), el constructor donde se crea su cuadrícula de entradas.
• Ajax Load More, un plugin gratuito para cargar contenido mediante AJAX. Descárguelo desde WordPress.org

Tenga también a mano la documentación oficial y la página de ejemplos. Hay docenas de fragmentos listos para usar en diferentes escenarios: desde entradas estándar hasta WooCommerce y ACF.

El widget de entradas integrado en Elementor solo ofrece paginación numerada; ni la versión gratuita ni la Pro pueden cargar entradas al hacer scroll. Ajax Load More cubre esta carencia: añade scroll infinito, un botón «Cargar más» y carga diferida, conservando la apariencia de la cuadrícula. La clave es una plantilla de repetidor correcta. Una vez que la construya, las entradas cargadas serán visualmente indistinguibles de las que ya están en la página.

El breve video anterior muestra la integración en acción: las entradas de Elementor se cargan de forma fluida, sin recargas de página ni saltos de maquetación.

Paso 1: Construir una plantilla de repetidor para la cuadrícula de Elementor

La parte más importante es transferir correctamente la estructura HTML de una sola entrada desde Elementor a la plantilla de Ajax Load More. Si la plantilla no coincide con la maquetación real, las entradas cargadas se «desmoronarán»: los márgenes se desplazarán, las tarjetas desaparecerán y la cuadrícula se romperá.

Abra la página con la cuadrícula en su navegador, pulse F12 (DevTools), vaya a la pestaña Elements y localice el nodo DOM de una sola entrada. Necesita el HTML COMPLETO de un elemento, desde la etiqueta de apertura <article> o <div class="elementor-post"> hasta la etiqueta de cierre.

Una plantilla básica para una cuadrícula de Elementor (dos columnas, skin Cards) tiene este aspecto:

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

Guarde la plantilla en el panel de administración: Ajax Load More → Repeater Templates, haga clic en «Add New». Asígnele un nombre descriptivo, por ejemplo, «Elementor Grid 2 Columns».

A qué debe prestar atención:

• Las clases elementor-post, elementor-post__card y elementor-post__thumbnail son clases «nativas» de Elementor. Garantizan que las entradas cargadas coincidan visualmente con la cuadrícula original.
• the_post_thumbnail('alm-thumbnail') utiliza el tamaño de miniatura registrado por el plugin Ajax Load More. Si su tema tiene un tamaño personalizado registrado, sustituya alm-thumbnail por ese.
• <?php the_ID(); ?> en la clase del <article> asigna a cada entrada un identificador único, útil para aplicar estilos CSS específicos.

Importante: las clases pueden variar según el skin del widget de Entradas (Classic, Cards, Full Content). Tome las clases DE SU PROPIO marcado en lugar de copiar el código anterior tal cual. Todo debe coincidir, incluidos el orden y los espacios.

Paso 2: Construir el shortcode de Ajax Load More

Vaya a Ajax Load More → Shortcode Builder. El constructor visual generará un shortcode basado en sus parámetros:

• Post Type: post (o su tipo de contenido personalizado).
• Posts per Page: cuántas entradas cargar por iteración. Para una cuadrícula de 2 o 3 columnas, use de 4 a 6.
• Loading Style: Infinite Scroll (desplazamiento infinito). Alternativas: botón «Load More», carga diferida (lazy load).
• Container Type: div.
• Transition: animación para las nuevas entradas: Fade, Slide o None.

Un shortcode básico tendrá un aspecto similar a este:

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

Para la integración con Elementor, dos parámetros adicionales son críticos: scroll_container y transition_container_classes. Ellos «vinculan» la salida de Ajax Load More a la cuadrícula CSS de 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"]

Parámetros clave explicados:

• scroll_container="elementor-grid-2" es el contenedor de la cuadrícula de dos columnas. Para tres columnas, cámbielo a elementor-grid-3; para cuatro, use elementor-grid-4.
• transition_container_classes="..." incluye TODAS las clases CSS del contenedor de la cuadrícula copiadas desde DevTools. Sin ellas, las entradas cargadas no heredarán los estilos de Elementor y se mostrarán como una lista simple.
• images_loaded="true" espera a que las imágenes se carguen completamente antes de mostrar un nuevo bloque. Esto elimina los saltos de maquetación durante la carga.
• offset="2" omite las primeras N entradas. Esto es necesario si algunas entradas ya son mostradas por el widget estándar de Elementor (vea el paso 4).

Paso 3: Contenedor HTML para el shortcode

Ajax Load More requiere que el shortcode esté dentro de un contenedor HTML que replique la estructura de la cuadrícula de Elementor. Sin el contenedor, los estilos de la cuadrícula no se aplicarán y la magia no funcionará.

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 clase elementor-element-6ba59dc es el identificador único de SU widget de Entradas. Encuéntrelo en DevTools (siempre empieza por elementor-element- y termina con un hash). Esta clase contiene todos los estilos aplicados al widget en el editor de Elementor: márgenes, sombras, radios de borde y colores de las tarjetas.

Paso 4: Conservar los estilos CSS de la cuadrícula

Si simplemente elimina el widget de Entradas y deja solo el shortcode de Ajax Load More, todos los estilos generados por Elementor desaparecerán del <head> de la página. La cuadrícula se romperá al instante.

Un enfoque que funciona: deje el widget de Entradas en la página con un número mínimo de entradas (2-3) y establezca offset="2" en el shortcode de Ajax Load More. De este modo:

• Elementor genera el CSS para las dos primeras entradas, por lo que los estilos permanecen en el cuerpo de la página.
• Ajax Load More recoge las entradas restantes a partir de la tercera, con las mismas clases y estilos.

Este enfoque tiene una desventaja: cada vez que cambie CUALQUIER ajuste en el widget de Entradas dentro del editor de Elementor, la clase única elementor-element-* se regenera. Deberá actualizarla en el contenedor HTML. Lleva 30 segundos mediante DevTools, pero no puede olvidarse de hacerlo.

Paso 5: Colocarlo en la página

Añada el contenedor HTML con el shortcode usando el widget «Shortcode» o «Text Editor» en Elementor; ambos aceptan HTML. Coloque el bloque donde estaba o estaría ubicado el widget de Entradas.

Guarde la página y ábrala en el frontend. Desplácese hasta el final. Las entradas deberían empezar a cargarse automáticamente en cuanto el desplazamiento alcance el contenedor.

Si no funciona, aquí tiene tres comprobaciones rápidas:

• Consola del navegador (F12 → Consola): los errores rojos de JavaScript indicarán conflictos de plugins o una sintaxis incorrecta del shortcode.
• Clase scroll_container: compárela con la clase CSS real del contenedor en la página. Incluso un error de un solo carácter (por ejemplo, un espacio en lugar de un guion) rompe el activador del desplazamiento.
• Ajax Load More → Ajustes: asegúrese de que el plugin esté activo y no esté bloqueado por un plugin de caché (WP Rocket, W3 Total Cache). Las peticiones Ajax a veces se cachean, así que añada /wp-admin/admin-ajax.php a las exclusiones.

⁉️🤔 Preguntas frecuentes

¿Esto funciona con la versión gratuita de Elementor?

Sí. Ajax Load More no depende de Elementor Pro. Solo necesita la estructura HTML de la cuadrícula, que la versión gratuita proporciona. Copie las clases mediante DevTools y construya la plantilla; no se requieren funciones Pro.

¿Se pueden cargar custom post types en lugar de solo entradas?

Sí. En el shortcode, especifique post_type="your_cpt". Ajax Load More funciona con cualquier tipo de contenido público: entradas estándar, páginas, productos de WooCommerce, elementos de portafolio, etc. Cada tipo necesita su propia Plantilla de Repetidor.

Las entradas cargadas se ven diferentes de la cuadrícula original. ¿Qué está mal?

El problema casi siempre está en transition_container_classes: copió clases incompletas o cometió un error en una de ellas. Abra DevTools, encuentre el contenedor de la cuadrícula original, copie la cadena de clase completa y péguela en el shortcode. El segundo problema más común: scroll_container apunta al elemento equivocado.

¿Se requieren los complementos Premium de Ajax Load More para una configuración básica?

Para el desplazamiento infinito en entradas, no. La versión gratuita es suficiente. Los complementos Premium (Elementor Widget Connector, Single Posts, WooCommerce, SEO, Filters) amplían los escenarios: desplazamiento infinito dentro de entradas individuales, integración de filtros, paginación SEO con URL únicas. Si su proyecto crece y necesita estas funciones, considere el Pro Bundle.

¿Por qué los estilos de la cuadrícula «desaparecen» de las entradas cargadas después de editar en Elementor?

Cada vez que guarda el widget de Entradas, Elementor regenera la clase única elementor-element-*. Encuentre la nueva clase en DevTools y reemplácela en el envoltorio HTML del shortcode. No hay forma de automatizar esto de serie; debe hacerlo manualmente. Sin embargo, solo toma unos 30 segundos.

¿Debería esperar el desplazamiento infinito nativo de Elementor?

En los seis años transcurridos desde que se publicaron las primeras guías sobre este tema, el widget de Entradas integrado en Elementor aún no ha recibido desplazamiento infinito ni en la versión gratuita ni en la Pro. La paginación numerada sigue siendo la única opción para archivos y cuadrículas de entradas.

Ajax Load More cubre esta carencia por completo y va más allá. El plugin se desarrolla activamente: tiene más de 200 000 instalaciones activas en WordPress.org, actualizaciones periódicas (la última, hace menos de un mes al momento de escribir esto) y más de una docena de complementos para diferentes escenarios. La versión gratuita maneja desplazamiento infinito, un botón «Cargar más», carga diferida y Plantillas de Repetidor personalizadas. Esto cubre la mayoría de los proyectos de Elementor.

Si Elementor gestiona la cuadrícula de entradas en su sitio y sus visitantes necesitan desplazamiento infinito, construya la Plantilla de Repetidor siguiendo las instrucciones anteriores. Media hora para la configuración inicial y las entradas se cargarán sin recargar la página.

🔗 Ajax Load More en WordPress.org