El sistema de presets de Divi 5 ya era el más potente de cualquier constructor para WordPress. Pero con esta actualización, da un salto que lo cambia de categoría. Ahora puedes aplicar presets a sub-opciones que antes no los soportaban, y puedes anidar presets de opciones dentro de otros presets de opciones, creando un sistema de diseño verdaderamente modular. Si en algún momento te preguntaste cómo los diseñadores que trabajan con frameworks como Tailwind gestionan la consistencia a escala, esto es exactamente la versión visual de ese concepto para Divi 5.

En este post te explico qué cambió, qué significa en la práctica y cómo lo puedes aplicar en tus proyectos desde hoy. Si ya trabajaste con los presets anidados en Divi 5 en versiones anteriores, esta actualización es la extensión lógica de esa idea — llevada a un nivel más profundo y más completo.

¿Qué son los presets de opciones y por qué importa esta actualización?

Para entender el impacto de esta actualización, hay que tener claro cómo funciona el sistema de presets en Divi 5. Cuando editas un elemento en el visual builder, las opciones están agrupadas: hay un grupo para bordes, otro para sombras, otro para tipografía, otro para el botón si el módulo lo tiene. Cada uno de estos grupos puede tener su propio preset — un estilo guardado que puedes reutilizar en otros módulos.

Antes de esta actualización, los presets de opciones solo se podían aplicar a nivel de elemento o de grupo de opciones de primer nivel. Las sub-opciones dentro de esos grupos — por ejemplo, el borde del botón dentro del grupo de opciones de un módulo Call To Action — no tenían soporte para presets. Tenías que configurarlas manualmente en cada módulo donde aparecieran. Eso podía funcionar en proyectos pequeños, pero en un sitio con decenas de módulos, era un problema de consistencia real.

Con esta actualización, ese límite desaparece. Y además se agrega algo nuevo: los presets de opciones ahora se pueden anidar dentro de otros presets de opciones, creando relaciones jerárquicas entre estilos. Eso es lo que lo hace cualitativamente distinto de todo lo que Divi ofrecía antes.

Presets para opciones anidadas: ya no hay sub-elementos excluidos

El primer cambio es el más directo: todos los grupos de opciones anidadas ahora soportan presets. En la práctica, esto significa que sub-elementos como el botón dentro de un Call To Action, los campos de input dentro de un módulo de contacto, o la imagen dentro de un Blurb — todos pueden tener sus propios presets de opciones aplicados.

🎓 ¿Quieres entender el sistema de presets de Divi 5 desde la base?
En el Curso de Divi 5 explico cómo construir un sistema de diseño profesional usando variables globales, presets de módulos y presets de opciones, con ejemplos aplicados a proyectos reales de cliente. Accede como suscriptor y aprende el método completo.

Piénsalo así: si defines un preset «Botón Principal» que incluye el estilo del borde del botón, el radio, el color y la tipografía, ahora puedes aplicar ese preset directamente al grupo de opciones del botón dentro de cualquier módulo que lo tenga, sin tener que reconfigurar esas opciones módulo por módulo. Es el mismo concepto de reutilización que ya existía para los módulos completos, pero bajando un nivel más dentro de la jerarquía de opciones.

Esto se potencia enormemente cuando se combina con los Composable Settings de Divi 5: como Composable Settings permite habilitar grupos de opciones para cualquier elemento, los presets ahora se pueden aplicar a prácticamente cualquier sub-elemento de cualquier módulo. El sistema de diseño de Divi 5 se vuelve verdaderamente universal.

Consejo: Empieza por definir presets para los sub-elementos que más se repiten en tus proyectos: bordes de botones, estilos de inputs, radios de imagen. Son los que más tiempo pierdes configurando manualmente de módulo en módulo.

Presets dentro de presets: la tercera capa de anidamiento

Este es el cambio más importante y el que realmente abre una nueva forma de pensar el diseño en Divi 5. Antes de esta actualización, ya existía la posibilidad de anidar un preset de opciones dentro de un preset de elemento. Por ejemplo, podías tener un preset de elemento «Dark Blurb» que incluía dentro un preset de opciones «Botón Sólido». Si cambiabas el preset de botón, todos los Blurbs que lo usaran se actualizaban solos.

Con esta actualización, Divi 5 agrega una tercera capa: ahora los presets de opciones se pueden anidar dentro de otros presets de opciones. El ejemplo que mejor lo ilustra es el que menciona el propio equipo de Elegant Themes:

• Tienes un preset de elemento: «Dark Blurb».
• Dentro de ese preset, está anidado un preset de opciones: «Botón Sólido».
• Dentro del preset de botón, está anidado un preset de opciones: «Borde Pill».

Si en algún momento quieres cambiar el radio del borde pill en todo tu sitio, solo modificas el preset «Borde Pill». Ese cambio se propaga automáticamente al preset de botón, que a su vez actualiza el preset de Blurb, que a su vez actualiza todos los módulos del sitio que usan ese preset. Un cambio en un lugar, impacto global e instantáneo.

Esto es exactamente lo que en CSS harías con variables en :root o con mixins en Sass. Solo que aquí lo haces de forma completamente visual, desde el panel de opciones del constructor. Para los que trabajan con el Sistema de Diseño en Divi 5, esto es la pieza que faltaba para completar el círculo.

Consejo: Planifica la jerarquía de presets antes de crearlos. Un buen punto de partida: crea primero los presets «atómicos» (borde, sombra, radio) y luego construye hacia arriba anidándolos en presets de opciones más complejos. Así cualquier cambio base se propaga solo.

Cómo funciona en la práctica: el ejemplo de los bordes de sitio

Para que quede concreto, te pongo el ejemplo que más me convenció del potencial de esta actualización. Imagina que tienes un sitio donde usas un estilo de borde consistente — digamos bordes redondeados con un radio de 8px, color primario de la marca, grosor de 2px. Ese estilo aparece en botones, en tarjetas de producto, en campos de formulario y en módulos de imagen.

🎓 ¿Quieres ver cómo construir este tipo de sistema de diseño paso a paso?
En uxdivi.com/cursos tenemos contenido premium donde te enseño a construir sistemas de diseño modulares con Divi 5 desde cero, aplicados a proyectos reales con clientes. Accede como suscriptor y aprende a trabajar de forma profesional y escalable.

Con el sistema anterior, ese estilo de borde vivía duplicado en cada preset de elemento que lo usara. Si el cliente decidía cambiar el radio de 8px a 12px, tenías que abrir cada preset y actualizarlo manualmente. Con el nuevo sistema, creas un único preset de opciones de borde — llamémoslo «Borde Primario» — y lo anidas dentro de todos los presets que lo necesiten. Cuando el cliente pide el cambio, lo modificas una sola vez y se propaga a todo el sitio automáticamente.

Este mismo principio aplica a cualquier sub-elemento: sombras, tipografía de label, estilos de placeholder en los campos de formulario en Divi 5. El sistema de presets anidados hace que el mantenimiento de un sitio a largo plazo sea cualitativamente más eficiente.

Por qué esto es diferente a lo que hacen otros constructores

Vale la pena poner esto en contexto. Otros constructores para WordPress tienen sistemas de estilos globales, pero son planos: defines un color, una tipografía, un tamaño de borde para todo el sitio. Son variables, no un sistema modular. Lo que Divi 5 está construyendo es diferente en concepto: es una jerarquía de presets donde cada nivel puede contener y propagar cambios a los niveles inferiores.

La analogía más cercana en el mundo del desarrollo es el sistema de mixins de Sass o las utility classes de Tailwind: defines unidades pequeñas y las compones para construir componentes más complejos. En Divi 5, esas «unidades» son los presets atómicos (bordes, sombras, tipografías) y los «componentes» son los presets de opciones y de elemento que los contienen. Es el mismo principio de diseño atómico aplicado a un constructor visual.

Lo que te recomiendo hacer con esta actualización

1. Audita tus presets actuales. Si ya usas presets en Divi 5, revisa cuáles tienen configuraciones repetidas entre sí — bordes, sombras, tipografías. Esas son las candidatas perfectas para extraer en presets atómicos compartidos.
2. Empieza con un solo sub-elemento. No intentes reestructurar todo el sistema de una vez. Elige un elemento que uses mucho — el borde de tus botones, por ejemplo — crea su preset atómico y anídalo donde corresponda. Verás el beneficio de inmediato.
3. Documenta tu jerarquía. Cuando los presets se anidan en tres niveles, es fácil perder la referencia de qué depende de qué. Un esquema simple (en Notion o incluso en papel) de la jerarquía de presets del proyecto te ahorra horas de confusión en el futuro.
4. Combínalo con variables globales. Los presets anidados y las variables globales no son lo mismo, pero se complementan. Las variables definen valores (un color, un tamaño); los presets definen cómo se aplican esos valores a los elementos. Úsalos juntos para tener el control total del diseño del sitio.
5. Pruébalo en un proyecto nuevo primero. Antes de reestructurar el sistema de presets de un sitio existente, experimenta con el nuevo flujo en un proyecto desde cero. Es más fácil construir la jerarquía bien desde el inicio que migrar una existente.

🎓 ¿Quieres dominar el sistema de diseño completo de Divi 5?
En uxdivi.com/cursos tenemos el Curso de Divi 5 donde aprenderás a construir sistemas de diseño con variables globales, presets de opciones, presets de elementos y anidamiento — todo aplicado a proyectos reales. Accede como suscriptor y empieza hoy.

Conclusión

Los presets dentro de presets en Divi 5 no son una mejora incremental — son la maduración del sistema de diseño que Elegant Themes lleva construyendo desde que lanzaron la versión 5. Con este nivel de anidamiento, Divi 5 ofrece algo que ningún otro constructor para WordPress tiene: un sistema de diseño modular real, donde cada cambio en un preset base se propaga automáticamente a todos los elementos que lo usan. Si trabajas con proyectos de cliente a mediano o largo plazo, esto cambia directamente cuánto tiempo dedicas al mantenimiento del diseño.