El Loop Builder de Elementor crea listados dinámicos sin plugins extra: la grilla de entradas, productos o contenidos personalizados donde cada tarjeta se diseña una vez como plantilla y se repite automática por cada elemento, el motor de listados que Elementor Pro trae integrado y que reemplaza a los plugins de grids que antes se instalaban aparte, la consolidación del stack de esta serie aplicada a los listados, con el flujo completo de esta guía, la plantilla del loop diseñada, la grilla configurada con su consulta, la paginación y los filtros sumados, y el caso real como evidencia, el listado de puestos de trabajo de kom.pe construido con esta técnica, [DATO-KOM: el detalle del caso del listado de jobs de kom.pe, los 28 puestos con su configuración de loop], la función que convierte al constructor en herramienta de catálogos sin tocar código.
Tabla de Contenidos
¿Qué es el Loop Builder y cuándo usarlo?
El Loop Builder es el motor de repetición del constructor: la plantilla de tarjeta diseñada visualmente, el título, la imagen, los datos dinámicos colocados una vez, y la grilla que la repite por cada elemento de la consulta, las entradas del blog, los productos de la tienda, los contenidos personalizados del sitio, el patrón de diseño único multiplicado que todo listado necesita, y sus casos de uso cubren lo que antes pedía plugins, el blog con tarjetas a medida en lugar del listado del tema, el catálogo de servicios presentado como grilla viva, los portafolios, los directorios, los listados de propiedades del rubro inmobiliario, las bolsas de trabajo como el caso de esta guía, cada colección del sitio mostrada con diseño propio. La ventaja de consolidación se subraya con esta serie: el plugin de grids ahorrado, el peso evitado, la guía de DOM de esta serie aplicada desde el diseño de la tarjeta, la plantilla liviana que multiplicada por veinte items sigue siendo razonable, el rendimiento pensado antes de repetir. El marco vive en qué es Elementor y cómo funciona y el servicio en diseño web.
Paso 1: diseña la plantilla del loop, la tarjeta maestra
La plantilla del loop se crea desde el constructor de temas: el tipo de plantilla de loop elegido, el lienzo de la tarjeta individual abierto, el contenedor único como base, la estructura mínima de esta serie, y los elementos dinámicos colocados, la imagen destacada del item, el título enlazado a su página, los campos que la colección tenga, la fecha, la categoría, el extracto, los datos personalizados donde existan, cada pieza conectada a su etiqueta dinámica, el diseño que se alimenta solo del contenido real. Las reglas de la tarjeta cuidan el conjunto: el presupuesto de nodos de esta serie aplicado, la tarjeta de quince nodos contra la de cuarenta multiplicada por el listado entero, las imágenes con sus tamaños correctos, el recorte uniforme que la grilla agradece, la dieta de esta serie aplicada a las miniaturas, y la previsualización con contenido real, la tarjeta probada con el título largo y el corto, la imagen vertical y la horizontal, los casos reales que romperán el diseño descuidado, la tarjeta maestra que aguanta la variedad de su colección antes de multiplicarse.
Paso 2: configura la grilla y su consulta
La grilla del loop se inserta donde el listado vivirá: el widget de grilla de loop en la página, la plantilla recién creada seleccionada como su tarjeta, y la consulta configurada, el corazón del paso, qué elementos muestra la grilla, el tipo de contenido elegido, las entradas, los productos, el contenido personalizado del caso, los filtros de la consulta aplicados, las categorías incluidas o excluidas, el orden definido, lo más reciente primero, el orden manual donde la curaduría mande, la cantidad por página dimensionada con criterio de rendimiento, las decenas moderadas sobre el centenar de golpe. El diseño de la grilla completa el cuadro: las columnas por dispositivo, las tres o cuatro de escritorio bajando a una en el celular, los espaciados consistentes con el sistema del sitio, y el caso real ilustra el conjunto, [DATO-KOM: la configuración del listado de jobs de kom.pe, el tipo de contenido de los puestos, su consulta y su grilla, las decisiones de diseño del caso], el listado profesional que opera solo, los puestos publicados apareciendo en la grilla sin que nadie toque el diseño, la promesa del loop cumplida, el contenido fluye y la presentación se mantiene.
Paso 3: suma paginación, filtros y los detalles de producción
La paginación llega con el volumen: las opciones del widget activadas cuando el listado crece, los números de página, el cargar más, el scroll infinito evaluado con criterio, la paginación clásica como la opción amable con el SEO de esta serie, las páginas numeradas que los rastreadores recorren, y los filtros elevan la experiencia, la taxonomía como filtro donde el contenido la tenga, las categorías de puestos, los tipos de propiedad, los filtros nativos del widget o la combinación con los del archivo según el caso, el listado que el usuario acota sin recargar la página completa donde la función lo soporte. Los detalles de producción cierran el estándar: los estados vacíos diseñados, el mensaje cuando la consulta no devuelve items, el sin resultados que no parezca error, el rendimiento verificado con esta serie, la grilla medida en el celular real, las imágenes del listado en su dieta, el lazy de las tarjetas bajo el pliegue, y el SEO del listado atendido, la página de la grilla con su título y su texto introductorio, el listado como página real y no como colección flotante, los detalles que separan el loop de demo del listado de producción que el caso de esta guía opera a diario.
Los errores típicos del loop y sus correcciones
Los tropiezos del loop se repiten y se evitan: la tarjeta obesa primero, el diseño de cuarenta nodos multiplicado por la grilla entera, el DOM de esta serie inflado de golpe, la corrección en la plantilla y no en la grilla, la consulta sin filtrar segunda, la grilla que muestra todo el contenido mezclado porque nadie acotó la consulta, las categorías y exclusiones definidas, las imágenes sin uniformar tercera, las miniaturas de proporciones mixtas que rompen la grilla, el recorte consistente configurado, y el abuso del scroll infinito cuarto, el listado sin paginación real que el SEO no recorre y el usuario no termina.
La verificación final del loop es de producción: la grilla con contenido real completo, el celular como banco de pruebas, los estados límite revisados, el item único, la página vacía, el título kilométrico. El loop bien construido es infraestructura: se configura una vez y sirve años, exactamente el tipo de pieza que vale hacer bien a la primera.
Preguntas frecuentes
¿El Loop Builder reemplaza a los plugins de tablas y grids?
Para la mayoría de listados visuales, sí: las grillas de contenidos, los catálogos, los portafolios cubiertos nativo, el plugin extra ahorrado con su peso, y los casos de tablas de datos puras con búsqueda compleja aún evalúan herramientas específicas. La regla del stack: el nativo primero, el plugin solo cuando la función exceda lo que el loop da.
¿Funciona con contenido personalizado o solo con entradas?
Funciona con las colecciones del sitio: las entradas y productos de fábrica, los tipos de contenido personalizado donde existan, los puestos del caso de esta guía, las propiedades, los proyectos, con sus campos mostrados vía etiquetas dinámicas. La dupla con los campos personalizados es natural: la colección estructurada más la tarjeta dinámica, el patrón de los sitios con catálogos serios.
¿Cuántos items por página aguanta bien una grilla?
El rendimiento manda sobre el deseo: las decenas moderadas por página con paginación, la tarjeta liviana multiplicada que esta serie presupuesta en nodos, las imágenes en dieta, y el celular como juez, la grilla probada en el dispositivo real. El listado enorme de una sola carga es el error clásico: la paginación existe exactamente para eso.
¿KOM construye estos listados en sus proyectos?
Es técnica estándar del stack: las grillas de loop para blogs, catálogos y casos como el listado de puestos de la propia casa, el diseño con presupuesto de rendimiento, dentro de los proyectos cotizados en el cotizador online con los precios públicos de siempre. El caso de jobs es la demo viva: el loop operando en producción en el propio sitio.
Tu siguiente paso: identifica tu listado candidato, la colección de tu sitio que hoy se muestra con el diseño del tema o con un plugin pesado, y prototipa su tarjeta de loop, la hora de constructor que estrena la técnica. El proyecto completo se cotiza en el cotizador online: los listados dinámicos sin plugins extra son exactamente el tipo de consolidación que el stack predica, y el Loop Builder es la herramienta que la cumple.
