Cómo cambia el diseño basado en preajuste el paradigma de diseño Divi

Las capacidades de diseño de Divi han evolucionado con la introducción de los preajustes de los grupos de opciones en Divi 5. Si bien los presets de elementos han facilitado durante mucho tiempo ahorrar y reutilizar elementos de estilo completamente estilizado, los nuevos preajustes del grupo de opciones agregan una capa de flexibilidad al permitirle reutilizar propiedades de diseño como tipografía, espaciado y efectos en varios elementos.

Juntas, estas características DIVI incorporadas ayudan a remodelar la forma en que los diseñadores abordan la consistencia y la eficiencia, lo que permite iteraciones de diseño más rápidas y actualizaciones globales más fáciles. ¡En esta publicación, nos sumergiremos en cómo estos preestablecidos funcionan juntos para transformar su flujo de trabajo de diseño Divi 5!

Los dos pilares del diseño basado en preajuste

Antes de sumergirnos en los detalles, es importante comprender los dos componentes principales que hacen que el diseño basado en preajuste en Divi sea tan poderoso. Al combinar presets de elementos y preajustes de grupos de opciones, puede crear un proceso de diseño más eficiente, consistente y escalable. Veamos estos dos pilares y cómo trabajan juntos para elevar su flujo de trabajo de diseño.

Presets de elementos: paquetes de diseño reutilizables

Los presets de elementos guardan configuraciones de diseño completas para elementos DIVI específicos. Divi actualmente tiene 4 tipos de elementos distintos: módulos, columnas, filas y secciones. Y cuando se trata de módulos, los presets de elementos también son exclusivos del tipo de módulo (botón, texto, CTA, etc.). Cuando aplica un elemento preestablecido, todas las configuraciones asociadas, como la tipografía, los colores, el espacio y los efectos, se heredan instantáneamente cuando se aplica. El enfoque de los presets de elementos es el siguiente:

• Asegurar la consistencia visual en las páginas
• Reducir las tareas de estilo repetitivo
• Permitir actualizaciones globales para ediciones más rápidas

Presets del grupo de opciones: control de diseño modular

Los preajustes del grupo de opciones se centran en propiedades de estilo como tipografía, sombras de caja, bordes y efectos de desplazamiento. Funcionan en múltiples elementos, lo que permite a los diseñadores mezclar y combinar estilos sin estar atados a un tipo de elemento único. Eso significa que, por ejemplo, puede usar el mismo preajuste de sombra de caja tanto en una fila como en un módulo. Los principales beneficios de usar preajustes de grupos de opciones son:

• Aplicar estilos compartidos a diferentes elementos
• Apilable para personalización avanzada
• Permitir ediciones globales en tiempo real sin afectar módulos individuales

Creación de un flujo de trabajo estructurado con preajustes

Ahora que le hemos mostrado los dos pilares de los presets en Divi, y explicamos brevemente la diferencia, pasemos por algunos consejos para crear un flujo de trabajo estructurado.

Paso 1: Defina estilos de núcleo con preajustes de grupos de opciones

Comience estableciendo los principios de diseño principales de su sitio web. Esto incluye tipografía, colores, estilos de botones, espaciado y más. Estos elementos fundamentales son esenciales para mantener la consistencia en todo su sitio web.

Para configuraciones recurrentes constantemente, puede optar por establecer el grupo de opciones preestablecido como predeterminado. Un buen ejemplo de esto es diseñar su texto de párrafo y usarlo como predeterminado.

Los preajustes del grupo de opciones son versátiles y reutilizables, lo que le permite aplicar estas configuraciones en múltiples elementos. Por ejemplo, una vez que defina un preajuste de Shadow de texto, puede aplicar ese preajuste a los encabezados en todos los tipos de elementos en su sitio web. En esta etapa, está sentando las bases para el resto de su diseño, y estos preajustes deben servir como bloques de construcción de su sitio web.

Paso 2: Crear presets de elementos para módulos específicos

Una vez que haya definido los estilos principales, el siguiente paso es crear presets de elementos para elementos de diseño más específicos. Aunque seguir este orden es el más lógico en teoría, a menudo se encontrará creando ambos simultáneamente. Los presets de elementos son paquetes de diseño completos para elementos individuales (secciones, filas, columnas, módulos) y le permiten aplicar rápidamente estilos consistentes en todo el sitio.

Diseñe un botón CTA de estilo previo utilizando su grupo de opciones predefinido preajustados, centrándose en la tipografía, el color de fondo y los efectos del flujo del botón.

Guarde esto como un elemento preestablecido para uso futuro. Construya otros elementos recurrentes, como módulos testimoniales, secciones de características o tablas de precios, y enséñelos en consecuencia. Cada uno de estos módulos previos al estilo se puede guardar como un elemento preestablecido que puede aplicar cuando sea necesario.

Mientras diseña, piense en guardar diseños que contienen estos preajustes en su biblioteca Divi. Esto le permite mantener una descripción general de todos sus diseños, lo que le ayuda a realizar un seguimiento de cada estilo preestablecido que haya creado. No tienes que preocuparte por hacer que todo sea perfecto desde el principio. A medida que construye su sitio, es probable que modifique estos elementos a medida que avanza.

Paso 3: implementar y ajustar según sea necesario

Una vez que haya creado su grupo de opciones y elementos preestablecidos, puede aplicarlos en su sitio web. Si está construyendo un sitio web desde cero sin usar software de diseño por adelantado, es muy probable que ya haya aplicado sus ajustes preestablecidos durante la compilación de la primera página.

Es posible que deba hacer ajustes a nivel de elemento mientras trabaja. Por ejemplo, si aplica un preajuste a un módulo testimonial pero necesita cambiar el espacio en una página específica, puede hacerlo sin afectar el resto del sitio. Esta flexibilidad le permite ajustar a medida que avanza, asegurando que su diseño permanezca escalable y adaptable.

La clave aquí es pensar en los presets como una herramienta para crear un sistema de diseño flexible y cohesivo en lugar de un marco rígido que debe seguir exactamente. Es probable que necesite ajustar sus estilos mientras continúa construyendo, así que siempre siéntase libre de modificar los presets cuando sea necesario y anularlos en un nivel de elemento. Sigue refinando tu diseño y aproveche al máximo la edición en tiempo real de Divi para hacer esos ajustes sobre la marcha.

Paso 4: Mantenga sus estilos organizados dentro de la Biblioteca Divi

Para realizar un seguimiento de todos sus elementos preestablecidos y diseños, guárdelos en un diseño que pueda mantener en su biblioteca Divi.

A medida que su sitio crezca, podrá ajustar sus presets guardados para mejorar su diseño. Siempre puede modificar sus presets dentro del elemento en el que está trabajando también. Una vez que actualice un preajuste, se actualizará en todo su sitio web.

Paso 5: iterar y mejorar

Una de las mejores cosas del sistema preestablecido de Divi es la capacidad de mejorar y refinar continuamente su diseño. A medida que construye más páginas y diseños, revise su grupo de opciones y su elemento presets para realizar ajustes globales.

Si decide cambiar el color de su botón principal o actualizar el tamaño de fuente de todos los encabezados, puede hacerlo una vez y hacer que se refleje en todo el sitio en todas las instancias en los que se aplica ese preajuste.

A medida que continúe trabajando, obtendrá una comprensión más profunda de qué elementos funcionan bien juntos y cuáles necesitan más ajustes. No tenga miedo de modificar los presets a medida que avanza, y aproveche la flexibilidad de Divi para hacer pequeños cambios que se ajusten a su visión de diseño en evolución.

Al iterando y mejorando continuamente sus preajustes, creará un sitio que no solo es cohesivo sino también adaptable a cambios futuros o tendencias de diseño. Recuerde, el sistema preestablecido es una herramienta para ayudar a optimizar su proceso, no un conjunto de reglas que debe seguir estrictamente desde el primer día.

Los beneficios de un flujo de trabajo basado en preestablecidos

Ahora que hemos pasado por los conceptos básicos de crear un flujo de trabajo estructurado con presets Divi, repasemos algunos de los beneficios que vienen con este enfoque.

Velocidad: reduzca el tiempo de diseño con preajustes listos para usar

Con el sistema preestablecido de Divi, puede reducir drásticamente el tiempo que lleva diseñar un sitio web. En lugar de comenzar desde cero cada vez que necesita diseñar un elemento, simplemente crear y reutilizar el elemento y los preajustes del grupo de opciones. Ya sea que se trate de un botón CTA, un estilo de rumbo o un módulo testimonial, estos preajustes le permiten aplicar un paquete de diseño completo con un solo clic.

Por ejemplo, una vez que haya diseñado un estilo de borde con su grupo de opciones preestablecidos, puede aplicarlo de manera consistente en todas las páginas sin necesidad de rehacer el trabajo.

El elemento presets le ahorra aún más tiempo al permitirle reutilizar módulos de estilo previo. Puede implementar un módulo completamente diseñado con solo un clic, asegurando que su diseño coincida al instante.

Este enfoque de diseño listo para usar le permite construir más rápido y centrarse en los aspectos creativos de su proyecto en lugar de las tareas repetitivas de diseñar elementos individuales.

Consistencia: mantenga un estilo uniforme en las páginas

Una ventaja importante de un flujo de trabajo basado en preestablecidos es la consistencia. Al usar los preajustes de elementos y el grupo de opciones, se asegura de que cada página de su sitio web se adhiera a las mismas reglas de diseño, desde la tipografía hasta el espacio hasta el espacio y los colores.

Configurar un grupo de opciones único preestablecido como el botón predeterminado asegura que los tamaños y estilos de fuentes de su sitio sigan siendo uniformes, sin importar dónde aparezcan. Esta consistencia fortalece la identidad visual de su sitio y le da un aspecto pulido y cohesivo.

En lugar de tratar con estilos inconsistentes en diferentes páginas, puede mantener un sistema de diseño unificado que mejore la experiencia del usuario y haga que su sitio parezca más profesional.

Escalabilidad: Expandir y actualizar fácilmente el diseño del sitio

Los preajustes hacen que sea increíblemente fácil escalar su sitio web a medida que crece. Ya sea que esté agregando nuevas páginas o modificando el diseño de las existentes, puede actualizar su diseño de manera rápida y eficiente. Si necesita agregar una nueva página, simplemente aplique los presets del grupo y el grupo de opciones existentes, asegurando que la nueva página se ajuste a la perfección con el resto del diseño de su sitio.

¿Necesita realizar actualizaciones globales? Con el sistema preestablecido de Divi, puede cambiar un preajuste una vez y reflejarlo automáticamente en todos los casos en que se aplica ese preajuste. Por ejemplo, si desea cambiar el color de todos los botones en su sitio, simplemente actualice el botón Presetado, y cada botón vinculado a ese preajuste se actualizará instantáneamente.

Esta escalabilidad significa que a medida que su sitio evoluciona, puede continuar haciendo crecer su diseño sin tener que reelaborar cada elemento individualmente. Ya sea que esté agregando un blog, nuevos productos o secciones completamente nuevas, su diseño seguirá siendo cohesivo y consistente.

Flexibilidad: anular elementos individuales sin romper el sistema

Si bien los preajustes le brindan un enfoque estructurado para el diseño web, aún permiten flexibilidad. Si necesita hacer ajustes a un elemento específico, puede anular el preajuste de ese elemento sin afectar el resto del diseño.

Por ejemplo, si aplica un elemento preestablecido a un módulo de propaganda pero necesita ajustar el tamaño del icono o el espacio para una instancia específica, puede realizar esos cambios directamente en el módulo sin afectar otras instancias del preajuste en otra parte del sitio. Con los preajustes del grupo de opciones, puede ajustar la configuración individual, como el tamaño de la fuente o el color del botón, para elementos específicos mientras se mantiene los estilos centrales en todo el sitio.

Esta flexibilidad es clave para lograr un aspecto personalizado para secciones únicas de su sitio. Permite una personalización detallada sin romper la consistencia y la estructura que proporcionan los preajustes. A medida que su diseño evoluciona, puede continuar con elementos de ajuste según sea necesario, ofreciendo un equilibrio de control y facilidad que hace que el proceso sea más suave y adaptable.

Comience a diseñar más inteligente con presets en Divi 5

Adoptar un flujo de trabajo basado en preestablecidos redefinirá cómo crea sitios web con Divi. Al aprovechar los preajustes de elementos y los preajustes de los grupos de opciones, puede crear sitios web visualmente impresionantes, altamente adaptables y fáciles de administrar. Opcion Group Presets está disponible en Divi 5 exclusivamente, ¡así que ahora es el mejor momento para comenzar a familiarizarse con la interfaz Divi 5!