Dos conciencias

Crear sitios web visualmente atractivos y técnicamente eficientes puede ser un reto, sobre todo si buscas un equilibrio entre diseño adaptable y facilidad de uso. La nueva actualización de Divi 5, el popular constructor visual de WordPress de Elegant Themes, da un paso firme hacia la flexibilidad total al integrar unidades avanzadas con soporte para funciones y variables CSS directamente desde su interfaz.

Desde WWWhatsnew.com hemos seguido de cerca la evolución de Divi, y esta mejora representa una herramienta poderosa tanto para diseñadores expertos como para quienes apenas están comenzando a explorar el diseño web. Vamos a desglosar en qué consiste esta novedad y por qué podría marcar una diferencia real en tus proyectos.

¿Qué es el nuevo campo de unidades avanzadas de Divi?

Hasta ahora, al modificar tamaños o márgenes en Divi, nos encontrábamos con controles básicos como deslizadores o cuadros de texto que limitaban las posibilidades creativas. Con Divi 5, ese enfoque ha sido reemplazado por un campo multifuncional que admite:

• Todos los tipos de unidades CSS (px, %, em, rem, vw, etc.).
• Funciones CSS, como calc() y clamp().
• Variables CSS personalizadas, reutilizables en todo el diseño.

Imagina que estás ajustando el tamaño de un título: ahora puedes escribir directamente clamp(1rem, 5vw, 3rem) y lograr que el texto se adapte fluidamente a la pantalla del usuario, sin necesidad de aplicar reglas manuales para cada dispositivo.

¿Por qué es tan importante el soporte para funciones CSS?

Cuando diseñamos para múltiples resoluciones —móviles, tablets, monitores grandes—, queremos que los elementos de la página se escalen de forma inteligente. Aquí es donde funciones como clamp() y calc() entran en juego.

• clamp(min, ideal, max) permite que el tamaño de un elemento sea flexible, pero dentro de ciertos límites. Es como darle a tu diseño una goma elástica con topes.
• calc() combina unidades distintas para obtener valores dinámicos. Por ejemplo, podrías definir un ancho como calc(100% - 60px) para restar márgenes fijos a un contenedor que, de otro modo, ocuparía todo el ancho.

Estas herramientas, ahora integradas en el nuevo editor de Divi, eliminan la necesidad de tocar código o salir del entorno visual para lograr ajustes avanzados.

---

Usa cualquier unidad CSS, sin restricciones

Con esta actualización, Divi ya no impone limitaciones sobre qué unidades puedes usar. Puedes trabajar con:

• Unidades relativas como vw (porcentaje del ancho de la ventana), ideales para diseños adaptables.
• Unidades absolutas como px o rem, útiles cuando necesitas precisión.
• Unidades especiales, como fit-content, que ajusta el ancho al contenido, o valores globales como auto, initial y unset.

Este nivel de flexibilidad era, hasta ahora, terreno exclusivo del código manual. Pero ahora está al alcance de cualquiera, directamente desde la interfaz visual.

Variables CSS personalizadas: centraliza el control de tu diseño

Una de las funciones más potentes que llegan con Divi 5 es el soporte para variables CSS. ¿Qué significa esto en la práctica?

Puedes definir una serie de variables, como por ejemplo:

Y luego usar esas variables a lo largo de todo tu sitio. Si más adelante decides que los títulos deben ser un poco más grandes, solo necesitas cambiar el valor de la variable en un único lugar. Esto mejora la coherencia del diseño, reduce errores y acelera el mantenimiento del sitio web.

En mi opinión, este tipo de herramientas acerca a Divi a las mejores prácticas del diseño profesional sin renunciar a su enfoque visual e intuitivo.

Una interfaz rediseñada que no sacrifica simplicidad

El nuevo campo no es solo poderoso: también está diseñado pensando en la experiencia del usuario. Puedes:

• Arrastrar un deslizador como siempre.
• Ajustar valores con precisión escribiéndolos directamente.
• Elegir entre unidades o funciones CSS comunes desde un menú contextual.

Esto lo convierte en un puente perfecto entre lo visual y lo técnico. Como lo vemos desde WWWhatsnew.com, es una solución elegante para usuarios que quieren libertad sin renunciar a la comodidad.

¿Ya puedes usar estas funciones?

Sí. Si estás usando la versión Divi 5 Public Alpha, estas herramientas ya están disponibles. Aunque esta versión aún no está recomendada para sitios web en producción (por falta de algunas funciones heredadas de Divi 4), es totalmente funcional para nuevos proyectos o pruebas.

Desde Elegant Themes aseguran que cada dos semanas se liberan nuevas funciones, y todo apunta a que 2025 será un año clave en la transformación del ecosistema Divi.

¿Qué viene después?

En su hoja de ruta, los desarrolladores ya están trabajando en Divi Design Variables, una función que se complementará con las unidades avanzadas para crear un sistema de diseño robusto, centralizado y coherente.

Esta evolución apunta claramente a satisfacer las necesidades de diseñadores avanzados, sin dejar de lado a los usuarios que prefieren la edición visual.

En WWWhatsnew.com lo vemos así:

Divi está madurando y volviéndose más técnico sin dejar de ser accesible. Este tipo de actualizaciones no solo ofrecen más control, también reducen el tiempo invertido en mantenimiento, aumentan la consistencia del diseño y facilitan la colaboración entre diseñadores y desarrolladores.

Desde nuestro punto de vista, integrar funciones CSS y variables en un entorno visual es una jugada acertada que puede marcar una diferencia real para quienes buscan eficiencia, estética y escalabilidad.

---

https://ift.tt/KRfnmw6
by Natalia Polo via WWWhat's new