4.2Loop Builder: rejillas de entradas y productos
Lo esencial en 30 segundos
- El Loop Builder (Pro) permite dibujar una sola tarjeta (loop item) repetida para cada elemento.
- Se diseña la tarjeta con contenido dinámico (imagen, título, campos), y luego se muestra como rejilla/lista.
- Ideal para listas homogéneas: trabajos, entradas, productos — ordenables/filtrables.
Hilo conductor — Nadia construye la galería
El carpintero tiene ahora 20 trabajos estructurados (4.1). Nadia quiere una bonita galería. Con el Loop Builder, dibuja una tarjeta tipo (foto + título + madera + plazo), y Elementor la repite para cada trabajo, en rejilla. Una sola tarjeta que cuidar, 20 fichas mostradas automáticamente.
Continúa 4.1 — mostrar en masa datos estructurados.
1. Una tarjeta, repetida
El Loop Builder (Pro) invierte la lógica: en lugar de colocar 20 tarjetas, se dibuja una sola tarjeta modelo (el "loop item") con contenido dinámico (imagen destacada, título, campos personalizados). Elementor la repite luego automáticamente para cada elemento de la lista.
Nadia cuida una tarjeta (foto + título + madera + plazo): todos los trabajos se muestran en ese mismo formato, impecablemente.
2. Rejilla, lista, filtros
Luego se muestran esas tarjetas en rejilla o en lista, con paginación. Los datos estructurados (4.1) permiten ordenar (por fecha, por tipo) y a veces filtrar. El mismo principio vale para los productos de una tienda (ver 4.3).
Ventaja: modificar la presentación = modificar una tarjeta, y toda la rejilla se actualiza. Mantenimiento mínimo para un resultado profesional.
🔎 Ejemplo concreto — Galería de trabajos (caso Nadia)
Loop item: [Foto] [Título] [Madera] [Plazo] + enlace a la ficha.
Visualización: rejilla de 3 columnas, orden por fecha, paginación.
→ 20 trabajos mostrados automáticamente.
→ Cambiar la tarjeta (p. ej. añadir las dimensiones) = toda la rejilla sigue.Resultado: una galería profesional, mantenida mediante una sola tarjeta.
Lección: diseñar la tarjeta, dejar la repetición al Loop Builder.
Vocabulario de la sección
- Loop Builder (Pro)
- La herramienta para diseñar una tarjeta repetida (loop item) mostrada para cada elemento.
Ejemplo sencillo: una tarjeta de trabajo repetida en rejilla.
Lo que no es: colocar manualmente una tarjeta por elemento.
Reflejo: lista homogénea → Loop Builder.
- Loop item (tarjeta modelo)
- La tarjeta única, dinámica, repetida para cada entrada/producto.
Ejemplo sencillo: foto + título + madera + plazo.
Lo que no es: una tarjeta fija con valores fijos.
Reflejo: cuidar una tarjeta, no veinte.
- Rejilla / lista
- La visualización de las tarjetas repetidas, con orden y paginación.
Ejemplo sencillo: rejilla de 3 columnas de los trabajos.
Lo que no es: una página larga sin estructura.
Reflejo: elegir rejilla o lista según el contenido.
- Orden / filtro
- Ordenar o filtrar las tarjetas gracias a los datos estructurados.
Ejemplo sencillo: ordenar por fecha, filtrar por tipo de madera.
Lo que no es: un orden aleatorio no controlado.
Reflejo: datos estructurados → orden/filtro posibles.
- Mantenimiento centralizado
- Modificar la tarjeta actualiza toda la rejilla.
Ejemplo sencillo: añadir las dimensiones a la tarjeta = en todas partes.
Lo que no es: editar cada tarjeta una a una.
Reflejo: un cambio de presentación = una sola tarjeta.
En la práctica — Construir una rejilla dinámica
- Diseña un loop item (tarjeta) con contenido dinámico (imagen, título, campos).
- Muestra esas tarjetas en rejilla y ajusta el número de columnas.
- Añade un orden (por fecha) y una paginación.
- Modifica la tarjeta y comprueba que toda la rejilla se actualiza.
Guion listo para decir — presentar la galería al cliente (20 s)
"Todos sus trabajos se muestran en una bonita galería. Solo he diseñado una tarjeta tipo: cuando añade un trabajo, aparece automáticamente, en el mismo formato. Y si quiere cambiar la presentación, modifico una tarjeta y toda la galería sigue."
Subrayar la automatización y el mantenimiento en un punto.
Plantilla para copiar y pegar — plan Loop
LOOP ITEM (tarjeta): imagen ___ título ___ campos ___ enlace ___
VISUALIZACIÓN: rejilla (___ columnas) / lista · paginación: sí / no
ORDEN: por fecha / por campo ___ FILTRO: sí / no
PRUEBA (añadir un elemento aparece automáticamente): hecha / por hacerTrabajos
Rejilla de tarjetas foto + datos, ordenada por fecha.
Entradas
Loop de los últimos consejos en la página de inicio.
Productos
Mismo principio para la tienda (ver 4.3).
Móvil
Rejilla que pasa a una columna en móvil (responsive).
✓ Buenas prácticas
- Diseñar una sola tarjeta cuidada (loop item).
- Aprovechar los datos estructurados para ordenar/filtrar.
- Comprobar el responsive de la rejilla.
✗ Errores frecuentes
- Colocar una tarjeta por elemento a mano.
- Poner valores fijos en la tarjeta.
- Olvidar el resultado móvil de la rejilla.
Puntos clave
- Loop Builder = una tarjeta repetida automáticamente.
- Loop item dinámico (imagen, título, campos).
- Rejilla/lista ordenable y filtrable.
- Modificar la tarjeta actualiza toda la rejilla.
Reto 48h — aplica mañana
Diseña un loop item (tarjeta dinámica) y muestra una rejilla de entradas o trabajos con orden por fecha. Modifica la tarjeta y constata la actualización global. 30 minutos.
- Diseño una tarjeta repetida (loop item).
- La muestro en rejilla/lista ordenable.
- Mantengo todo mediante una sola tarjeta.
Preguntas frecuentes
¿Qué es un loop item?
La tarjeta modelo que se diseña una sola vez en el Loop Builder, con contenido dinámico; Elementor la repite para cada entrada o producto.
¿Puedo ordenar o filtrar la rejilla?
Sí, gracias a los datos estructurados (campos): se puede ordenar (por fecha, por campo) y a veces filtrar. Ese es todo el interés de estructurar los datos en 4.1.
¿Funciona el Loop Builder para los productos?
Sí: el mismo principio se aplica a los productos de una tienda WooCommerce (ver 4.3) — una tarjeta de producto repetida en rejilla.
El carpintero tiene 20 trabajos estructurados. ¿Cómo muestra Nadia una galería mantenible?