Cambiar el nombre de un sitio web en 5 minutos con atributos extendidos

El cambio de marca su sitio web no requiere una reconstrucción completa, aunque a menudo se siente así. Las fuentes están atascadas en partes separadas, los colores se extienden en las secciones y el espacio está oculto en entornos individuales. Y después de actualizar la página de inicio, encuentra otras páginas que necesitan los mismos cambios. Es la rutina habitual, pero hay una manera más rápida.

Con extensiones de atributos en Divi 5, puede diseñar un solo elemento e aplicar instantáneamente que busque cada módulo similar en filas, secciones e incluso toda la página. Pasemos cómo usarlo para cambiar el nombre de un sitio web completo en minutos, no horas.

¿Qué son los atributos extendidos en Divi 5?

Extend Attributes es una característica Divi 5 que le permite tomar el diseño de un módulo y aplicarlo a otros elementos o módulos a su alrededor. Esto significa que si ha diseñado un botón, un encabezado o un bloque de texto, no tiene que recrear esos estilos desde cero, porque puede extenderlos a otros elementos.

Así es como funciona en la práctica. Comienza editando cualquier módulo en el Visual Builder. Luego, en lugar de repetir esos cambios módulo por módulo, solo haga clic con el botón derecho en el módulo y elija Extender atributos.

Divi preguntará a dónde quieres que se vayan esos estilos. Una vez que confirma, todos los módulos coincidentes adoptan los mismos estilos. Extender los atributos no busca qué coincide, pero copia el aspecto actual y lo aplica a su objetivo de elección.

Esto lo convierte en una de las formas más rápidas de implementar cambios de diseño sin microgestión cada bloque. Le ayuda a convertir el estilo repetitivo en una sola acción, sin importar si está construyendo desde cero o cambio de un diseño completo.

Cómo extender los atributos ayuda a cambiar el nombre de un sitio web más rápido

Caminaremos por cómo puede usar los atributos de extensión solo y también con los preajustes de los grupos de opciones para acelerar el proceso de cambio de cambio de su sitio web.

Usando atributos de extensión en Divi 5

El proceso es simple: estilo un módulo, haga clic con el botón derecho para elegir extender los atributos y extender esas opciones de diseño a cada módulo similar, sin abrir un solo panel de configuración dos veces. Vamos a atravesarlo usando un ejemplo real.

Digamos que quieres cambiar el nombre de todos tus botones de llamada a la acción. Comience por diseñar un módulo de botón dentro del Visual Builder.

Una vez que haya terminado, haga clic con el botón derecho y seleccione extender los atributos. (Seleccionamos los atributos de diseño de botones Extend ya que solo queremos extender los estilos, no el contenido. También notará muchas opciones, que le ayudan a microeleccionarse de propiedades específicas).

El panel de atributos Extend se abrirá, y puede elegir entre varias opciones diferentes para decidir cómo y dónde se deben aplicar sus cambios de diseño.

• (1) Extender desde el elemento: el módulo desde el que está extendiendo, como el botón en nuestro caso. Esto se llena automáticamente en función de lo que hizo clic derecho.
• (2) Extender a la ubicación: elija hasta dónde debe llegar el diseño. Hemos seleccionado toda la página ya que queremos que cambien todos los botones de la página.
• (3) Extender al tipo de elemento: Elija qué tipos de módulos deben recibir los nuevos estilos. Por ejemplo, solo módulos de botón o todos los módulos similares.
• (4) Tipo de atributo para extender: especifique lo que desea copiar. Elegimos los atributos de diseño y dejamos a otros fuera.
• (5) Grupo de opciones para extender: decida qué grupo (s) de opciones se aplicará: texto, botón, borde, espacio, etc.
• (6) Campos modificados para extender: también puede limitar su selección a una sola propiedad de estilo o elegir todos los campos modificados para extender todos los cambios que realizó.

Después de seleccionar sus preferencias, haga clic en Extender atributos y los nuevos estilos se aplicarán a todos los demás botones en la página.

¿Notó cómo no había necesidad de buscar valores coincidentes? Esto se debe a que extender los atributos no les importa cuáles eran los estilos originales. Copia el aspecto actual del módulo seleccionado y lo pasea directamente en cada módulo similar en la ubicación elegida.

Esto es lo que lo hace tan útil para paquetes de diseño y sitios web existentes. Extender los atributos le brinda control total con un módulo de estilo y un clic, ya sea que esté ajustando los tamaños de fuente, la actualización de los colores o el espacio de ajuste.

Aprenda todo sobre los atributos de extensión

Uso de preajuste de grupo de opciones con atributos extendidos

Cuando trabaja en un sitio web con varias páginas, no es suficiente copiar estilos visualmente. Desea un sistema que se quede, y ahí es donde entran los preajustes.

Los preajustes le permiten guardar un grupo de estilos dentro de cualquier módulo y reutilizarlos en su sitio. Combine eso con atributos extendidos, y tendrá una forma rápida y flexible de cambiar la marca no solo de una página, sino en todo su sitio web. Esta combinación también le ayuda a proteger en el futuro su sitio web, de modo que si necesita cambiar el nombre nuevamente, puede modificar fácilmente los preajustes y todos los módulos donde se usan también se actualizarán.

Volvamos al ejemplo del botón para comprender cómo funciona esto.

Habíamos diseñado un botón con un aspecto nuevo. Ahora, en lugar de extender la configuración como valores estáticos, los guardaremos como preajustes.

Aquí es donde entra en los atributos extensos. Cuando haga clic en los atributos extendidos, verá aparecer los preajustes que guardó. Seleccione individualmente si desea extender solo preajustes seleccionados, o elija el botón Extender presets para llevar a cabo todos.

Cuando se extiende, Divi no solo copia el aspecto; Aplica su preajuste guardado detrás de escena. Entonces, cualquier otro botón que toque ahora usa el mismo preajuste.

¿Por qué agregar otro paso? Aquí es donde se beneficia a la prueba de su sitio web en el futuro. Supongamos que en los próximos meses decide ajustar su estilo de botón más tarde. ¿Te gustaría extender los estilos de nuevo? No, ¿verdad?

Bueno, ni siquiera tiene que hacerlo porque solo necesita actualizar el preajuste una vez. Dado que todos los módulos de botón se construyeron con el mismo preajuste, cada instancia que usa se actualiza automáticamente.

Además, una vez guardados, los preajustes de los grupos de opciones también están disponibles en otras páginas. Entonces, cuando haya terminado de cambiar la marca de su página de inicio y se mude a otros, solo aplicará sus presets guardados y los extenderá en minutos.

Es por eso que usar preajustes del grupo de opciones con atributos extendidos es una forma más innovadora de cambiar el nombre. Obtiene consistencia visual y un sistema que es fácil de actualizar sin rehacer su trabajo.

Aprenda todo sobre los preajustes del grupo de opciones

¿Quieres probar esto tú mismo? Necesitará Divi 5, lo que trae atributos de extensión, preajustes de grupos de opciones y muchas más características al nuevo constructor. Ha sido rediseñado desde cero para la velocidad, el control y un flujo de trabajo de diseño más suave.

Cómo cambiar el nombre de un sitio web con atributos extendidos

Ahora que ha visto cómo funciona los atributos extendidos y cómo se combina con los preajustes de los grupos de opciones, es hora de aplicarlo a un sitio web real.

Para este tutorial, utilizaremos el paquete de diseño de software AI. Es un sitio web completo con páginas como Inicio, Acerca, contacto y precios. No estamos apuntando a una revisión completa aquí. Es solo un cambio de marca de luz, del tipo que normalmente haríamos en nuestras actualizaciones mensuales.

Para comenzar, mire los elementos que definen la identidad visual de su sitio, como botones, encabezados, borrones y texto del cuerpo. Estos módulos aparecen en varias páginas y llevan la mayor parte de la personalidad de la marca. Una vez que ha vuelto a relajarse solo algunos de ellos, extender los atributos le permite impulsar esos cambios en todas partes.

Caminemos exactamente qué actualizar.

Módulos clave de cambio visual en todo el diseño

Comenzaremos con la página de inicio, ya que establece el tono para el resto del sitio. La mayoría de los sitios web repiten los mismos patrones de diseño en varias páginas, por lo que una vez que actualicemos la página de inicio, tendrá la base de todo lo demás.

Después de escanear el diseño, hemos identificado los elementos más visibles que dan forma a la apariencia de la marca. Estos son botones, encabezados, borrones, texto del cuerpo e imágenes. Como ya renunciamos a nuestros botones, comenzaremos con encabezados.

Módulos de encabezado de cambio de marca

Primero, personalice cualquier módulo de encabezado para reflejar su nueva marca. Comenzaré con H4S.

Una vez que esté satisfecho con el estilo, haga clic con el botón derecho en el módulo y elija Extender atributos . Seleccione el alcance para toda la página y el tipo de módulo en el texto . Aplique el cambio a todos los módulos H4 en la página.

Del mismo modo, cambiará el nombre de los H1, H2 y H4s para unificar la tipografía y le dará a su sitio una voz consistente en solo unos pocos clics sin restablecer cada módulo de encabezado manualmente.

Texto del cuerpo de cambio de cambio para una mejor legibilidad

Ahora actualicemos el texto del cuerpo. Comience por elegir cualquier módulo de texto con un bloque de párrafo. Personalice para que coincida con el tono de su marca. Cuando esté satisfecho con los cambios, haga clic con el botón derecho en el módulo y seleccione extender los atributos . Elija aplicar la actualización en todos los módulos de texto en la página.

Esto le da a sus párrafos un estilo consistente en la página en segundos y elimina la necesidad de editar cada uno individualmente.

Rechrando bordes de propaganda

A continuación, quiero agregar un borde para racionalizar todos mis módulos de propaganda. Entonces, peinaré una columna, luego haga clic con el botón derecho en la columna en la pestaña Diseño de la fila y seleccione Copiar estilos . Luego, pegue los estilos a la siguiente columna y así sucesivamente.

Notará que cambié el diseño de la fila para flexionar y Divi igualó automáticamente las alturas de la columna, manteniendo los borrachos alineados sin importar cuánto contenido contengan. Esto funciona porque Divi ahora admite funciones de FlexBox, que lo ayudan a construir diseños receptivos e inteligentes más rápido.

Vuelve a marcar otras páginas usando preajustes guardados

Ahora que la página de inicio se actualiza, no necesita repetir el proceso desde cero. Puede duplicar secciones o filas en otras páginas, o, dado que ha guardado sus nuevos estilos como preajustes de grupo de opciones, ya está configurado.

Sus preajustes guardados aparecerán en todas las páginas.

Todo lo que necesita hacer es aplicarlos donde sea necesario y usar atributos extendidos para empujar los estilos al instante. No hay ediciones manuales ni trabajo de diseño repetido.

Puede seguir el mismo proceso para cambiar el nombre de otras páginas en su sitio web.

Extender Attributes le brinda la flexibilidad para disfrutar de un cambio de marca nuevamente. Son geniales cuando quieres volver a reponer módulos en una página.

Pero si necesita intercambiar un valor específico, como un código hexadecimal, tamaño de fuente o unidad de separación, en diferentes módulos, querrá intentar buscar y reemplazar. Funciona especialmente bien para paquetes de diseño que usan valores codificados. Puede usar Buscar y reemplazar para intercambiar aquellos con variables de diseño guardadas para obtener más flexibilidad para futuras actualizaciones.

Consejo profesional: use atributos de extensión con variables de diseño

Extender los atributos no solo copia estilos estáticos; También puede transferir sus variables de diseño guardadas. Por ejemplo, si ha asignado una variable de fuente de encabezado a un módulo de texto, puede extender la configuración de ese módulo a todos los demás módulos de texto en la página. En lugar de que cada encabezado tenga valores codificados duros, todos heredan la misma variable.

Esto significa que las actualizaciones futuras son aún más fáciles: ajuste la variable una vez en el administrador de variables, y cada módulo extendido se actualiza automáticamente. Es una forma poderosa de combinar atributos de extensión con el sistema variable de Divi 5 para el control escalable en toda la marca.

Extender los atributos te permite cambiar el marca sin reconstruir

El cambio de marca no tiene que significar la reconstrucción. Con atributos extendidos, diseñas un módulo y aplica ese aspecto al resto, reduciendo horas de ediciones a segundos.

Ya sea que esté trabajando con un paquete de diseño o actualizando un sitio en vivo, Divi 5 le brinda la forma más rápida de actualizar su diseño sin tocar cada elemento.