Presets de elementos y preajustes de grupo de opciones: la diferencia explicada

¿Qué pasaría si pudiera diseñar todo su sitio Divi con la flexibilidad de las clases CSS? El sistema preestablecido de Divi le permite combinar la energía y la facilidad, lo que cambiará la forma en que crea sitios web. Ya sea construyendo una sola página de destino o un sitio de varias páginas, los preajustes le permiten crear estilos reutilizables que reducen el tiempo de diseño mientras mantienen todo consistente.

En Divi 5, los preajustes de elementos y los preajustes de los grupos de opciones se unen para ofrecer un flujo de trabajo poderoso y eficiente. Los preajustes de elementos le permiten crear paquetes de diseño previos al estilo para elementos específicos, mientras que los preajustes de los grupos de opciones ofrecen estilos de mezcla y combinación que funcionan en su sitio. Ahorran tiempo, aseguran cohesión y desbloquean nuevas posibilidades creativas.

En esta publicación, exploraremos cómo funcionan, cómo difieren y cómo combinarlos para un diseño más inteligente y más rápido. Al final, verá por qué el sistema preestablecido de Divi es imprescindible para su próximo proyecto de diseño.

¿Qué son los presets de elementos?

Los presets de elementos lo ayudan a crear consistencia en varios elementos Divi. En Divi, hay cuatro tipos de elementos recurrentes que puede encontrar en todo el producto: secciones, filas, columnas y módulos. Introducido en Divi 4 y llevado a Divi 5, le permiten crear un paquete de estilo completo para un elemento y reutilizarlo con un solo clic, sin importar dónde esté trabajando en su sitio.

Los presets de elementos capturan cada configuración que ha aplicado a un tipo de elemento único, como la tipografía, los colores, el espacio y más de un módulo de propaganda. Por ejemplo, si ha creado un módulo de propaganda con tamaños de fuente específicos, un aspecto de estilo para el icono y colores, un elemento preestablece todos esos detalles en un preajuste reutilizable.

Las prestas de elementos se pueden establecer como predeterminadas, por lo que cada nueva instancia de ese elemento hereda automáticamente el estilo del preajuste. Están modificables a nivel mundial, lo que significa un ajuste a las actualizaciones de PERST cada instancia vinculada en su sitio al instante. Si necesita cambiar un preajuste, puede anular el preajuste en el nivel del elemento, dándole flexibilidad sin romper el sistema. También puede modificar el preajuste a nivel mundial para que tenga efecto en todos los casos en que se usó.

Los presets de elementos son perfectos para guardar y reutilizar diseños completos y pulidos para elementos recurrentes. Por ejemplo, al crear un módulo CTA, puede hacer un elemento preestablecido para él y luego aplicarlo a varias páginas. Con un elemento preestablecido, tiene un estilo una vez, guardado y listo para usar donde lo necesite, asegurando la consistencia del diseño sin mucho esfuerzo.

¿Cuáles son los preajustes de los grupos de opciones?

Nuevo en Divi 5, los preajustes del grupo de opciones cambian el enfoque de elementos de diseño completo a propiedades de diseño reutilizables, como tipografía, sombras de caja, bordes, espaciado o efectos de desplazamiento. Son bloques de estilo modular que puede aplicar en diferentes elementos, desde sombras de botón hasta fuentes de rumbo. No están vinculados a un tipo de elemento, lo que los hace increíblemente versátiles.

Una de las mejores cosas sobre los preajustes del grupo de opciones de Divi, que lo distingue fuertemente de los competidores, es que no solo se centra en CSS. También incluye efectos creados con scripts. Puede notar esto en las características más interactivas de Divi, como opciones de condición, videos de fondo HTML, efectos de desplazamiento y más.

Los preajustes del grupo de opciones se pueden aplicar en todos los tipos de elementos. Una sección, fila, columna y módulo puede compartir el mismo preajuste de la frontera. Los módulos con configuración de botones incorporado pueden compartir el mismo botón Preset.

Presets de elementos vs Presets del grupo de opciones: las diferencias clave

Los preajustes de elementos sirven como kits de diseño todo en uno, construidos para racionalizar el flujo de trabajo de Divi al bloquear cada detalle de un tipo de elemento único, como un módulo de encabezado de ancho completo totalmente estilo o una propaganda con su tipografía, colores, espaciamiento y efectos en un plan estático. Su enfoque es estrecho, vinculado exclusivamente a un elemento, haciéndolos sobresalir para duplicar diseños complejos y pulidos en su sitio con un solo clic.

Son perfectos para acelerar el proceso cuando necesita una sección CTA consistente en cinco páginas: pídalo una vez, guárdelo y lo despliegue sin esfuerzo. Si bien ofrecen actualizaciones globales y configuraciones predeterminadas, su alcance es limitado, entregando un paquete fijo y listo para llevar que prioriza la consistencia del elemento completo.

Presets del grupo de opciones

El grupo de opciones presets, por otro lado, se acerca a estilos o comportamientos reutilizables, como la sombra de un botón, los estilos de tipografía de un encabezado o un efecto de desplazamiento, ofreciendo un enfoque dinámico de elementos cruzados que se libera del molde de un solo elemento. Estas capas de diseño apilables pueden agregar un estilo constante a los botones en cualquier módulo que contenga uno, como una propaganda, formulario de contacto o módulo de opción de correo electrónico, aplicando el estilo donde sea que se ajuste, con la flexibilidad para mezclar y combinar.

Brillan cortando la redundancia en un entorno compartido. Le permiten definir un estilo de encabezado o una sombra de caja una vez y aplicarlo en todo el sitio, todo mientras admite ediciones globales en tiempo real y anulaciones a nivel de elementos. A diferencia de la naturaleza estática, o nada de elementos de elementos, los preajustes de los grupos de opciones le brindan un estilo preciso y adaptabilidad en todo su diseño.

Cómo usar presets de elementos y grupos de opciones ajustados en Divi 5

La combinación de preajuste de elementos y los preajustes de los grupos de opciones en Divi 5 es como combinar un maestro chef con un chef sous: uno maneja el panorama general y el otro se sumerge en los detalles. Aquí hay una guía paso a paso para que funcionen en armonía:

Paso 1: Comience con preajustes de grupos de opciones para estilos fundamentales

Comience definiendo las reglas de diseño de su sitio, como tipografía, esquemas de color, sombras o efectos dinámicos como animaciones de desplazamiento. Guarde estos elementos como preajustes del grupo de opciones y configúrelos como predeterminados. Al comenzar con un diseño, los preajustes del grupo de opciones pueden ayudar a construir la base del diseño de su sitio. Por ejemplo, al crear un diseño de encabezado en el constructor de temas, puede hacer un grupo de opciones preestablecido para peinar un botón en el menú para repetir fácilmente el estilo de ese botón en todo el sitio al construir sus páginas web.

Cada elemento nuevo que agregue y asigne el preajuste para heredar estos estilos automáticamente, dando a su sitio un aspecto unificado sin ajustarlo constantemente.

Paso 2: construir presets de elementos

Una vez que haya creado preajustes de grupos de opciones a elementos de estilo, puede construir sobre su base de diseño creando presets de elementos para sus diseños. Por ejemplo, si desea tener varios módulos de propaganda en su página de inicio, solo necesita diseñar uno y crear un elemento preestablecido. A partir de ahí, puede agregar más borrones y aplicar el elemento preestablecido a cada uno de ellos, ahorrándole una tonelada de tiempo de diseño.

Paso 3: Tune fino con ediciones preestablecidas

A veces, es posible que desee alterar un preajuste sin cambiar las otras instancias en su sitio. Afortunadamente, los preajustes de elementos y los preajustes de los grupos de opciones permiten esto. Por ejemplo, ha creado preajustes del grupo de opciones para sus encabezados, H1 a H6, pero desea cambiar el color de encabezado que planea usar sobre un fondo de imagen. Nuestros encabezados tienen el estilo de #000000 , que no funcionará para esta aplicación. Puede editar una sola instancia de este preajuste sin alterar el preajuste en sí . Dirígete a la pestaña de diseño del módulo de encabezado y cambia el color.

Puede editar precisamente elementos presets, como el ejemplo de la propaganda desde antes. Un ícono no es perfectamente cuadrado, que aparece más amplio que otros. Al aplicar CSS en la pestaña avanzada, el cambio permanece aislado. Otros módulos de propaganda con el mismo preajuste no se ven afectados. Esto aumenta la flexibilidad de diseño, lo que permite ajustes a elementos individuales sin alterar el sistema más amplio.

Obtendrá lo mejor de ambos mundos incorporando presets de elementos y grupos de opciones presets en su próximo proyecto de diseño web: consistencia en todo el sitio con espacio para la libertad creativa.

Por qué funcionan mejor juntos

• Mayor eficiencia de diseño: el grupo de opciones preestablece los detalles de la esgalencia (como la tipografía o las sombras de la caja), mientras que los preajustes de elementos le permiten lanzar secciones, filas, columnas o módulos totalmente de estilo en segundos.
• Un diseño más consistente: los estilos compartidos se mantienen sincronizados a través de presets de grupos de opciones, y los presets de elementos aseguran que los diseños se vean idénticos donde sea que se usen.
• Fomenta la escalabilidad: cambie un grupo de opciones preestablecido (como el tamaño de la fuente), y cada preajuste vinculado se actualizará al instante, perfecto para sitios en crecimiento donde se necesitan páginas adicionales.
• Es una prueba futura: la hoja de ruta de Divi 5 sugiere un grupo de opciones de anidación preestablecidos dentro de los presets de elementos, prometiendo una integración aún más ajustada.

El futuro del elemento y el grupo de opciones preestablecidos en Divi 5

Divi 5 ya ofrece un poderoso sistema preestablecido, pero el futuro promete una integración aún más estricta que podría redefinir cómo construye sistemas de diseño: opciones de anidación grupales de grupos preestablecidos dentro de elementos preestablecidos. Aunque todavía está en desarrollo, esta característica le permitirá crear presets de elementos casi por completo a partir de preajustes de grupos de opciones modulares, desbloqueando un nuevo nivel de control de diseño global.

Imagine sin esfuerzo creando borrachos completamente estilo, CTA y más utilizando preajustes de grupos de opciones que ya ha diseñado. Ahorrará tiempo, facilitará la creación de un aspecto cohesivo para sus sitios y le permitirá crear sitios web más rápido. Con ambos grupos preestablecidos trabajando juntos, puede actualizar elementos de diseño en su sitio una vez, y cada elemento vinculado se ajustará al instante. Esta no es solo una actualización incremental; Es un salto hacia un verdadero sistema de diseño similar a CSS dentro del constructor visual de arrastrar y soltar de Divi.

Si bien todavía no podemos anidar presets, la hoja de ruta de Divi 5 los incluye. Cuando lleguen, serán la mejor manera de crear un sistema de diseño: comience con el grupo de opciones preestablecidos como bloques de construcción, ensamblándolos en presets de elementos para su implementación rápida y mantener un control global con un esfuerzo mínimo.

Diseño inteligente con preajustes de grupos de opciones

El sistema preestablecido de Divi 5 no es solo una característica: es una revolución para los diseñadores web. Los preajustes de elementos y los preajustes de los grupos de opciones pueden parecer herramientas pequeñas, pero tienen un golpe. El elemento presets le permite guardar y reutilizar diseños completos con cero alboroto, mientras que los preajustes de los grupos de opciones aportan flexibilidad y consistencia a los estilos y comportamientos que usa en todas partes. Utilizados juntos, crean un flujo de trabajo rápido, cohesivo y adaptable, ya sea que esté construyendo una página de una página o un sitio de comercio electrónico de varias páginas.

La verdadera magia ocurre cuando las usas juntos. Los preajustes del grupo de opciones lo ayudan a establecer una base sólida de roca, luego construir diseños pulidos y reutilizables con presets de elementos. El resultado es un sitio web consistente sin rigidez, escalable sin abrumador y eficiente sin cortar esquinas. Este sistema de diseño basado en preajuste es un cambio de juego para los usuarios de Divi, desbloqueando la potencia similar a CSS con simplicidad de apuntar y hacer clic.

Antes de sumergirse en su próximo proyecto, descargue el último Alpha Divi 5, experimente con preajustes y vea cómo transforman cómo crea sitios web de Divi.