Divi Presets: cómo usar los preajustes en Divi

¡Hola Queridos Divifans! Traemos en primicia la explicación de la nueva actualización de Divi donde hacen una introducción a Divi Presets o Ajustes preestablecidos de Divi. Recién salido del horno y para todos ustedes.

Si llevas tiempo diseñando con Divi, seguramente conoces esa sensación de armar un botón perfecto, con su color de marca, su tipografía, su borde redondeado y su espaciado milimétrico, y luego tener que repetir esa misma configuración manualmente cada vez que agregas un botón nuevo. Multiplica eso por todos los módulos de un sitio completo y entenderás por qué esta actualización fue una de las más celebradas en la historia de Divi. Los presets vienen a resolver exactamente ese dolor, y en este artículo te explico qué son, cómo funcionan y por qué cambian la forma de trabajar para siempre.

En palabras de Elegant Themes:

Hoy nos complace presentar Divi Presets, el nuevo sistema de diseño basado en clases que cambiará la forma en que diseñas los sitios web de Divi para siempre. Cuando personalizas el estilo de un módulo, fila o sección Divi, ahora puedes guardar ese estilo personalizado como Divi Preset o Preestablecido. Ese valor predeterminado se puede aplicar a elementos en todo tu sitio web para que todos compartan la misma apariencia personalizada. Cuando modifiques un ajuste preestablecido, todos los elementos que lo usen reflejarán el cambio. Además, cuando agregas un nuevo elemento a una página, puede aplicar rápidamente cualquiera de sus ajustes preestablecidos guardados en lugar de tener que comenzar desde cero. Este es un gran cambio en el sistema de diseño Divi y una de las características Divi más importantes que hemos lanzado en años.

Elegant Themes

¿Qué es un preajuste de Divi o Divi Preset?

Cada módulo Divi viene con una amplia gama de configuraciones de diseño que puedes usar para personalizar su apariencia. Puedes tomar un módulo de botón Divi estándar y agregar un nuevo color de fondo, esquinas redondeadas, texto más grande y una fuente personalizada (entre muchas otras cosas). Esa es la belleza de Divi: ¡control total del diseño! Sin embargo, diseñar cientos de módulos en todo tu sitio web lleva mucho tiempo… hasta ahora.

El nuevo sistema Divi Presets te permite tomar una apariencia personalizada y guardarla como un ajuste preestablecido. Todos los cambios de diseño que realices se guardan en el preajuste. Cuando agregas un nuevo módulo a tu página, puedes explorar tus "presets" guardados y aplicarlos rápidamente.

Una vez que se ha aplicado un valor predeterminado, el diseño predeterminado del módulo es controlado por el valor predeterminado. Si actualizas el estilo de un preset, todos los módulos que usan ese preset también se actualizan. Esto te permite controlar el diseño de todo tu sitio web utilizando una pequeña colección de ajustes preestablecidos guardados. Además, ahorrarás toneladas de horas al agregar nuevos módulos a tu página, ya que no necesitarás diseñar cada nuevo módulo desde cero, sino que podrás seleccionar rápidamente una apariencia de tu biblioteca Divi Presets.

La diferencia entre un preset y la biblioteca Divi

Acá conviene aclarar una confusión muy común. Divi siempre tuvo la opción de guardar módulos, filas y secciones en su Biblioteca para reutilizarlos. Entonces, ¿en qué se diferencia un preset de eso? Cuando guardas un elemento en la Biblioteca, estás guardando una copia: si la usas en diez páginas y luego quieres cambiar un color, tienes que editar las diez copias una por una.

Con un preset es al revés. El preset es una definición de estilo viva y centralizada: si lo aplicas a cien botones y luego cambias el color del preset, esos cien botones se actualizan al instante. La Biblioteca guarda contenido completo (texto y estructura); el preset guarda solo el estilo y lo mantiene vinculado a todos los elementos que lo usan. Son complementarios: la Biblioteca para bloques de contenido que repites, los presets para consistencia de estilo a escala.

Consejo: Crea tus presets base ANTES de empezar a maquetar un sitio nuevo. Define primero el preset de tu botón principal, tu botón secundario, tus títulos y tu texto de cuerpo. Así, a medida que construyes las páginas, solo aplicas presets y todo nace consistente desde el primer módulo.

Por qué los "presets" Divi son tan importantes

Si eres diseñador web de WordPress, probablemente estés familiarizado con HTML y CSS. Ahora imagínate tener que crear un sitio web desde cero usando HTML y CSS, pero sin el uso de clases CSS.

Deberás agregar la información de estilo para cada elemento individualmente usando estilos en línea. Si quisieras actualizar un estilo compartido en todo tu sitio, tendrías que hacerlo cientos o miles de veces ya que ninguno de esos elementos estaba usando clases CSS compartidas. Eso suena terrible, ¿verdad?

Lo creas o no, ese es el estado actual de la mayoría de los creadores de páginas, y ese era el estado actual de Divi hasta ahora. Las clases son para CSS, lo que los Presets son para Divi.

Un sitio web diseñado de manera inteligente usando Divi Presets se puede administrar con mucha más facilidad que nunca, ya que los estilos del sitio web se consolidan en una pequeña colección de presets compartidos que representan un sistema de diseño más amplio.

Este es un cambio importante en la metodología de diseño de Divi y una gran ventaja para los usuarios de Divi.

Cómo crear y aplicar un preset paso a paso

La teoría está clara, así que veamos el flujo práctico. Crear tu primer preset es más sencillo de lo que parece, y una vez que lo haces, el resto se vuelve natural.

Crear un preset desde un módulo existente

Lo primero es diseñar un módulo a tu gusto. Toma, por ejemplo, un botón y configúralo completamente: color de fondo con el tono de tu marca, tipografía, tamaño de texto, borde y sombra. Cuando estés conforme, abre sus opciones y, en la parte superior del panel, encontrarás un menú desplegable de presets. Desde ahí eliges crear un nuevo preset a partir de los estilos actuales, le pones un nombre descriptivo como "Botón principal" y lo guardas.

A partir de ese momento, cada vez que agregues un módulo de botón podrás aplicar "Botón principal" con un solo clic y el módulo adoptará todos los estilos que definiste. Y acá viene lo mágico: si más adelante necesitas cambiar el color de todos tus botones principales, editas el preset una vez y el cambio se propaga a todos los botones del sitio.

Definir un preset por defecto

Hay una función todavía más poderosa: puedes marcar un preset como predeterminado para cierto tipo de módulo. Así, cada nuevo módulo de ese tipo nacerá automáticamente con ese estilo, sin que lo apliques manualmente. Si defines tu "Botón principal" como preset por defecto, todos los botones que crees ya vendrán listos con tu diseño de marca. Es la forma más eficiente de mantener coherencia visual sin esfuerzo consciente.

Consejo: No abuses creando un preset para cada pequeña variación. Un buen sistema de presets es pequeño y deliberado: dos o tres estilos de botón, dos de título, uno o dos de texto. Si terminas con cuarenta presets, perdiste el beneficio de la consistencia y volviste al caos del que querías escapar.

Presets y la filosofía de sistemas de diseño

Lo que Divi introdujo con los presets no es solo una comodidad técnica, es una invitación a pensar tu trabajo como un sistema de diseño: un conjunto de reglas y componentes reutilizables que garantizan que todo se vea coherente y se mantenga fácil de actualizar. Esto transforma tu eficiencia, sobre todo si diseñas para clientes. Si seis meses después el cliente decide refrescar su paleta de colores, en lugar de editar módulo por módulo ajustas un puñado de presets y el sitio entero se actualiza en minutos. Para quienes vivimos del diseño web en Latinoamérica, manejando varios proyectos a la vez con márgenes ajustados, esa eficiencia se traduce directamente en rentabilidad.

Preguntas frecuentes sobre Divi Presets

¿Qué pasa si quiero que un módulo específico se salga del preset?

Puedes hacerlo sin problema. Cuando aplicas un preset a un módulo, sigues teniendo la libertad de sobrescribir cualquier opción individual solo en ese módulo. El preset define la base, pero tú puedes ajustar detalles puntuales sin que eso afecte a los demás módulos que usan el mismo preset. Es lo mejor de ambos mundos: consistencia por defecto y flexibilidad cuando la necesitas.

¿Los presets funcionan entre páginas distintas del sitio?

Sí. Los presets son globales para todo tu sitio, no están atados a una página específica. Una vez que creas un preset, está disponible en cualquier página donde uses ese tipo de módulo, y al editarlo el cambio se refleja en todas las páginas a la vez. Esa es precisamente su mayor virtud frente a copiar y pegar módulos.

¿Es difícil migrar un sitio ya hecho hacia el uso de presets?

No es difícil, pero requiere algo de trabajo inicial. Lo recomendable es ir creando presets a partir de los estilos que ya tienes y aplicándolos progresivamente, sección por sección, sin hacerlo todo de golpe. El esfuerzo se recupera la primera vez que necesites un cambio global de estilo.

Conclusión

Divi Presets es, sin exagerar, una de las actualizaciones más transformadoras que Divi ha lanzado. No agrega un módulo ni un efecto vistoso, sino algo más profundo: una forma distinta de pensar y administrar el diseño de tu sitio. Al traer el concepto de clases CSS al constructor visual, te permite trabajar con la eficiencia y consistencia de un sistema de diseño profesional sin escribir una sola línea de código.

Si todavía no los has incorporado a tu flujo de trabajo, te animo a hacerlo en tu próximo proyecto: empieza definiendo tus estilos base antes de maquetar y verás cómo no solo ahorras horas, sino que la calidad y coherencia de tu trabajo dan un salto notable. Es uno de esos cambios que, una vez que lo adoptas, no entiendes cómo trabajabas antes sin él.

¿Qué opinas de esta actualización?

¡Si te ha gustado no olvides compartir en redes sociales! ¡Nos leemos en un siguiente post!

🎓 ¿Quieres aprender a usar Divi como un profesional, desde los presets hasta las técnicas más avanzadas? En uxdivi.com/planes tienes acceso a todos los cursos para llevar tus diseños con Divi al siguiente nivel.