La flexibilidad de extenderse a diferentes tipos de elementos en Divi 5

Hacer actualizaciones de diseño no debería parecer como verificar las cajas. Pero con demasiada frecuencia, incluso algo simple, como cambiar un estilo de botón o actualizar una fuente, significa editar cada módulo manualmente. Es lento, repetitivo y fácil de estropear.

Divi 5 arregla que con atributos extendidos, una versión actualizada de los estilos de extensión de Divi 4. Le permite aplicar un cambio una vez y extenderlo en cualquier lugar, incluso en diferentes tipos de elementos y módulos. En esta publicación, veremos cómo esta flexibilidad puede ahorrarle tiempo y limpiar su flujo de trabajo.

¿Qué son los atributos extendidos en Divi 5?

Extender los atributos le permite extender estilos, contenido o preajustes de un elemento a otros con solo unos pocos clics sin la necesidad de editar cada módulo manualmente.

Suscríbete a nuestro canal de YouTube

Pero no es el típico flujo de trabajo de copia y pegar (también tenemos eso, si está interesado). Extender los atributos funciona en diferentes tipos de elementos y módulos, no solo los idénticos. Por ejemplo, puede diseñar un encabezado una vez y aplicar esa misma fuente a un título de alternar, un nombre de módulo de persona o un encabezado de propaganda. Mientras compartan el mismo grupo de estilo, como el texto, lo seguirán.

Y no se detiene allí. Puedes extender casi cualquier cosa, en cualquier lugar. Copie un color de fondo de una sección y aplíquelo a cada fila, sección, columna o módulo en su página.

O reutilizar estilos de botón en diferentes módulos; Puede extender los estilos de una llamada a la acción a un formulario de contacto. Una vez que comience a usarlo, cambiará la forma en que piensa sobre las actualizaciones. Ya no estarás atrapado haciendo las mismas cosas una y otra vez. Con atributos extendidos, permanecerá consistente, ahorrará tiempo y moverá a través de cambios de diseño más rápido y con más control.

Usando atributos de extensión en Divi 5

Extender los atributos es simple de usar y le brinda mucha flexibilidad. Para comenzar, solo haga clic con el botón derecho en el elemento que ya ha diseñado. Esto podría ser un módulo, columna, fila o incluso una sección completa. En el menú que aparece, seleccione Extender atributos.

(También puede hacer clic derecho directamente en un grupo de configuración específico, como fuente o espacio. Esto abre el panel de atributos de extensión con ese grupo ya seleccionado, lo que hace que el proceso sea más rápido y más preciso cuando sabe exactamente lo que está dirigido).

Una vez que se abre el panel de atributos de extensión , usted decide qué extender y dónde aplicarlo.

Verá algunas opciones claras:

• (1.) Extender desde el elemento: el elemento que ha diseñado y desea copiar.
• (2.) Extender a la ubicación: Elija hasta qué punto deben llegar los cambios. Solo la sección actual, la fila principal o la página completa.
• (3.) Extender al tipo de elemento: elija el tipo de elemento que desea apuntar, como solo módulos de texto o todos los módulos.
• (4.) Tipo de atributo para extender: Elija qué copiar: Diseño, contenido, preajustes o cualquier mezcla de ellos.
• (5.) Grupo de opciones para extender: concéntrese en un grupo específico de configuraciones, como textos, borde o estilos de botones.
• (6.) Campos modificados para extender: puede aplicar solo los campos que ha cambiado o incluir todo.

Aquí hay un ejemplo rápido. Digamos que ha diseñado un rumbo dentro de un módulo de texto y desea que la misma fuente aplicada a otros encabezados en la misma sección. Establecería la ubicación en la sección principal , el tipo de elemento en el texto, y luego elegiría el grupo de opciones del cuerpo (ya que solo queremos transferir estilos del cuerpo).

Una vez aplicado, cada módulo de texto coincidente en esa sección se actualiza con el mismo estilo de fuente.

Esto es lo que hace que los atributos extendidos sean especialmente útiles. No estás atascado copiando diseños enteros. Puede elegir exactamente lo que desea extender, solo un grupo o múltiples propiedades a la vez. Incluso puede llevar tanto contenido como diseñar a un módulo completamente diferente.

Pero si la configuración se siente como mucho al principio, comprenda que es completamente normal. Es posible que deba probar algunas combinaciones para comprender cómo los ámbitos, los tipos de elementos y los grupos de configuración funcionan juntos. Una vez que hace clic, se convierte en una de las herramientas más eficientes en su flujo de trabajo Divi.

En la sección después de la siguiente, caminaremos por ejemplos prácticos para mostrar cómo se une todo. Una vez que comprende cómo funciona cada configuración, extender los atributos se convierte en una herramienta poderosa para construir diseños consistentes sin repetir el mismo trabajo.

Aprenda todo sobre los atributos de extensión de Divi 5

Cómo los atributos de extensión de Divi 5 eclipsan los estilos de extensión de Divi 4

Si ha usado Divi 4, probablemente esté familiarizado con los estilos extendidos. Le permite copiar configuraciones de diseño de un elemento a otro, pero solo dentro del mismo tipo de elemento. Eso lo hizo útil para soluciones rápidas, pero limitando para actualizaciones más complejas.

Los atributos de extensión de Divi 5 llevan esa idea mucho más lejos. No solo copia el diseño, también funciona con contenido y preajustes , lo que le brinda control total sobre lo que se aplica y dónde. Incluso puede elegir propiedades específicas para extender , como solo el color de fondo o el radio de borde, sin afectar nada más.

Ya no está encerrado en los tipos de módulos coincidentes o repitiendo los mismos cambios en un diseño. Extender los atributos le permite elegir exactamente qué reutilizar y qué tan lejos debe llegar, ya sea en las secciones o una página completa. Está construido para adaptarse a su flujo de trabajo y hacer que el estilo sea más rápido, más inteligente y más consistente.

Los atributos extendidos están disponibles en Divi 5: descargue la última versión para probarla ahora.

5 Ejemplos prácticos de lo que puede extender (y cómo)

Hasta ahora, hemos hablado sobre lo que puede hacer los atributos. Ahora veamos cómo puedes usarlo. Estos ejemplos caminan a través de diferentes combinaciones de configuración. Puede intentar ahorrar tiempo y aplicar actualizaciones de manera más eficiente.

1. Extender estilos en diferentes tipos de elementos

Extender los atributos no te encierra en una jerarquía fija. Puede aplicar estilos en diferentes niveles de diseño, ya sea que se mueva de una sección a un módulo o de una fila a una columna.

Esto facilita la creación de conexiones visuales en su diseño. Un módulo testimonial puede coincidir con la sección en la que se encuentra. Un módulo de llamada a acción puede recoger estilos de la fila de arriba. No te limita a extender estilos entre elementos similares, siempre que compartan un grupo de estilo. Dependiendo de sus necesidades de diseño, puede pasar de amplio a específico o viceversa.

Extendido de una sección a una columna

Digamos que ha agregado un radio fronterizo sutil a la sección para suavizar los bordes del diseño. Dentro de esa sección, tiene una columna con una imagen de fondo, y desea que refleje las mismas esquinas redondeadas para la consistencia visual.

En lugar de volver a aplicar manualmente el radio, simplemente haga clic con el botón derecho en la sección, elija Extender atributos , establecer el tipo de elemento en la columna y seleccionar el borde de los grupos de opciones.

La columna heredará el mismo radio de borde, por lo que su imagen de fondo o diseño anidado no rompen el flujo visual.

Extendiéndose de una sección a una fila

Otro ejemplo es extender el relleno de una sección a filas u otras secciones para mantener un espacio en blanco consistente. Haga clic con el botón derecho en la sección, elija extender los atributos , configure el tipo de elemento en la fila y seleccione el espaciado de los grupos de opciones.

Todas las filas ahora heredan los mismos valores de relleno, dando a la página un espacio constante.

Extendiéndose de una sección a un módulo

Digamos que una sección ya tiene el fondo, el borde o el espacio que desee. En lugar de recrear esos estilos en otros lugares, puede pasarlos directamente a otro elemento, incluso si está anidado dentro o colocado fuera de esa sección.

Por ejemplo, si una sección tiene los antecedentes que desea en un testimonio, solo use atributos de extensión. Elija testimonio como tipo de elemento, configure el alcance en la página completa y asegúrese de que se seleccionen los atributos de fondo .

Una vez aplicado, el testimonial hereda ese fondo sin necesidad de ediciones manuales.

En el diseño web, los detalles visuales consistentes como colores de fondo, bordes y espacios ayudan a unir todo. Con atributos extendidos, puede llevar fácilmente esa consistencia a través de su diseño y crear una experiencia pulida en la marca sin comenzar desde cero cada vez.

Extendiéndose de una columna a una fila

También puede seguir un enfoque inverso, por ejemplo, extenderse de una columna a una fila. Supongamos que ha agregado una línea limpia y sólida para enmarcar sus columnas. Si desea la fila de la que es parte para llevar el mismo estilo de borde para la consistencia visual, puede reutilizar esos estilos al instante. Simplemente extienda el grupo de opciones de borde a la fila principal.

La fila recoge la misma configuración de borde, creando una conexión visual clara entre los dos. Esto funciona especialmente bien al construir secciones en capas o diseños en caja que se basan en contornos o separadores consistentes.

Estas son solo algunas combinaciones, que también se pueden revertir . En la práctica, puede extender estilos en casi cualquier nivel de diseño. Extender los atributos le brinda flexibilidad completa, desde la aplicación del espacio de columna hasta los módulos dentro de transportar sombras de sección en filas o botones. También puedes:

• Copie un radio fronterizo de una fila y aplíquelo a un módulo
• Reutilizar una animación de transformación de un módulo a través de columnas
• Extienda la alineación de fuentes de una sección a todos los módulos de texto dentro de él
• Aplicar filtros de imagen de una columna a otra para un estilo consistente
• Si dos elementos comparten un grupo de estilo y un contexto, extender los atributos probablemente pueda manejarlo.

El objetivo no es memorizar todas las combinaciones, sino experimentar y descubrir qué funciona para su diseño. Una vez que comienzas a pensar en movimientos de diseño reutilizables en lugar de ediciones únicas, tu flujo de trabajo naturalmente se vuelve más rápido, más limpio y más consistente.

2. Extender estilos en diferentes tipos de módulos

Extend Attributes reconoce a los grupos de estilo compartido como el botón, por lo que puede aplicar el mismo estilo en diferentes módulos en solo unos pocos pasos.

Por ejemplo, supongamos que ha diseñado un botón que le encanta y desea usarlo en un formulario de contacto. En lugar de volver a ponerlo manualmente, haga clic con el botón derecho en el botón original, seleccione Extender atributos , elija el grupo de opciones de botón y configure el tipo de elemento en el formulario de contacto . Luego configure el alcance en la página completa .

El diseño se trasladará instantáneamente al botón de envío del formulario de contacto sin ajuste manual.

También puede repetir el proceso para otros módulos. Si desea extender el mismo estilo de botón a un correo electrónico Optin, simplemente cambie el tipo de elemento a correo electrónico Optin y el botón coincidirá automáticamente.

Este tipo de estilo de módulo cruzado ahorra horas cuando se trabaja con diseños pesados. Debido a que Divi trata los botones como parte de un grupo compartido, puede peinar una vez y reutilizar en cualquier lugar sin romper la consistencia.

3. Guardar y extender los preajustes del grupo de opciones

Extender los atributos también funciona con preajustes, lo que le permite reutilizar estilos guardados en su diseño.

Por ejemplo, imagine que ha diseñado una columna con esquinas redondeadas, un borde sutil y una sombra suave. Usted guarda eso como un preajuste fronterizo para usarlo nuevamente más tarde.

La opción de extiende preajuste de la frontera solo aparece si el elemento ha guardado los preajustes.

Ahora, en lugar de aplicar manualmente ese preajuste a otras columnas, puede extenderlo en un solo paso. Simplemente haga clic con el botón derecho en la columna original, elija Extender atributos y seleccione Extender Border Preset del panel.

Una vez seleccionado, configure su tipo de elemento en la columna y el alcance en la sección principal o la página completa , dependiendo de dónde desee aplicarlo. El estilo preestablecido se lleva instantáneamente a las otras columnas sin configurarlo nuevamente.

Esto hace que sea más fácil mantener su diseño consistente, especialmente cuando se trabaja con estilos de borde personalizados, sombras o cualquier otro diseño agrupado bajo un preajuste.

4. Estilo una vez y luego extienda solo lo que cambió

Al construir un diseño desde cero, el diseño de cada elemento individualmente puede sentirse interminable. Extender los estilos una propiedad a la vez, como la primera sombra, luego el borde y luego el espacio, solo te ralentiza.

Ahí es donde entra la opción de todos los campos modificados . En lugar de seleccionar cada configuración manualmente, puede diseñar un elemento y luego aplicar solo los cambios que realizó al resto.

Por ejemplo, digamos que ha agregado un borde suave y una sombra ligera a una imagen en una galería.

Para aplicar el mismo aspecto a todas las demás imágenes, haga clic con el botón derecho en la imagen de estilo, elija extender atributos y seleccione todos los campos modificados en los campos modificados para extender la columna.

Solo las propiedades que cambió transferirán. Todo lo demás permanece intacto. Esto mantiene su diseño consistente sin sobrescribir otras configuraciones, y es una de las formas más fáciles de acelerar el estilo a granel sin perder el control.

5. Extender estilos dentro de un solo módulo

Extender los atributos funciona no solo entre módulos sino también dentro de ellos. Tome el módulo de acordeón, por ejemplo. Si alguna vez has diseñado un elemento y luego tuvo que repetir esos cambios cinco veces más, sabes lo tedioso que puede ser.

Ahora, solo necesita diseñar el primer elemento y extender aún más los estilos.

Una vez que haya aplicado su diseño, simplemente abra el panel de atributos Extend, elija el módulo de acordeón y seleccione los campos modificados específicos que desea aplicar al resto.

Cuando confirma, todos los demás elementos dentro de esa misma actualización del módulo automáticamente. Es una forma rápida de mantener su estilo consistente y aplicar cambios en todos los elementos con una sola acción.

Extender los atributos desbloquea la verdadera flexibilidad de diseño

Los atributos de extensión de Divi 5 le brindan una forma más rápida y más enfocada de hacer cambios de diseño. Desde botones y encabezados hasta bordes, contenido e incluso elementos anidados, tiene control total sobre lo que se copia y hacia dónde va.

Funciona en diferentes módulos, secciones de diseño y niveles de diseño, todo mientras mantiene su flujo de trabajo suave y eficiente. Pero solo puedes creerlo si lo intentas por ti mismo. ¡Así que experimente con los atributos extendidos en Divi 5 hoy y comparta su experiencia con nosotros a continuación!