Precio de lanzamiento: el Método Vibe Coding a $197. Sube a $247 al publicarse el curso. Termina en 00d 00h 00m 00s Ver el Método
Divi 5

15 novedades de Divi 5: módulos y funciones nuevas

Jefferson Maldonado
Por Jefferson Maldonado 24 Ago 2026 14 min de lectura

Si trabajas con Divi 5 seguro te ha pasado: abres el constructor y aparecen opciones que la semana pasada no estaban ahí. Elegant Themes lleva meses publicando actualizaciones a un ritmo que cuesta seguir, y varias de ellas pasaron por el canal sin que les dedicara un espacio propio. Así que decidí ponerme al día de una sola vez: en este post te explico las 15 novedades de Divi 5 más recientes, en orden cronológico, con mi opinión honesta de cuáles cambian de verdad tu forma de trabajar y cuáles simplemente está bien que existan.

Vas a encontrar de todo: nueve módulos nativos nuevos, un editor visual de grids, gradientes que ahora se aplican en cualquier parte del sitio, fuentes variables y la que para mí es la estrella absoluta de esta tanda: el sistema de filtrado para el Loop Builder. Si estás aprendiendo el constructor desde cero o vienes de Divi 4, el curso de Divi 5 completo te da la base sobre la que todas estas funciones se montan; este post te sirve como mapa de lo que el constructor sumó en los últimos meses.

¿Qué traen estas novedades de Divi 5?

Las novedades de Divi 5 que reviso aquí se publicaron entre mayo y agosto de 2026 e incluyen nueve módulos nuevos (Línea de Tiempo, Migas de Pan, SVG, Tabla de Contenidos, Feed de Instagram, Gráficos, Gravity Forms, Imagely y Botón de Pago), un sistema de relación de aspecto para imágenes, gradientes extendidos a textos y variables, espacios de trabajo personalizables, fuentes variables, un editor visual de CSS Grid y el filtrado nativo del Loop Builder. Vamos una por una, de la más antigua a la más reciente.

1. Relación de aspecto y encuadre de imágenes

La primera actualización resuelve un dolor viejo: las imágenes que el cliente te pasa nunca vienen en la proporción que tu diseño necesita. Ahora todos los módulos de Divi 5 que muestran imágenes incluyen configuración de relación de aspecto en su grupo de opciones de tamaño. Puedes tomar una foto de 3:2 o de 5:6 y mostrarla en 1:1 sin pasar por Photoshop, y el elemento mantiene esa proporción mientras escala en cada tamaño de pantalla.

A eso se suma el encuadre: decides cómo la imagen llena el espacio disponible (cover, fill y otras opciones de ajuste) y qué parte de la foto queda visible dentro del marco, reposicionándola sin recortar el archivo original. Y el detalle que más me gusta: las imágenes ahora soportan presets. Defines una vez el estilo — proporción, encuadre, bordes, lo que sea — y lo aplicas a cualquier otra imagen del sitio con un clic.

Consejo: si tu cliente sube imágenes al blog o a un directorio con fotos de proporciones distintas, crea un preset de imagen con relación de aspecto fija y asígnalo en la plantilla. El grid queda parejo aunque cada foto venga de una cámara diferente.

2. Módulo de Línea de Tiempo (Timeline)

El primero de los módulos nuevos. Con Timeline creas una secuencia de eventos organizada de arriba hacia abajo o de izquierda a derecha, con controles de dirección y desplazamiento. Cada ítem de la línea funciona como un módulo independiente que admite elementos anidados, así que dentro de cada punto puedes meter lo que necesites: texto, imágenes, botones. Lo bueno es que este módulo venía en muchos plugins addons para Divi, y ahora lo tenemos nativo — una dependencia menos que instalar, mantener y pagar.

3. Módulo de Migas de Pan (Breadcrumbs)

Finalmente tenemos migas de pan nativas en Divi 5. Este módulo muestra la ruta jerárquica de navegación — de la página actual hacia su categoría padre y el inicio — y está pensado justo para los layouts que armas en el Theme Builder: la plantilla de posts del blog o la de productos de WooCommerce son los lugares obvios. Además de orientar al visitante, las migas de pan ayudan a que Google entienda la estructura del sitio, así que es de esos módulos pequeños que suman en SEO sin que tengas que hacer nada extra.

4. Módulo SVG nativo

Ya podemos cargar imágenes SVG de forma nativa en Divi. Los SVG son gráficos vectoriales muy ligeros, ideales para iconos e iconografía que se ve nítida en cualquier resolución. Antes había que recurrir a plugins o trucos para habilitarlos — de hecho tengo un tutorial de cómo añadir imágenes SVG a WordPress con Divi de la época en que esto era un problema por resolver. El módulo nuevo va más allá de aceptar el archivo: puedes pegar el markup SVG directamente y personalizar el trazo (stroke) y el relleno (fill) desde el propio constructor, algo que un módulo de imagen normal no te permite.

5. Módulo de Tabla de Contenidos

Otro clásico de los addons que ya es nativo. El módulo de tabla de contenidos analiza la estructura de encabezados de cualquier página o post y genera el índice clicable automáticamente. Su lugar natural es la plantilla de posts del blog en el Theme Builder: lo insertas una vez y todos tus artículos ganan índice sin trabajo manual. Pero donde más provecho le veo es en custom post types de documentación — si manejas una base de conocimiento o docs de producto, este módulo en la plantilla del CPT te resuelve la navegación interna completa.

6. Módulo de Feed de Instagram

Ahora puedes insertar el feed de Instagram en tu sitio con un módulo nativo de Divi. Es especialmente útil para influencers y creadores de contenido que le dan mucho peso a su Instagram y quieren mostrar su galería — incluidos los Reels — dentro de su web. El módulo aprovecha las opciones de relación de aspecto y encuadre de la primera actualización, así que el feed se adapta a tu diseño en lugar de imponerte el formato de Instagram.

7. Gradientes en todo el sitio

Esta sí me parece útil de verdad. Los gradientes, que antes vivían casi exclusivamente en los fondos de secciones y filas, ahora se extienden a prácticamente cualquier parte del diseño. Hay un panel selector de gradientes unificado — funciona como el selector de color — desde el que puedes copiar, pegar, inspeccionar y hasta buscar y reemplazar gradientes en todo el sitio.

Las dos piezas grandes: primero, los gradientes ahora pueden ser variables globales, igual que los colores. Defines tu gradiente de marca una vez y lo reutilizas en todo el proyecto; si lo editas, el cambio se propaga solo. Es la misma lógica de las variables globales de Divi 5 aplicada a degradados. Y segundo, los textos por fin aceptan relleno de gradiente — los títulos con degradado que la comunidad pedía desde hace años ya salen nativos, sin CSS. De regalo, esta actualización también trajo relleno de imagen para textos y trazos (strokes) de texto para destacar titulares sobre fondos cargados.

Si estás construyendo tu sistema de diseño con variables, colores y ahora gradientes, en el curso completo de Divi 5 trabajamos ese flujo desde el primer módulo aplicado a proyectos reales.

8. Workspaces: espacios de trabajo personalizados

Esta va de interfaz. Como pasa en otras aplicaciones profesionales, ahora cada usuario puede personalizar la disposición del constructor: paneles abiertos, cerrados, anclados o flotantes, agrupados en pestañas, con su tamaño y posición guardados, más el modo claro u oscuro y qué iconos ves en la barra superior. Todo eso se guarda como un workspace con nombre, y puedes crear varios y alternar entre ellos al instante — incluso desde el Command Center con comandos propios.

¿Dónde brilla esto? En sitios administrados por varias personas. Tú tienes tu disposición de paneles y tu colega diseñador tiene la suya, cada uno en su perfil, sin pisarse. Y como la configuración persiste entre sesiones, el constructor siempre abre como tú lo dejaste.

🎓 ¿Quieres dominar Divi 5 de verdad?
En uxdivi.com/cursos tienes el curso de Divi 5 completo en español: desde la interfaz y el sistema de diseño hasta el Theme Builder y los módulos nuevos, con proyectos reales. ¡Accede como suscriptor y ponte al día con el constructor de una sola vez!

9. Fuentes variables y control de grosores

Novena actualización y una de mis favoritas. Divi 5 ahora soporta fuentes variables de forma nativa: todas las tipografías variables de Google Fonts se pueden usar directamente, y en lugar de elegir entre los cuatro grosores de siempre (thin, regular, medium, bold), deslizas por todo el rango que la fuente permita — por ejemplo de 200 a 900 — con selectores simples en el constructor visual.

Me pasaba mucho: una tipografía cuyo peso regular rondaba los 400 o 500, y yo quería los párrafos en 300. La solución era irse al código y escribir el font-weight: 300 en CSS. Ahora lo ajustas con un selector y listo. Y como los grosores se pueden guardar en presets, defines pesos específicos para funciones específicas — títulos, párrafos, destacados — y los asignas donde toque.

La actualización vino además con ocho controles de texto nuevos: columnas de texto estilo revista, letra capital (drop caps), dirección de texto vertical, posición del trazo, capitalización, espaciado entre párrafos y listas, separación de palabras con guiones (hyphenation) y estilo de salto de línea. Tipografía fina sin salir del constructor.

Consejo: crea un preset de tipografía por rol — título, párrafo, destacado — con el grosor exacto que quieres en cada uno. Cuando el cliente pida "algo más ligero", cambias el peso en el preset y todo el sitio se actualiza solo.

10. Editor visual de CSS Grid

Hacer grids personalizados en Divi 5 con el panel de la barra derecha era complicado — los grids predefinidos servían para lo básico, pero armar una rejilla propia costaba. Eso se resolvió con el nuevo editor de grids: una interfaz visual donde defines la cuadrícula que quieras — dos columnas en una zona, tres en otra, cuatro abajo — arrastrando en lugar de pelear con campos numéricos.

Puedes estirar un elemento desde sus esquinas para que ocupe más filas o columnas, mover ítems entre celdas con arrastrar y soltar, y ajustar los espacios (gaps) de forma visual o con valores exactos. Un detalle técnico que me gusta mucho: el grid vive por completo en el contenedor, así que agregar, duplicar, eliminar o incluso loopear los elementos hijos no rompe la estructura. Si quieres ver esta función aplicada, tengo un tutorial de diseño de grid en Divi 5 con ejemplos reales que te va a servir de base, y más adelante le dedicaré un video completo al editor nuevo.

Consejo: el grid se ajusta por breakpoint, así que baja el número de columnas en tablet y móvil — un layout de cuatro columnas en escritorio se ve aplastado en pantallas chicas si no lo adaptas.

11. Filtros para el Loop Builder

Y llegamos a la actualización que cambia el juego. Después de muchas peticiones de la comunidad, el Loop Builder por fin tiene sistema de filtrado nativo. Te pongo en contexto: con el Loop Builder de Divi 5 diseñas una tarjeta con elementos dinámicos — imagen, título, precio, botón de añadir al carrito — y el constructor la repite en loop para cada producto o post. Lo que faltaba era que el visitante pudiera filtrar ese loop por taxonomías y atributos sin plugins externos. Ya se puede.

El sistema funciona con un módulo de filtro de posts que actúa como formulario, y dentro colocas los campos que necesites:

  • Texto — búsqueda libre sobre títulos, contenido y campos personalizados.
  • Select, radio y checkbox — taxonomías y datos del post como menú desplegable, opción única o selección múltiple.
  • Orden y ordenar por — el visitante decide el criterio (precio, fecha) y la dirección ascendente o descendente.
  • Botón — enviar o restablecer los filtros, con modo manual o aplicación automática al seleccionar.

Donde más provecho se le va a sacar es en tiendas online y sitios con mucho contenido: catálogos filtrables por categoría y precio, blogs con buscador propio, listados de eventos. Seré honesto: el Loop Builder todavía tiene detalles por pulir, pero el filtrado era la pieza esencial que le faltaba y expande por completo lo que puedes construir sin plugins. Si vas a montarlo en una tienda, en el curso de tiendas online con Divi 5 y WooCommerce armamos catálogos dinámicos con este mismo stack. Y si ya hiciste el carrusel loop de productos que enseñé hace un tiempo, los filtros son el siguiente paso natural — si quieres un tutorial dedicado del sistema de filtrado aplicado a tiendas, dímelo en los comentarios.

Como dato extra: junto con los filtros llegó también un módulo de tooltip que se ancla a cualquier elemento y admite módulos anidados dentro — útil para fichas de producto con información al pasar el cursor.

🎓 ¿Quieres profundizar en el Loop Builder?
En uxdivi.com/cursos tenemos contenido premium donde construimos loops dinámicos, carruseles y catálogos filtrables con Divi 5 sobre proyectos reales. ¡Accede como suscriptor y saca todo el provecho del módulo más potente del constructor!

12. Módulo de Gráficos (Charts)

Entramos a los cuatro módulos más recientes. El de gráficos permite insertar visualizaciones de datos nativas: cargas los datos a mano en un editor de tablas nuevo o subes un CSV, y Divi se encarga de graficarlos. Hay nueve tipos disponibles — línea, área, barras, radar, pastel, dona, área polar, dispersión y burbujas — todos interactivos.

Mi opinión: era un módulo bastante pedido, y es fácil de usar, pero los casos donde de verdad lo necesitas son específicos — reportes financieros, comparativas, dashboards de datos. Un siguiente paso interesante sería soportar escalas distintas en un mismo gráfico para representaciones más avanzadas. Si tu proyecto lo pide, ya no dependes de un addon.

13. Módulo de Gravity Forms

Así como antes llegó el módulo para estilizar Contact Form 7, ahora le tocó a Gravity Forms. El flujo es simple: con Gravity Forms instalado, agregas el módulo, eliges el formulario que ya creaste y le das estilo nativo con las opciones de diseño de Divi 5 — incluyendo los presets de campos y la edición de pseudo-clases que se estrenaron con las opciones de formularios hace unos meses. Al insertarlo, el formulario adopta el diseño del sitio automáticamente, y de ahí lo afinas. Si trabajas formularios avanzados — presupuestos, registros, lógica condicional — en el curso de formularios con Gravity Forms, WPForms y Divi los construimos paso a paso.

14. Módulo de Imagely

Parecido al caso de Gravity Forms, este módulo integra las galerías del plugin Imagely con personalización completa desde Divi: controlas los elementos de cada tipo de galería, sliders incluidos. Mi lectura sincera: es un servicio con más tracción en Estados Unidos que en nuestra región — en Iberoamérica no lo veo demasiado en proyectos reales. Pero si tu cliente ya lo usa, ahora lo estilizas nativo en lugar de pelear con CSS externo.

15. Botón de pago con PayPal y Stripe

Cerramos con el módulo de botón de pago nativo. Conectas tu cuenta de PayPal o Stripe, configuras el cobro de un producto o un enlace de pago puntual, y maquetas el botón con todas las opciones de personalización de Divi 5. Las funciones son básicas por ahora — el propio Nick Roach, fundador de Elegant Themes, comenta que el módulo puede servir de base para una funcionalidad de ecommerce más completa en el futuro. Tal como está, es la solución simple para cobrar algo puntual sin montar WooCommerce entero: una reserva, un servicio, un producto único. Para una tienda real con catálogo, carrito y checkout, WooCommerce sigue siendo el camino.

Recomendaciones finales

Con 15 novedades sobre la mesa, mi sugerencia es que no intentes aplicarlas todas mañana. Esto es lo que yo haría:

  1. Actualiza Divi 5 a la última versión antes de buscar estas funciones — llegaron en lanzamientos consecutivos y algunas no aparecen si vas versiones atrás.
  2. Empieza por lo que toca tu sistema de diseño: presets de imagen, variables de gradiente y presets de grosor tipográfico te ahorran tiempo en cada proyecto siguiente.
  3. Prueba los filtros del Loop Builder en un entorno de pruebas antes de montarlos en el sitio de un cliente — es una función recién llegada y conviene conocer sus límites con calma.
  4. Configura tu workspace apenas actualices: cinco minutos acomodando paneles se pagan solos en cada sesión de diseño.
  5. No fuerces los módulos que no necesitas. Que gráficos o Imagely existan no significa que tu proyecto los pida — criterio primero, módulo después.

🎓 ¿Quieres dominar todas las novedades de Divi 5 con método?
En el curso de Divi 5 completo en español te llevo desde la interfaz hasta el Loop Builder y el sistema de diseño, con proyectos reales y el flujo profesional que uso con mis propios clientes. Accede como suscriptor y construye con todo lo que el constructor trae en 2026.

Conclusión

Divi 5 está madurando rápido: en cuatro meses pasamos de esperar módulos básicos a tener grids visuales, tipografía variable, gradientes globales y un Loop Builder con filtrado nativo que compite directo con lo que antes exigía addons de pago. Si algo demuestra esta lista es que apostar por Divi 5 hoy es apostar por un constructor en plena expansión. Elige las dos o tres novedades que tocan tu flujo real, practica con ellas en un proyecto propio y de ahí escala al resto.

// ¿Te sirvió este tutorial?

Imagina lo que aprenderás
con los cursos completos

En UXDivi llevamos los tutoriales del blog al siguiente nivel: proyectos reales de principio a fin, recursos descargables y soporte directo conmigo. Todo por menos del costo de un curso individual en otra plataforma.

+47 cursos +1115 alumnos 4.7 en Trustpilot Garantía 7 días
Jefferson Maldonado
// Escrito por

Jefferson Maldonado

UX Director · Founder UXDivi, MUX Studio y UXDivi Templates

UX Director | fundador de UXDivi y MUX Studio

Comentarios

Para dejar un comentario, accede a tu cuenta de UXDivi.

Acceder a mi cuenta