Cuando trabajamos con Divi para proyectos profesionales, una de las claves para mantener consistencia y eficiencia en el diseño es el uso inteligente de presets.

Con la llegada de Divi 5, esta herramienta se ha llevado a un nuevo nivel gracias a una función que muchos no esperábamos, pero que sin duda abre posibilidades muy interesantes: los Presets Anidados. En esta nueva píldora quiero contarte qué son, cómo funcionan, para qué sirven realmente y en qué casos te recomiendo aplicarlos para optimizar tu flujo de trabajo y la calidad de tus diseños.

Qué son los Presets Anidados en Divi 5

Los presets anidados son una función que permite aplicar más de un preset sobre un mismo módulo o elemento dentro de Divi 5. Hasta ahora, Divi permitía asignar un solo preset por módulo, lo que nos obligaba a crear presets adicionales para variaciones pequeñas o incluso a duplicar estilos manualmente.

Con esta nueva característica, podemos combinar varias configuraciones globales en un solo elemento, como si estuviéramos apilando estilos predefinidos. Es decir, puedes tomar un preset que define el border radius, combinarlo con un preset que define un borde, sumarle un preset de sombra y aplicarlo todo en conjunto sobre una imagen o una caja de contenido.

Esta lógica funciona de forma muy parecida a las clases en CSS, donde puedes asignar múltiples clases a un mismo elemento y hacer que todas actúen en conjunto. La diferencia aquí es que no necesitas saber código ni manipular CSS directamente: Divi lo hace por ti desde una interfaz visual.

🔥 Consejo profesional: organiza tus presets por funciones, no por diseños finales. Por ejemplo: “bordes”, “sombras”, “tipografías”, “rellenos”. Luego podrás combinarlos en distintos escenarios sin recrear estilos desde cero.

Cómo funcionan los Presets Anidados paso a paso

Aunque la función suena avanzada, aplicarla es extremadamente sencilla dentro del panel de Divi 5. El proceso se basa en seleccionar uno o varios presets adicionales desde las opciones del módulo.

Paso 1: Selecciona tu módulo

Puede ser un botón, una imagen, una caja de texto o cualquier módulo estándar. Divi 5 habilita presets anidados para una gran cantidad de elementos.

Paso 2: Aplica un preset base

Este es tu preset principal, el que define el estilo general del módulo.

Paso 3: Añade un preset adicional

En la interfaz verás una nueva opción para agregar presets dentro de presets. Simplemente seleccionas el segundo preset y Divi lo combina automáticamente sobre el primero.

Paso 4: Ajusta el orden si es necesario

Así como ocurre con las clases CSS, el orden en que se aplican los presets puede influir en el resultado final. Si un preset modifica algo que otro preset ya cambió, prevalecerá el que tengas más arriba en la jerarquía del módulo.

Paso 5: Guarda y reutiliza

Una vez aplicada la combinación, puedes replicarla en otros elementos con un clic, manteniendo consistencia visual sin tener que recrear configuraciones.

⭐️ Consejo rápido: si un preset afecta valores sensibles como tamaños, espaciados o tipografía, colócalo en primer lugar. Deja para el final los presets que afectan detalles decorativos como sombras, bordes o rellenos.

Cuándo usar Presets Anidados en Divi 5

Aunque esta función pueda parecer útil en todos los escenarios, la realidad es que brilla especialmente en proyectos medianos y grandes donde necesitas mantener un sistema de diseño estructurado.

Aquí tienes algunos casos en los que los presets anidados hacen una diferencia enorme:

1. Sitios con identidad visual sólida

Cuando el cliente tiene una identidad gráfica muy bien definida, podrás crear presets para cada componente estilístico y reutilizarlos sin romper el diseño.

2. Sistemas modulares o design systems

Si construyes sitios reutilizables o trabajas con plantillas internas, podrás controlar estilos como si fueran piezas intercambiables.

3. Equipos de diseño o agencias

Los presets anidados permiten que todos los miembros del equipo sigan estándares y apliquen estilos uniformemente sin depender de hojas de estilo externas.

4. Diseños con variaciones pequeñas

Por ejemplo, si tienes botones con distintos colores pero la misma tipografía, o imágenes con diferentes sombras pero el mismo border radius, los presets anidados eliminan la repetición y el desorden.

Consejo práctico: si estás creando un sistema escalable, evita presets gigantes con 50 configuraciones. Divide tus estilos en presets pequeños y combinables.

Ejemplos reales de uso según el creador del video

Durante la explicación en la píldora de Divi, utilicé un ejemplo muy claro:

• Creamos un preset de border radius.
• Creamos un preset de ancho de borde.
• Aplicamos ambos a una imagen.

El resultado es una imagen con bordes redondeados y un borde de cierto grosor, pero sin necesidad de crear un preset específico para “imagen redondeada con borde”. En un sitio con decenas de imágenes estilizadas, esto puede ahorrar horas de trabajo y reducir errores.

Otro ejemplo es aplicar un preset tipográfico dentro de un preset de contenedor. Imagina que usas un preset que define un fondo con padding y otro preset que define una tipografía específica. Ahora puedes combinarlos sin duplicar configuraciones.

Diferencias entre Presets Anidados y Módulos Anidados

Es importante no confundir conceptos:

• Los Módulos anidados permiten colocar módulos dentro de otros módulos.
• Los Presets anidados permiten combinar estilos predefinidos dentro de un mismo módulo.

Son funciones complementarias, pero actúan en niveles completamente distintos del diseño.

Los presets anidados modifican el “cómo se ve”.
Los módulos anidados modifican el “cómo se estructura”.

Ambos juntos habilitan un flujo mucho más flexible para crear componentes complejos, especialmente pensando en el futuro Menu Builder anunciado por Elegant Themes.

Ventajas de los Presets Anidados

Después de probar esta función en proyectos reales y dentro del curso de Divi 5 en fase desarrollo, puedo destacar estas ventajas:

• Ahorra muchísimas horas de trabajo manual.
• Permite crear sistemas de diseño consistentes.
• Reduce la necesidad de duplicar presets parecidos.
• Ofrece flexibilidad sin depender de CSS.
• Facilita el mantenimiento y edición de estilos.
• Permite experimentar sin arruinar presets existentes.

⭐️ Pequeño consejo: si estás trabajando con clientes que solicitan constantes ajustes visuales, los presets anidados se convertirán en tu mejor herramienta para implementar cambios rápidos sin afectar estructuras globales.

Limitaciones actuales

Aunque la función es poderosa, aún está en sus primeras versiones dentro de Divi 5 y Elegant Themes ha mencionado que seguirá expandiéndola. Algunas limitaciones actuales incluyen:

• No todos los módulos aceptan múltiples presets.
• Puede haber conflictos si dos presets modifican la misma propiedad.
• Aún no hay un panel para visualizar qué presets están aplicados a cada módulo.

Aun así, es evidente que Divi está evolucionando para convertirse en un constructor más modular, más flexible y más preparado para proyectos profesionales.

Cursos recomendados para dominar esta función

Si quieres ir más allá de la teoría y ver cómo aplico esta función paso a paso en un entorno real, te recomiendo estos cursos disponibles en mi plataforma:

• Curso Divi 5 en Fase de Desarrollo
  Aquí muestro en detalle cómo funcionan los presets anidados con ejemplos prácticos.

Conclusión

Los Presets Anidados en Divi 5 representan un paso más hacia un proceso de diseño más ordenado, más profesional y más escalable. Aunque parezcan una mejora pequeña, en realidad solucionan un problema histórico: la necesidad de duplicar presets para variaciones mínimas.

Ahora podemos construir sistemas de diseño más robustos, trabajar más rápido y mantener un nivel de consistencia visual que antes requería CSS avanzado o largas horas de ajustes manuales.

Divi 5 continúa evolucionando y esta función demuestra que Elegant Themes está escuchando a los diseñadores que usamos la herramienta todos los días. Estoy seguro de que, junto con futuras funciones como el Menu Builder, los presets anidados se convertirán en una pieza clave de nuestro flujo de trabajo.

Si quieres aprovechar esta función al máximo, te invito a probarla desde ya y a complementar tu aprendizaje con las clases de nuestro curso de Divi 5 en fase desarrollo.

Nos vemos en la próxima píldora.