Si llevas tiempo trabajando con Divi y has tenido que abrir el CSS custom para ajustar el padding de un botón dentro de un módulo de Blurb, mover apenas 2 píxeles el título de un Team Member, o forzar un hover que el módulo nativo no traía, te tengo buenas noticias. Divi 5 acaba de liberar una característica que cambia ese flujo por completo: los Composable Settings en Divi 5.

Es, sin exagerar, una de esas features que no aparece en titulares pero que, cuando la pruebas, te das cuenta de que llevabas años perdiendo tiempo en ajustes que ahora se resuelven dentro del Visual Builder. En este post te explico qué son los Composable Settings, cómo activarlos, los 4 casos donde más diferencia hacen y los tips para usarlos sin saturar la interfaz. Vamos.

¿Qué son los Composable Settings en Divi 5?

Los Composable Settings son una característica nueva del Visual Builder de Divi 5 que te permite habilitar grupos de opciones de diseño adicionales sobre los sub-elementos de un módulo — títulos, botones, imágenes, iconos, body text — sin tener que escribir CSS custom.

Hasta ahora, cuando trabajabas con un módulo de Blurb, un módulo de Team Member o un módulo de CTA, las opciones de diseño para cada sub-elemento eran las que el equipo de Elegant Themes había decidido por defecto. Si querías ajustar algo más fino — un margen específico en el título, una transformación en hover, un border-radius en la imagen interna — la única salida era el CSS custom o un plugin de terceros.

Con Composable Settings eso cambia. Cada módulo te muestra ahora un sistema donde puedes componer qué grupos de opciones aparecen para cada sub-elemento. Activas el grupo que necesitas, ese sub-elemento desbloquea cientos de propiedades adicionales (espaciado, transformaciones, efectos, tipografía avanzada, sizing, hover states) y trabajas todo desde el constructor visual.

La traducción práctica: muchos ajustes que antes pedían CSS custom ahora son nativos. Esta filosofía es la misma que sigue Divi 5 con el nuevo sistema de atributos personalizados — expandir opciones nativas que antes obligaban a tirar de código.

Por qué cambian el flujo del diseñador Divi

Hay tres razones por las que esta característica, que parece pequeña, en realidad cambia cómo entregas un sitio:

1. Reduces tu CSS custom drásticamente. En la mayoría de proyectos, el archivo de CSS custom acababa con 30-60 reglas de ajustes finos sobre módulos. Con Composable Settings, esas reglas desaparecen porque las haces dentro del módulo.
2. El diseño queda dentro del constructor, no en código externo. Cuando un cliente o un compañero de equipo abre tu sitio meses después, todo lo que afecta el aspecto visual está en el módulo. Nadie tiene que abrir un archivo de CSS para entender por qué algo se ve así.
3. Iteras más rápido. Cambiar un padding ahora es mover un slider, no inspeccionar el elemento, escribir la regla CSS y refrescar.

Para mí, el cambio más concreto es que entrego sitios con menos código custom — y eso significa menos riesgo cuando hay actualizaciones, menos puntos donde algo se rompe y menos documentación que dejar al cliente.

Cómo activar y usar Composable Settings paso a paso

El sistema funciona así dentro del Visual Builder:

1. Abre cualquier módulo que tenga sub-elementos (Blurb, Person, Team Member, CTA, Pricing Table — la mayoría de módulos compuestos).
2. Ve a la pestaña Diseño.
3. Identifica el sub-elemento que quieres ajustar (Título, Cuerpo, Botón, Imagen, Icono).
4. En la parte superior del bloque de configuración de ese sub-elemento aparece un control nuevo que te permite agregar grupos de opciones.
5. Selecciona los grupos que necesitas — Spacing, Sizing, Border, Box Shadow, Filters, Transform, Animation, Conditions.
6. El sub-elemento desbloquea las opciones del grupo y trabajas como con cualquier otra sección del Builder.

Si el sub-elemento ya trae esas opciones por defecto no aparecen como composables — ya están ahí. Composable Settings es solo para los grupos extra que el módulo no traía habilitados de fábrica.

Consejo: No actives todos los grupos disponibles «por si acaso». Cada grupo activo añade scroll y fricción visual al panel del módulo. Activa solo cuando vayas a usar el grupo en ese módulo concreto.

4 casos de uso reales donde Composable Settings te ahorra horas

Aquí es donde la feature deja de ser teoría y empieza a ahorrar tiempo de verdad. Estos son los 4 casos donde más la uso en proyectos de cliente.

1. Espaciado de precisión en títulos de Blurb

El módulo Blurb tiene un título por defecto, pero el espaciado entre el título y el icono o entre el título y la descripción suele venir cerrado. Con Composable Settings activas el grupo Spacing sobre el sub-elemento Título y ajustas margen y padding al píxel — sin CSS custom.

Esto es especialmente útil cuando el blurb va dentro de un grid donde necesitas alinear visualmente los títulos con el resto del layout. Antes era CSS dirigido a .et_pb_blurb h4; ahora son tres sliders.

2. Botones animados para CTAs

Activar Transform y Animation sobre el sub-elemento Botón te deja crear estados de hover con escala, rotación, traslación o cambio de color de borde sin código. Para los CTAs de un hero o de una sección de pricing, esto es lo que diferencia un sitio que se siente vivo de uno que parece un PDF imprimible.

3. Efectos en imágenes de Team Member

El módulo Team Member tiene su imagen interna sin demasiadas opciones de filtros o transformaciones. Con Composable Settings activas Filters y Border sobre la imagen del miembro y le aplicas border-radius custom, grayscale en estado normal con color al hover, sombra suave, etc. Lo que antes implicaba CSS dirigido a .et_pb_team_member_image img, ahora son sliders dentro del módulo.

4. Consistencia en módulos repetidos

Cuando tienes 6 módulos del mismo tipo en una sección (típico en un grid de servicios o una lista de FAQ), antes podías estilizar uno y replicar al resto, pero los ajustes finos se hacían en CSS para mantener la consistencia. Con Composable Settings, configuras los grupos activados que necesitas y los guardas como preset. Todos los módulos heredan exactamente esas opciones extra. Una sola fuente de verdad.

🛠️ Aprende el flujo completo de Divi 5 con casos reales
En el curso completo de Divi 5 aplico estas características a proyectos reales de cliente, no solo a ejemplos de demo. Desde Composable Settings hasta Loop Builder, presets globales y el flujo entero con IA integrada.

Tips y buenas prácticas para no romper tu sitio

Activa solo lo que necesitas

Composable Settings te da cientos de opciones adicionales, pero eso no significa que las quieras todas activas. Más opciones = más scroll = más fricción al editar. Mi regla: activa el grupo cuando vas a usarlo, no antes. Si en una semana descubres que necesitas otro, lo activas en ese momento.

Combínalos con presets desde el inicio

Esta es la parte donde el flujo se vuelve realmente potente. Cuando configures un módulo con sus Composable Settings activos, guárdalo como preset. De ahí en adelante, cada módulo nuevo del mismo tipo va a heredar tu configuración personalizada — incluyendo qué grupos de opciones tiene activos.

Si todavía no manejas el sistema de presets de Divi 5 a fondo, te recomiendo leer primero el post sobre los presets de grupos y elementos en Divi 5 — porque la combinación Composable Settings + presets es lo que realmente cambia tu velocidad de entrega.

Revisa el responsive temprano

Activar Composable Settings con valores absolutos (px, em fijos) puede romper el responsive si no lo revisas pronto. Usa unidades relativas cuando puedas, y revisa breakpoints intermedios desde el primer momento. El nuevo Responsive Editor de Divi 5 te ayuda mucho con esto — te muestra los valores aplicados a cada breakpoint sin tener que cambiar de vista.

Consejo: Cada vez que ajustes un Spacing o un Sizing con Composable Settings, comprueba inmediatamente cómo se ve en tablet y en móvil. Es mucho más fácil corregir un padding al instante que descubrir tres semanas después que media web tiene problemas en pantallas pequeñas.

Úsalos para reducir CSS debt

Antes de abrir el CSS custom para añadir un ajuste, pregúntate primero: ¿esto se puede resolver con un Composable Setting? En el 70-80% de los casos la respuesta es sí. Cada regla que evitas es CSS debt que tu cliente no va a tener que mantener cuando llegue una actualización de Divi o cambie de diseñador.

Composable Settings dentro del sistema de diseño completo

Composable Settings no funciona solo. Cobra todo su sentido cuando lo combinas con las otras tres patas del nuevo flujo de Divi 5: variables globales, presets y Theme Builder. Ese conjunto es lo que llamo el sistema de diseño completo.

Si quieres ver cómo encajan las cuatro piezas, te dejé un post entero dedicado al sistema de diseño en Divi 5 donde cubro variables globales, presets, componentes y cómo Composable Settings se integra en ese flujo. Léelo en orden con este si quieres montar la base de tu próximo proyecto desde cero.

🎓 ¿Quieres dominar Divi 5 con un flujo profesional?
En uxdivi.com/cursos tenemos contenido premium donde te enseño el flujo completo de Divi 5 + IA aplicado a proyectos reales: variables, presets, Composable Settings, Loop Builder, Theme Builder y todo lo que necesitas para entregar sitios en la mitad del tiempo. ¡Accede como suscriptor y aplícalo desde el primer día!

Recomendaciones finales

Si vas a empezar a usar Composable Settings en Divi 5, te dejo las cinco cosas que considero más importantes:

1. Pruébalo primero en un módulo, no en todo el sitio. Familiarízate con el flujo en una sección de prueba antes de aplicarlo a un proyecto real de cliente.
2. Activa solo los grupos que vas a usar. No satures el panel del módulo con opciones que no necesitas.
3. Combínalos con presets desde el inicio. Esa combinación es la que multiplica tu velocidad de entrega.
4. Revisa responsive en cada ajuste. Es la parte donde más fácil se rompe el diseño si trabajas con valores absolutos.
5. Cuestiona cada regla de CSS custom antes de escribirla. Tu cliente y tu yo del futuro te lo van a agradecer.

Los Composable Settings en Divi 5 no son una novedad cosmética. Son un cambio en cómo se construye dentro de Divi: menos código custom, más control nativo, mejor mantenibilidad. Si ya estás migrando proyectos a Divi 5, esta es de las primeras características que vale la pena dominar.