Desde principios de 2025, el equipo de Temas Elegantes ha avanzado a un ritmo rápido en el desarrollo de Divi 5. Dentro de unos meses - y cuando escribo este artículo - no menos de 21 nuevas características han sido publicadas, transformando gradualmente el famoso fabricante en una herramienta completamente rediseñado, más moderno, más rápido y sobre todo mucho más flexible.
Si usted ha tenido problemas después de esta transformación que tuvo lugar durante todo este año, propongo un resumen de la increíble "remontada" de Divi 5 en este artículo...
- 1 - Puntos de rotura reactivos adaptables (Breakpoints) | Public Alpha 7.2 | 6 de febrero 2025
- 2 - Preset (preset) | Public Alpha 9.3 | 11 de marzo de 2025
- 3 - Unidades CSS avanzadas | Public Alpha 10.1 | 19 de marzo de 2025
- 4 - Global Variable Manager | Public Alpha 11.1 | 3 abril 2025
- 5 - Líneas entrelazadas | Pública 12.1 | 17 abril 2025
- 6 - Grupo del módulo | Public Alpha 13.1 | 1o de mayo de 2025
- 7 - Gestión de atributos | Public Alpha 14.1 | 16 de mayo de 2025
- 8 - Ajustes de búsqueda y filtro | Public Alpha 15.1 | 29 de mayo de 2025
- 9 - Atributos extendidos | Public Alpha 16 | 5 junio 2025
- 10 - Búsqueda y sustitución | Public Alpha 17 | 18 junio 2025
- 11 - Colores relativos " HSL | Public Alpha 17.1 |19 junio 2025
- 12 Interacciones | Public Alpha 18.1 | 26 junio 2025
- 13 - Flexbox | Public Alpha 18.2 | 10 de julio 2025
- 14 - Loop Builder | Public Alpha 19.1 | 25 de julio de 2025
- 15 - Nuevos módulos : Grupos Carousel, Lottie y lista de iconos | Public Alpha 20.1 | 8 de agosto 2025
- 16 - Módulos WooCommerce | Public Alpha 21 | (15 de agosto de 2025)
- 17 - Responsable Editor | Public Alpha 22 | 27 agosto 2025
- 18 - Atributos personalizados | Public Alpha 23 | 11 septiembre 2025
- 19 - CSS Grid | Public Alpha 23.2 | 19 septiembre 2025
- 20 - WooCommerce Shopping Cart and Payment Modules | Public Alpha 24 | 26 de septiembre 2025
- 21 Inspector | Public Alpha 24.1 | 3 octubre 2025
- Finalmente: un resumen del progreso de Divi 5
1 - Puntos de rotura reactivos adaptables (Breakpoints) | Public Alpha 7.2 | 6 de febrero 2025
Con esta nueva actualización, Divi 5 finalmente te permite personalizar tus puntos de descanso! Termina los tres tamaños congelados: ahora puedes ajustar los umbrales según tus necesidades y activar sólo los que uses.
Divi ahora ofrece un total de 7 puntos de ruptura, incluyendo cuatro nuevos (Phone Wide, Tablet Wide, Widescreen, Ultra Widescreen).
Cada punto de rotura es totalmente editable, y los cambios que hace automáticamente se aplican al tamaño de pantalla relevante.
Una simple pero poderosa novedad, que le da control completo sobre la diseño sensible !
🍒 Y haciendo icing en el pastel, simplemente haga sus cambios en el tamaño de la pantalla seleccionada y las opciones se guardan directamente para este tamaño sin afectar a otros.
2 - Preset (preset) | Public Alpha 9.3 | 11 de marzo de 2025
Los presets le permiten crear conjuntos de estilos reutilizables (typos, colores, fronteras, espaciado, etc.) que usted puede aplicar a cualquier elemento.
Cuando se cambia un Preset, todas las instancias que lo utilizan se actualizan automáticamente, lo que garantiza una consistencia perfecta en todo el sitio.
También puede apilar múltiples presets en el mismo elemento, e incluso redefinir los presets predeterminados para ajustarse a la apariencia general de sus módulos.
Presets existió en Divi 4 pero llegó a Divi 5 con mayor precisión.
3 - Unidades CSS avanzadas | Public Alpha 10.1 | 19 de marzo de 2025
Divi 5 ahora soporta todas las unidades CSS (px, rem, vw, etc.), así como funciones como calc() y clamp(). Puede escribir o arrastrar para ajustar los valores, mientras disfruta de la libertad de composición.
También puede utilizar variables CSS: establecerlas a nivel global o a nivel de página, y luego consultar estas variables en sus estilos. Un cambio a la fuente ocurre donde se utiliza la variable.
Esta innovación hace que la creación de tipografías fluidas y diseños adaptativos sea mucho más simple y potente.
4 - Global Variable Manager | Public Alpha 11.1 | 3 abril 2025
El gestor global de variables le permite definir valores reutilizables (colores, tipografías, números, imágenes, texto, URLs) en un gestor central.
Luego puede inyectar estas variables en los elementos y opciones de preconfiguración. Si cambias una variable, todas las partes del sitio que la utilizan se actualizan automáticamente, garantizando la consistencia instantánea en todo el sitio.
Este es un avance importante en la fluidización de su flujo de trabajo y centralización de la maestría del diseño sin reajustar la misma configuración para cada módulo.
5 - Líneas entrelazadas | Pública 12.1 | 17 abril 2025
Finalmente, es posible entrelazar líneas en otras líneas, sin ningún límite de profundidad, abriendo la puerta a estructuras de diseño mucho más complejas.
Cuando agregue una línea dentro de una columna, puede insertar módulos o continuar entrelazando líneas.
Al mismo tiempo, se han ampliado las opciones para dimensionar columnas: ahora controlas con precisión el ancho y la altura de cada columna en tus arreglos anidados.
6 - Grupo del módulo | Public Alpha 13.1 | 1o de mayo de 2025
Nace un nuevo módulo, es un contenedor: grupos de módulos.
Ahora puede agrupar varios módulos dentro de una columna para manipularlos, estilizarlos o duplicarlos como un solo elemento.
Estos grupos apoyan presets y pueden ser registrados como elementos globales, asegurando la coherencia y ahorro de tiempo.
Usted puede anidar grupos entre sí - o en líneas - ilimitadas, que abre posibilidades estructurales muy escalables.
7 - Gestión de atributos | Public Alpha 14.1 | 16 de mayo de 2025
Con Divi 5, Attribute Management se vuelve mucho más poderoso y preciso, usted puede:
- Copiar atributos a nivel de módulo, un grupo de opciones, una pestaña o un campo, con toda la granularidad deseada.
- Pasta selectiva: puede elegir pegar todos los atributos, o sólo estilos, contenido o presets.
- Reiniciar los atributos de una manera específica: todo reinicio a cero, o sólo estilo, contenido o presets según sus necesidades.
- Estas opciones son accesibles a través de un menú contextual (click derecho), incluyendo a nivel de grupo de opciones, para una acción rápida y precisa.
- Además, los nuevos atajos de teclado acelerarán estas operaciones.
Esta buena gestión le da control total sobre sus elementos, evitando al mismo tiempo retroalimentación tediosa para sincronizar estilos entre módulos.
8 - Ajustes de búsqueda y filtro | Public Alpha 15.1 | 29 de mayo de 2025
Divi 5 ahora incluye una barra de búsqueda en el panel de configuración, lo que le permite encontrar instantáneamente una opción por palabra clave, sin buscar las pestañas.
También tiene filtros útiles: por tipo de ajuste (colores, tamaños...) o por estado, especialmente "modificado", que le permite identificar las opciones que ha cambiado en un módulo.
Esto aumenta enormemente su velocidad de trabajo con Divi, especialmente en módulos con muchos ajustes.
9 - Atributos extendidos | Public Alpha 16 | 5 junio 2025
Divi 5 recrea el concepto de "estilos exigentes", conocido en Divi 4, pero de una manera ampliamente enriquecida. Ahora puede propagar uno o más atributos — estilos, presets o contenidos — d
El menú "Extend Attributes" (accesible por clic derecho) le permite elegir la fuente, el destino (columna, línea, sección, página completa) y el tipo de atributo para ampliar. Puede ampliar estilos individuales, grupos de opciones o presets, con una selección muy fina de campos para propagar.
Además, el panel "Extend Attributes" se adapta automáticamente al contexto del elemento activo, y puede adjuntarlo para mantenerlo dentro del rango.
Por un tiempo, confieso que tenía miedo 😰 que Divi 5 no integra esta característica que fue indispensable para mí en Divi 4 para crear sitios más productivos.
10 - Búsqueda y sustitución | Public Alpha 17 | 18 junio 2025
Una función "Encontrar y reemplazar" accesible por clic derecho en cualquier campo llega a Divi 5. Puedes buscar un valor en un artículo (por ejemplo, color, fuente, número) y luego reemplazarlo en cualquier lugar, dependiendo de un alcance que definas (en el artículo, sus hijos, toda la página, etc.).
Esta función es particularmente útil para convertir valores estáticos en variables (colores, fuentes...), o para ajustar rápidamente un tono o estilo en un diseño importado sin tener que buscar cada opción.
También controla qué opciones son reemplazadas (tipos de elementos, campos idénticos solamente), para evitar efectos secundarios indeseables.
11 - Colores relativos " HSL | Public Alpha 17.1 |19 junio 2025
Por último, es posible utilizar colores relativos basados en HSL (Hue, Saturation, Lightness): sus colores pueden definirse como variables y ajustarse matemáticamente en relación entre sí.
Por ejemplo, usted puede declarar su color "primario" y luego crear variaciones (teñido, saturación, brillo modificado) que permanecerán relacionados con este color de la madre. Si cambia el color primario, todas las variaciones se actualizarán automáticamente.
El selector de color ha sido rediseñado: muestra variables, permite componer colores relativos e incorpora una interfaz HSL más clara (teína, saturación, brillo y opacidad).
12 Interacciones | Public Alpha 18.1 | 26 junio 2025
Divi 5 ahora ofrece un sistema de interacción integrado, que crea efectos dinámicos como pop-ups, toggles o animaciones relacionadas con desplazamiento o movimiento del ratón.
Usted elige un gatillo (clic, navegar, desplazarse, introducir en el mirador, etc.), un efecto (mostrar/mascarar, cambiar un preset, cambiar un atributo, etc.) y un objetivo (el elemento que sufre la acción).
El editor de interacción es accesible desde la pestaña avanzada de cada módulo, y los efectos incluyen opciones como Toggle Visibility, Toggle Preset, Mirror Mouse Movement, Scroll To Element, gestión de cookies y atributos, etc.
Algunos ejemplos de uso:
- crear un pop-up que aparece cuando una sección entra en el mirador,
- cambiar entre dos versiones del módulo en el clic
- aplicar una variación predefinida al pergamino,
- hacer un elemento " rastreador de flujo" con efectos de inclinación o opacidad.
13 - Flexbox | Public Alpha 18.2 | 10 de julio 2025
¡Es una revolución que todos esperamos! Divi 5 finalmente integra el Flexbox 🎉
Ahora puede construir arreglos complejos mediante líneas de bloqueo, controlando el diseño de elementos infantiles (dirección, transición de línea, orden) y ajustando alineaciones verticales o horizontales - todo sin tener que código (este fue el caso con Divi 4 como se explica en este artículo).
Para cada punto de ruptura, puede definir una estructura diferente: cambiar el ancho de las columnas, cambiar el orden de los elementos, o redefinir la dirección del flujo según el dispositivo.
Con la llegada de la Flexbox, Divi abandona ciertas secciones especializadas (violeta de ancho completo y naranja especial) a favor de un sistema unificado: todo pasa por líneas flex, que simplifica la estructura general.
14 - Loop Builder | Public Alpha 19.1 | 25 de julio de 2025
¡No lo esperábamos y él está aquí! El Loop Builder le permite crear bucles dinámicos para cualquier tipo de contenido - artículos, páginas, productos, autores, categorías, etc.
Primero estableces una plantilla con tus módulos/diseños, luego configuras la consulta (tipo de post, filtros, meta, orden) para alimentar el bucle.
El Loop Builder es compatible con campos personalizados (ACF), tipos de correo personalizados (como Divi Projects), e incluso campos repetidores.
Al cambiar su solicitud o modelo, todas las instancias en el bucle se actualizan automáticamente.
🤩 Por último, puede construir páginas de contenido personalizadas sin el módulo "blog" requerido, con total libertad de diseño y estructura.
15 - Nuevos módulos : Grupos Carousel, Lottie y lista de iconos | Public Alpha 20.1 | 8 de agosto 2025
Divi 5 enriquece su gama de módulos con tres valiosas adiciones:
- Un módulo Group Carousel muy flexible: cada "slide" es un lienzo en blanco en el que se puede insertar cualquier módulo, líneas de nido, efectos de aplicación, etc. El carrusel también puede ser alimentado dinámicamente a través del Loop Builder (artículos, categorías, etc.).
- Un módulo Lottie para una fácil integración de animaciones JSON/SVG. Controla la velocidad, dispara, repite, etc. ¡No más implementación de Lottie con trucos de ninja!
- Un módulo Icon List (lista con iconos), para crear listas con iconos personalizados, sin usar texto o trucos crudos.
Estos módulos aprovechan la nueva arquitectura de Divi 5 y muestran la capacidad del tema para avanzar rápidamente hacia una mayor modularidad.
16 - Módulos WooCommerce | Public Alpha 21 | (15 de agosto de 2025)
Con esta actualización, Divi 5 ofrece una primera serie de 17 módulos nativos de WooCommerce, sin la etiqueta "legacy". Estos módulos cubren los elementos esenciales para diseñar sus páginas de productos y categorías con total libertad.
Por ejemplo:
- el módulo Productos para mostrar una red de productos.
- Módulos de página de producto : Add To Cart, Product Gallery, Product Title, Product Description, etc.
- módulos de utilidad como Breadcrumbs, Note, Product Meta, Reviews, Upsells...
Gracias al Loop Builder, también puede crear bucles personalizados en sus productos (requisitos, estilos) en lugar de limitarse al módulo "Productos" estándar.
Los módulos restantes para la canasta y validación de comandos llegarán en segunda ocasión.
17 - Responsable Editor | Public Alpha 22 | 27 agosto 2025
Divi 5 presenta un editor reactivo centralizado que facilita la gestión de estados sensibles, "hover" y "sticky" de una sola interfaz.
En lugar de tener que cambiar al modo móvil o tableta para cambiar los valores, puede hacer clic en el icono de editor sensible y ajustar los valores en todos los modos simultáneamente.
Si una opción tiene valores diferentes para diferentes modos (desktop, tablet, móvil), el icono se vuelve azul para informar de este cambio, y puede ver, editar o restablecer estos valores rápidamente.
Reactive editor mejora la velocidad de su flujo de trabajo y reduce los clics innecesarios mientras mantiene el poder de diseño sensible.
18 - Atributos personalizados | Public Alpha 23 | 11 septiembre 2025
Un nuevo panel de Atributos aparece en la pestaña Avanzada de cada elemento, dándole la posibilidad de añadir cualquier atributo HTML (alte, título, rel, aria-label, datos-*, etc.) tanto al elemento principal como a sus subelementos.
Esto mejora significativamente la accesibilidad (puede asociar roles ARIA, etiquetas o atributos con módulos no semánticos) y permite una personalización más fina del comportamiento del contenido o indexación.
Los antiguos campos para las clases de CSS o ID se deprecatan gradualmente: sus valores se migran automáticamente a este nuevo sistema unificado de atributos personalizados.
En resumen, finalmente obtiene la libertad de añadir todos los atributos necesarios a sus elementos sin usar código, manteniendo la configuración de clase y los identificadores en el mismo entorno.
19 - CSS Grid | Public Alpha 23.2 | 19 septiembre 2025
Como la llegada de la Flexbox, la llegada de CSS Grid es un paso importante hacia adelante en la creación de diseños sofisticados.
CSS Grid tiene un comportamiento ligeramente más difícil de entender que el Flexbox para los neófitos y por eso el editor ofrece plantillas de rejilla predefinidas que se pueden aplicar en un clic. Los elementos sy se adaptan automáticamente a medida que agregas contenido.
Para usuarios informados, todas las opciones de CSS Grid son accesibles: puede establecer sus propias columnas, filas, espaciamiento, alineación, dirección, etc.
En resumen: CSS Grid ofrece flexibilidad estructural de alto nivel, al tiempo que sigue siendo accesible para principiantes gracias a los modelos.
20 - WooCommerce Shopping Cart and Payment Modules | Public Alpha 24 | 26 de septiembre 2025
Fue la parte faltante de los módulos WooCommerce que los "amantes del comercio electrónico de Divi" estaban esperando!
Ahora puede construir su carrito de compras y las páginas de checkout a través del Theme Builder, montando los componentes del módulo por módulo.
Entre los módulos disponibles:
- Para el carrito: Woo Cart Products, Woo Cart Totals, Woo Cross-Sells
- Para la página de pago: Woo Checkout Billing, Woo Checkout Shipping, Woo Checkout Details, Woo Checkout Payment, etc.
Cuando activa Divi en un carrito de compra o página de pago, Divi reemplaza automáticamente las plantillas clásicas de WooCommerce con estos módulos, dándole control total sobre el estilo y la estructura.
21 Inspector | Public Alpha 24.1 | 3 octubre 2025
El instrumento del Inspector, inspirado en Figma, centraliza los atributos de un elemento (y sus hijos) en un panel dedicado. Puede inspeccionar colores, tipografías, tamaños, contenidos y presets, y cambiar todo desde este panel.
Esto es lo que permite:
- Grupo los atributos modificados (colores, fuentes, etc.) de un elemento y sus descendientes, en lugar de dispersarlos en las pestañas.
- Editar a granel: Cambiar un color en un lugar y actualizarlo donde sea que se utilice.
- Acceso a textos, medios, atributos o presets activos en el objeto inspeccionado.
- Revise los atributos utilizados dentro de los presets, permitiéndoles modificarlos directamente desde allí.
Es un ahorro de tiempo importante para detectar y editar lo que está detrás de un diseño sin saltar entre múltiples pestañas. Incluso siento que reemplaza el pequeño icono en forma de pincel que era tan útil en Divi 4.
Finalmente: un resumen del progreso de Divi 5
¡Wow! ¡Eso lo hace nuevo! ¡Y todo en menos de un año!
Como regla general, el equipo de Elegantthemes publica 2 características cada mes, sin contar correcciones y mejoras...
Pero usted notará que algunos meses han sido más prolíficos que otros con hasta 4 características publicadas en junio, sólo eso!
De todos modos, me siento como "valía la pena esperar"! ¿Y ese es tu sentimiento también?
Para terminar este artículo, pensé que sería bienvenido un pequeño resumen en forma de tabla. 👇
| Nombre de la función | Public Alpha version | Fecha de lanzamiento | Descripción |
|---|---|---|---|
| Puntos de rotura reactivos personalizable | 7.2 | 6 de febrero 2025 | Permite configurar sus propios puntos de ruptura y ajustar el diseño para cada tamaño de pantalla. |
| Preset Design (Presets) | 9.3 | 11 de marzo de 2025 | Presenta un sistema de estilos reutilizables y sincronizados para todos los módulos del sitio. |
| Unidades CSS avanzadas | 10.1 | 19 de marzo de 2025 | Añade compatibilidad con todas las funciones CSS (px, em, vw, etc.) y calc() y clamp(). |
| Global Variable Manager | 11.1 | 3 abril 2025 | Le permite definir y reutilizar variables (colores, textos, números...) en todo el sitio. |
| Filas anidadas | 12.1 | 17 abril 2025 | Autoriza las filas entrelazadas en otras filas para diseños más flexibles. |
| Módulo | 13.1 | 1o de mayo de 2025 | Permite agrupar varios módulos para estilizar, duplicar o moverlos juntos. |
| Attribute Management | 14.1 | 16 de mayo de 2025 | Facilita la copia, collage y reseteo de estilos o contenidos a diferentes niveles. |
| Ajustes de búsqueda y filtro | 15.1 | 29 de mayo de 2025 | Añadir una barra de búsqueda y filtros a los paneles de configuración para ahorrar tiempo. |
| Atributos extendidos (Atributos de salida) | 16 | 5 junio 2025 | Permite extender estilos o atributos a otros elementos en la página o sección. |
| Buscar y reemplazar (Encontrar " Reemplazar) | 17 | 18 junio 2025 | Proporciona una herramienta global de búsqueda y sustitución para modificar valores a gran escala. |
| Colores relativos " HSL | 17.1 | 19 junio 2025 | Presenta un sistema de colores dinámicos vinculados entre sí a través del modelo HSL. |
| Interacciones | 18.1 | 26 junio 2025 | Permite crear animaciones, toggles o efectos basados en desplazamiento, clic o overshoot. |
| Flexbox | 18.2 | 10 de julio 2025 | Reemplaza el antiguo sistema de columnas con un modelo de diseño flexible basado en flexbox. |
| Loop Builder | 19.1 | 25 de julio de 2025 | Le permite diseñar bucles personalizados para mostrar cualquier tipo de contenido. |
| Nuevos módulos : Carousel, Lottie, Lista de iconos | 20.1 | 8 de agosto de 2025 | Añade tres módulos modernos: carrusel grupo, animaciones Lottie y listas con iconos. |
| Módulos WooCommerce Productos | 21 | 15 agosto 2025 | Introdujo 17 módulos nativos de WooCommerce para construir su producto y páginas de compras. |
| Responsive Editor | 22 | 27 agosto 2025 | Centraliza la gestión de los modos de escritorio, tableta y móvil en una interfaz unificada. |
| Atributos personalizados | 23 | 11 septiembre 2025 | Permite añadir cualquier atributo HTML o ARIA a un módulo directamente desde la interfaz. |
| CSS Grid | 23.2 | 19 septiembre 2025 | Integrar un sistema CSS Grid real con plantillas predefinidas y edición visual completa. |
| WooCommerce Módulos: Carrito de compra y pago | 24 | 26 de septiembre 2025 | Añade los módulos de canasta y checkout nativos para el control total del proceso de compra. |
| Inspector | 24.1 | 3 octubre 2025 | Centraliza todos los atributos y estilos de un elemento en un panel de forma Figma único. |
0 commentaire