Cuando trabajas con Divi, sabes que la eficiencia y la coherencia en el diseño son clave para crear sitios web profesionales y con identidad visual sólida. En esta nueva píldora de Divi 5, quiero explicarte una funcionalidad que me ha parecido un verdadero salto en productividad: los Presets de Grupos o Option Group Presets. Esta característica va más allá de los presets tradicionales, permitiéndote aplicar estilos uniformes a cualquier tipo de elemento dentro de Divi, acelerando el proceso de diseño y homogeneizando la apariencia de tu sitio.

¿Qué son los Presets tradicionales en Divi?

Antes de hablar de los nuevos Presets de Grupos, recordemos que los presets tradicionales en Divi permiten guardar estilos de un módulo específico (por ejemplo, un botón) y luego aplicarlos a otros módulos iguales para mantener consistencia. Además, cuando modificas el preset, los cambios se reflejan automáticamente en todos los módulos que usan ese preset.

Sin embargo, esta funcionalidad estaba limitada a módulos individuales, no a otros elementos como filas, secciones o columnas.

¿Qué son los Presets de Grupos o Option Group Presets en Divi 5?

Los Option Group Presets amplían esta funcionalidad para que puedas crear grupos de estilos que se puedan aplicar a cualquier elemento dentro de Divi: módulos, columnas, filas o secciones.

Esto significa que puedes definir un conjunto de estilos, como un fondo degradado, un borde redondeado, un color específico o un efecto visual, y luego asignar ese grupo a múltiples elementos diferentes con un solo clic.

Por ejemplo, imagina que quieres que varias secciones y módulos de tu sitio tengan un fondo con un degradado particular. Con estos presets de grupo, creas ese fondo una sola vez y luego lo asignas donde quieras sin tener que configurar el estilo módulo por módulo.

Consejo UXDivi: Usar presets de grupo para elementos visuales comunes (fondos, bordes, sombras) acelera enormemente el trabajo y mantiene la coherencia del diseño sin esfuerzos extra.

Cómo funcionan los Presets de Grupos paso a paso

1. Crear un Option Group Preset: Desde el editor Divi, selecciona un elemento (por ejemplo, una sección o módulo) y configura los estilos que quieres agrupar, como background, border radius, box shadow, etc. Luego guarda ese conjunto como un nuevo preset de grupo.
2. Asignar el preset a otros elementos: En cualquier otro módulo, columna, fila o sección, busca la opción para aplicar un preset y selecciona el preset de grupo que creaste. Automáticamente, el elemento adoptará esos estilos.
3. Modificar el preset para actualizar todos: Si luego necesitas cambiar un estilo (por ejemplo, el color del degradado), modifica el preset y todos los elementos que lo tengan aplicado se actualizarán automáticamente.
4. Aplicar a diferentes tipos de elementos: A diferencia de los presets normales, los presets de grupo son universales y pueden aplicarse a múltiples tipos de elementos, lo que da mucha más flexibilidad.

Ejemplo práctico con backgrounds y border radius

En uno de mis proyectos recientes, necesitaba que varios módulos y secciones tuvieran un fondo degradado y bordes redondeados uniformes. Antes esto implicaba configurar cada elemento manualmente, lo que generaba errores y tiempos largos.

Con los Presets de Grupos de Divi 5, creé un preset con el background degradado específico y un border radius de 20 píxeles. Luego simplemente apliqué ese preset a todas las secciones y módulos que lo requerían con un clic.

Cuando después quise cambiar el degradado a un tono más oscuro, solo modifiqué el preset y el cambio se reflejó en todo el sitio de forma instantánea. Esto hizo el proceso mucho más ágil y profesional.

Ventajas de usar Presets de Grupos en Divi 5

• Aceleración del flujo de trabajo: Menos tiempo configurando elementos repetitivos.
• Coherencia visual garantizada: Todos los elementos con el preset aplicado mantienen el mismo estilo.
• Flexibilidad máxima: Aplica el mismo preset a diferentes tipos de elementos.
• Fácil mantenimiento: Cambia un preset y actualiza múltiples elementos al instante.
• Menos errores de diseño: Al evitar configuraciones manuales repetidas.

¿Cómo integrar esta funcionalidad en tus proyectos?

Si ya estás usando Divi 5, esta función está disponible para que la empieces a explorar. Te recomiendo:

• Crear presets para estilos comunes: fondos, bordes, sombras, colores de texto.
• Asignar estos presets a todos los elementos relacionados para mantener consistencia.
• Aprovechar la función para experimentar con variaciones de diseño sin perder uniformidad.
• Combinar los presets de grupos con Custom Breakpoints para controlar estilos según dispositivo.

Tip UXDivi: Usar presets en combinación con estilos globales y variables CSS te dará un control total sobre el diseño adaptable y eficiente.

Recursos y cursos recomendados en UXDivi para dominar Presets de Grupos y Divi 5

Para sacarle el máximo provecho a esta funcionalidad y otras novedades de Divi 5, te invito a revisar estos cursos en uxdivi.com/cursos:

Curso progresivo de Divi 5 en fase de desarrollo: Donde exploramos todas las novedades, incluyendo presets de grupos, Custom Breakpoints, Flexbox y más.

Estos cursos están diseñados para que domines Divi desde lo básico hasta las últimas funcionalidades, acelerando tu trabajo y elevando la calidad de tus proyectos.

Recomendaciones finales para diseñadores y desarrolladores Divi

• Explora y experimenta con los presets de grupos desde tus primeros proyectos con Divi 5 para incorporar buenas prácticas.
• Mantén siempre una biblioteca organizada de presets para reutilizarlos y evitar redundancias.
• Usa presets para mejorar la colaboración en equipos, asegurando que todos usen estilos uniformes.
• Complementa los presets con sistemas de diseño y guías de estilo para potenciar la profesionalidad de tus entregas.
• Sigue actualizado con los cursos y píldoras de Divi 5 para no perder detalle de nuevas funcionalidades.

Los Presets de Grupos en Divi 5 representan una herramienta poderosa para acelerar tu flujo creativo, mantener coherencia visual y facilitar el mantenimiento de tus sitios web. Es una funcionalidad que recomiendo probar cuanto antes para transformar la manera en que diseñas con Divi.

Te espero en nuestro curso de Divi 5 en fase de desarrollo para profundizar en esta y otras funciones, con ejemplos prácticos y estrategias para aplicarlas profesionalmente.