La llegada de Divi 5 está marcando un antes y un después en el diseño web con WordPress. Una de las funcionalidades que más me ha sorprendido y que considero revolucionaria es el Loop Builder, una herramienta que abre un mundo de posibilidades a la hora de mostrar contenidos dinámicos.

Si antes estábamos limitados a módulos predefinidos como el Blog o el Portfolio, ahora tenemos la capacidad de construir desde cero nuestras propias plantillas de bucle para mostrar cualquier tipo de contenido: posts, proyectos, productos de WooCommerce o incluso Custom Post Types personalizados.

En este artículo te voy a explicar en detalle cómo funciona el Loop Builder, qué ventajas ofrece, ejemplos de uso práctico y por qué considero que es un cambio radical en la forma de trabajar con Divi.

Qué es el Loop Builder en Divi 5

El Loop Builder es una nueva funcionalidad de Divi 5 que nos permite diseñar de manera completamente personalizada cómo se van a mostrar los contenidos repetitivos de un sitio web.

En términos sencillos, el “loop” es el sistema que usa WordPress para recorrer y mostrar los posts, páginas o cualquier otro contenido dinámico. Con el Loop Builder, Divi nos da el control total de cómo se va a visualizar cada elemento dentro de ese bucle.

Esto significa que ya no estamos limitados a la apariencia del módulo de blog estándar o del módulo de portfolio, sino que podemos crear una tarjeta única con los elementos que queramos (imagen, título, fecha, extracto, botón, etc.) y luego aplicarla a todos los posts o al contenido dinámico que seleccionemos.

⭐️ Consejo práctico: empieza por duplicar un diseño sencillo de tarjeta para posts y luego añade variaciones de estilo con Flexbox o Grid. Esto te ahorrará mucho tiempo y mantendrá la coherencia en todo tu sitio.

Principales ventajas del Loop Builder

Personalización total

Podemos definir cómo se ve cada tarjeta en un grid de posts, proyectos o productos. Ya no dependemos de un diseño genérico.

Compatibilidad con Custom Post Types

El Loop Builder no se limita al blog. Cualquier CPT que tengas instalado en tu WordPress se puede mostrar con esta función: cursos, directorios, reseñas, testimonios, etc.

Integración con Flexbox y Grid

Gracias a las mejoras de Divi 5, podemos usar Flexbox para organizar el contenido o crear estructuras más complejas sin necesidad de CSS adicional.

Ahorro de tiempo

Una vez diseñado un loop, solo tenemos que aplicarlo a cualquier tipo de contenido y todos los ítems se mostrarán con la misma estructura.

Escalabilidad

Si en el futuro decides cambiar un diseño, basta con modificar la plantilla del loop y automáticamente se actualizará en todas las páginas donde esté aplicado.

Cómo funciona el Loop Builder paso a paso

Paso 1: Crear una tarjeta personalizada

Primero, diseña una tarjeta dentro de Divi. Por ejemplo, para un post de blog podrías incluir:

• Imagen destacada.
• Título dinámico.
• Extracto del contenido.
• Fecha de publicación.
• Botón de “Leer más”.

Paso 2: Activar el Loop

Cuando termines la tarjeta, solo tienes que activar la opción Loop Builder para que Divi entienda que este diseño se repetirá en función del contenido dinámico que selecciones.

Paso 3: Configurar el grid

Elige cuántas columnas quieres mostrar, cuántos elementos por página y si quieres activar paginación. Aquí es donde Flexbox se vuelve clave, ya que puedes crear grids muy flexibles y responsivos.

Paso 4: Seleccionar el contenido

Decide qué contenido se va a mostrar en ese loop: posts, proyectos, productos de WooCommerce o un Custom Post Type creado por ti.

Paso 5: Probar en diferentes dispositivos

No olvides comprobar cómo se ve el diseño en escritorio, tablet y móvil. El Loop Builder permite personalizar la distribución para cada dispositivo.

⭐️ Consejo rápido: aprovecha los estilos globales de Divi 5 para mantener la coherencia entre distintos loops. Por ejemplo, los colores relativos y las variables de tipografía combinan perfectamente con el Loop Builder.

Ejemplos de uso del Loop Builder

Blog personalizado

En lugar de usar el módulo de blog estándar, puedes crear una cuadrícula con tarjetas personalizadas, incluyendo colores, tipografías y botones alineados a tu identidad de marca.

Sección de testimonios

Agrupa un Custom Post Type de testimonios y muéstralos en un slider o grid diseñado a tu gusto.

Directorio de negocios o proyectos

Si trabajas con directorios, ahora puedes dar estilo a cada tarjeta de negocio o proyecto, mostrando solo los campos que quieras.

Tienda online con WooCommerce

Los productos pueden tener diseños de tarjeta únicos que reflejen tu branding, mucho más allá del aspecto clásico de WooCommerce.

Ventajas frente al sistema anterior

Hasta Divi 4, estábamos limitados a módulos predeterminados. Aunque eran útiles, tenían muchas restricciones. Ahora con el Loop Builder de Divi 5:

• Ya no hay que usar código para modificar plantillas de post.
• No dependemos de addons de terceros para mostrar CPTs.
• La personalización es 100% visual y se hace dentro del constructor.

Esto representa una verdadera revolución en el ecosistema Divi, y estoy convencido de que cambiará la manera en que diseñamos sitios para clientes y proyectos propios.

Recomendaciones finales

1. Empieza simple: crea un loop básico para posts antes de lanzarte a proyectos complejos.
2. Piensa en la escalabilidad: diseña loops que funcionen con mucho contenido, no solo con pocos ítems.
3. Optimiza la velocidad: evita sobrecargar cada tarjeta con demasiados módulos, recuerda que el loop se repetirá decenas o cientos de veces.
4. Combina con otras funciones de Divi 5: el verdadero poder del Loop Builder surge al integrarlo con Flexbox, colores relativos y variables globales.

Cursos recomendados en UXDivi

Si quieres profundizar en esta y otras funciones de Divi 5, te recomiendo estos cursos en uxdivi.com/cursos:

• Curso de Divi 5 en fase de desarrollo: donde exploramos el Loop Builder con ejemplos prácticos y aplicados a proyectos reales.

Conclusión

El Loop Builder en Divi 5 es probablemente la función más transformadora de esta nueva versión. Nos da libertad absoluta para crear grids dinámicos de cualquier tipo de contenido y llevar el diseño web con Divi a un nivel profesional y avanzado.

Si hasta ahora Divi se había quedado atrás frente a otros constructores en este aspecto, con el Loop Builder da un salto gigantesco y se coloca entre los líderes del mercado.

Yo ya lo estoy usando en mis proyectos y estoy convencido de que se convertirá en una herramienta indispensable para cualquier diseñador que quiera diferenciar sus sitios con diseños únicos, dinámicos y 100% personalizados.