Desde principios de 2025, el equipo de Temas Elegantes ha avanzado a un ritmo rápido en el desarrollo de Divi 5. En el espacio de unos meses – y en el momento en que 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 ha tenido lugar durante este año, propongo un resumen de lo increíble « remontada » de Divi 5 en este artículo...
- 1 – Puntos de ruptura (Breakpoints) adaptables y personalizables | Public Alpha 7.2 | 6 de febrero de 2025
- 2 – Diseño basado en ajustes preestablecidos (presets) | Public Alpha 9.3 | 11 de marzo de 2025
- 3 – Unidades CSS avanzadas | Public Alpha 10.1 | 19 de marzo de 2025
- 4 - Gestor de variables globales | Public Alpha 11.1 | 3 de abril de 2025
- 5 – Filas anidadas | Public Alpha 12.1 | 17 de abril de 2025
- 6 – Grupos de módulos | Public Alpha 13.1 | 1 de mayo de 2025
- 7 – Gestión de atributos | Public Alpha 14.1 | 16 de mayo de 2025
- 8 - Búsqueda y filtrado de ajustes | Public Alpha 15.1 | 29 de mayo de 2025
- 9 - Extender atributos | Public Alpha 16 | 5 de junio de 2025
- 10 – Buscar y reemplazar | Public Alpha 17 | 18 de junio de 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 de 2025
- 16 – WooCommerce Módulos | Public Alpha 21 | (15 de agosto de 2025)
- 17 – Editor responsable | 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 Módulos de cesta y pago | 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 ruptura (Breakpoints) adaptables y personalizables | Public Alpha 7.2 | 6 de febrero de 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 elegida y las opciones se guardan directamente para este tamaño sin afectar a otros.
2 – Diseño basado en ajustes preestablecidos (presets) | 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 - Gestor de variables globales | Public Alpha 11.1 | 3 de abril de 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 – Filas anidadas | Public Alpha 12.1 | 17 de abril de 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 – Grupos de módulos | Public Alpha 13.1 | 1 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.
Puede entrelazar grupos entre sí –o en líneas – sin límites, lo 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 - Búsqueda y filtrado de ajustes | 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, en particular « modificada », lo 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 - Extender atributos | Public Alpha 16 | 5 de junio de 2025
Divi 5 recrea el concepto de « estilos de extensión », conocido en Divi 4, pero ampliamente enriquecido. Ahora puede propagar uno o más atributos — estilos, presets o contenidos — d
El menú « Atributos extensos » (accesible por clic derecho) le permite elegir la fuente, el destino (columna, línea, sección, página completa) y el tipo de atributo a extender. Puede ampliar estilos individuales, grupos de opciones o presets, con una selección muy fina de campos para propagar.
Además, el panel « Atributos extensos » automáticamente se adapta 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 incorpora esta característica que fue indispensable en Divi 4 para crear sitios más productivos.
10 – Buscar y reemplazar | Public Alpha 17 | 18 de junio de 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
Finalmente, es posible utilizar colores relativos basados en HSL (Hue, saturation, Lightness): sus colores pueden definirse como variables y ajustarse matemáticamente entre sí.
Por ejemplo, puede declarar su color « Primaria » entonces crear declinaciones (tetos, 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 « seguidor del ratón » con efectos de inclinación o opacidad.
13 – Flexbox | Public Alpha 18.2 | 10 de julio 2025
¡Es una revolución que todos estábamos esperando! 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 lineal, orden) y ajustando alineaciones verticales o horizontales – todo sin tener que codificar (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.
🤩 Finalmente puedes construir páginas de contenido personalizadas sin un módulo « blog » impuesto, con total libertad en diseño y estructura.
15 - Nuevos módulos: Grupos Carousel, Lottie y lista de iconos | Public Alpha 20.1 | 8 de agosto de 2025
Divi 5 enriquece su gama de módulos con tres valiosas adiciones:
- Un módulo Group Carousel muy flexible: cada uno « diapositiva » 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 – WooCommerce Módulos | Public Alpha 21 | (15 de agosto de 2025)
Con esta actualización, Divi 5 ofrece una primera serie de 17 módulos nativos WooCommerce, sin etiqueta « legado ». 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...
Con el constructor de bucles también puede crear bucles personalizados en sus productos (requestas, estilos) en lugar de sólo el módulo « Productos » Estándar.
Los módulos restantes para la canasta y validación de comandos llegarán en segunda ocasión.
17 – Editor responsable | Public Alpha 22 | 27 agosto 2025
Divi 5 presenta un editor reactivo centralizado que facilita la gestión de estados sensibles, « Hover » y « cosquillas » desde una única 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 « alto nivel », mientras permanece accesible para principiantes gracias a los modelos.
20 – WooCommerce Módulos de cesta y pago | Public Alpha 24 | 26 de septiembre 2025
Era la parte desaparecida de los módulos WooCommerce que « e-comercial en el amor con Divi » ¡Espera!
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 sentí 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 « Vale la pena esperar. » ¡Oye! ¿Y ese es tu sentimiento también?
Para terminar este artículo, pensé que una pequeña recaptura sería bienvenida 👇
| 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 commentaires