Cómo cambiar rápidamente los estilos de paquete de diseño con Find & Reemplazo

Actualizar el diseño de un paquete de diseño completo suena simple hasta que te das cuenta de que tienes que cambiar los mismos estilos en cinco o seis páginas diferentes. Como estos estilos se aplican como valores estáticos, incluso una pequeña actualización, como cambiar la fuente o ajustar el relleno de la sección, lleva mucho tiempo cuando se hace la página por página.

Pero, ¿qué pasaría si pudiera actualizar todos esos estilos repetidos en solo unos pocos clics? Eso es exactamente lo que encontrar y reemplazar en Divi 5. Ya sea que esté intercambiando fuentes, reemplazando los colores o ajustando el espacio, esta característica le ayuda a hacer cambios de diseño de todo el diseño al instante. Le mostraremos cómo usarlo para limpiar y reponer un paquete de diseño completo.

¿Qué es encontrar y reemplazar en Divi 5?

Buscar y reemplazar es una característica en Divi 5 que le permite actualizar rápidamente los valores de estilo repetidos en su diseño. Ya sea una fuente, un código de color, relleno o incluso un efecto de sombra, ahora puede cambiar ese valor una vez y aplicarlo en múltiples elementos.

Entonces, ¿cómo funciona esto realmente? Comienza con cualquier módulo en el Visual Builder. Ronda un campo de estilo como color de texto o tamaño de fuente, y verá un icono de tres puntos. Haga clic en eso (o haga clic con el botón derecho en el campo) y seleccione Buscar y reemplazar .

Esto abre un panel donde define qué valor reemplazar, cuál debe ser el nuevo valor y dónde aplicar el cambio. Puede mantenerlo enfocado solo en ese módulo, expandirlo a toda la sección o ir a toda la página.

Una vez que experimente este flujo de trabajo, comprenderá por qué es una herramienta tan útil. En lugar de cazar a través de docenas de módulos para cambiar el mismo color o fuente, haces una actualización específica y lo miras en todo tu diseño en segundos. Pero para desbloquear realmente el potencial de Find y Reemplazar, debe ver cómo funciona con las variables de diseño, lo que cambia todo.

Cómo buscar y reemplazar ayuda a actualizar los estilos de diseño más rápido

Caminaremos a través de dos escenarios: primero, una operación básica de búsqueda y reemplazo, luego la misma tarea utilizando variables de diseño (esta es el arma secreta).

Usar buscar y reemplazar en divi 5

El proceso es sencillo: activarlo desde cualquier campo de estilo, elegir qué reemplazar y aplicar el cambio en múltiples módulos. Vamos a atravesarlo con un ejemplo real.

Digamos que desea aumentar el tamaño de la fuente de todos los encabezados de su página. Comience haciendo clic en cualquier módulo de encabezado dentro del Visual Builder. Vaya a Configuración> Diseño> Texto de encabezado> Tamaño de la fuente H1 de texto. Haga clic con el botón derecho o pasee el cierre para encontrar la opción Buscar y reemplazar, entre otros.

Esto abre el panel Buscar y reemplazar con muchas opciones:

• (1) Elemento de origen: esto define la configuración a la que se dirige, como el tamaño del texto, el color o el relleno. Se selecciona automáticamente en función de dónde abrió el panel.
• (2) Encuentre el valor: el valor actual utilizado en su diseño. Esto podría ser un tamaño de fuente como 30px, un código de color como #000000 o cualquier otra configuración de diseño. Esto se agrega automáticamente.
• (3) Reemplace el valor: el nuevo valor que desea aplicar. Divi busca el valor coincidente y lo reemplaza con este.
• (4) Busque y reemplace en la ubicación: elija dónde se debe aplicar el cambio. Puede limitarlo a un solo módulo, su sección o toda la página.
• (5) Busque y reemplace en el tipo de elemento: decida a qué módulos debe afectar el cambio. Puede aplicarlo a todos los módulos o solo tipos específicos como botones, texto o borrones.
• (6) Solo reemplace campos idénticos: active esto para actualizar solo campos que coincidan exactamente con el valor de búsqueda. Esto ayuda a evitar cambios accidentales en elementos no relacionados.

Por ejemplo, estamos reemplazando el tamaño de fuente de 30px a una abrazadera de fluido (20px, 4VW, 50px). Hemos seleccionado toda la página y todos los elementos ya que queremos actualizar todos los encabezados en la página.

Haga clic en el botón Buscar y reemplazar , y mira lo que sucede. Todos los encabezados con tamaño de fuente de 30px ahora tienen un valor de pinza de fluido ().

Los otros encabezados permanecieron sin cambios porque Divi solo actualiza los valores que coinciden exactamente dentro de su alcance seleccionado. No se requería una edición manual, y ni siquiera cambios accidentales en elementos no relacionados. Esta precisión lo hace perfecto para limpiar los estilos predeterminados en los paquetes de diseño.

Aprenda todo sobre el hallazgo y reemplazo de Divi

Uso de variables de diseño en buscar y reemplazar

Buscar y reemplazar se vuelve aún más potente cuando se combina con variables de diseño. En lugar de reemplazar un valor estático con otro valor estático, puede reemplazarlo con una variable guardada del administrador de variables. Esto crea un sistema de diseño consistente que es fácil de actualizar más adelante.

Continuemos con el mismo ejemplo, actualizando todos los tamaños de fuente de encabezado. Pero esta vez, en lugar de reemplazar 30px con un valor de abrazadera directa, lo reemplazaremos con una variable llamada tamaño de fuente H3.

Primero, cree la variable. Abra el Administrador de variables desde la barra lateral izquierda y vaya a la columna Número . Nombra tu variable, asigna un valor y guarda.

Esto hace que la variable esté disponible en todos los campos de tamaño de fuente. Ahora viene la magia: puede usarla directamente en el panel Buscar y reemplazar para asignar la variable guardada a todos los tamaños de fuente de encabezado a la vez.

Abra el panel Buscar y reemplazar como antes. En el campo Reemplazar Value , pase el tiempo sobre la entrada y haga clic en el icono del Administrador de variables . Seleccione su variable guardada, tamaño de fuente H3 y continúe con la misma configuración.

Haga clic en Buscar y reemplazar para aplicar el cambio. Todos los encabezados que usan 30px ahora harán referencia a la variable de tamaño de fuente H3 en lugar de un número fijo.

Aquí es donde se pone interesante. ¿Necesita ajustar este tamaño de fuente más tarde? Vaya al Administrador de variables , abra la variable de tamaño de fuente H3 y cambie el valor. Actualice la abrazadera a la abrazadera (24px, 5VW, 60px), y cada encabezado utilizando esta variable actualizaciones automáticamente.

No hay necesidad de repetir buscar y reemplazar. Con una actualización, su diseño se ajusta en todas partes la variable.

Esta combinación de variables de búsqueda y reemplazo y diseño hace que la actualización de paquetes de diseño completos sea tan eficiente, y seguiremos este proceso en este tutorial. Definirá sus variables de diseño una vez, luego use Buscar y reemplazar para cambiar de valores estáticos a variables guardadas en todas las páginas. Después de eso, la actualización se vuelve sin esfuerzo.

Aprenda todo sobre las variables de diseño de Divi

¿Listo para poner esto en práctica? Necesitará Divi 5 para usar las variables de búsqueda y reemplazo y diseño. El constructor ha sido completamente reconstruido para un rendimiento más rápido y flujos de trabajo más inteligentes.

Cómo reemplazar los estilos en un paquete de diseño

Ahora que sabe cómo funciona y reemplazarlo y cómo combinarlo con variables de diseño, pongámoslo en acción en un paquete de diseño real. Para nuestro ejemplo, importaremos el sistema de gestión de aprendizaje, que incluye múltiples páginas como hogar, sobre, contacto, aterrizaje del curso y precios.

Cada página usa las mismas fuentes, colores y espacios, pero todo como valores estáticos. En el tutorial a continuación, las actualizaremos en todas las páginas, las convertiremos en variables y conectaremos todo a un sistema de diseño central.

1. Auditar los estilos de diseño de su diseño

Antes de comenzar a reemplazar cualquier cosa, tómese unos minutos para revisar su paquete de diseño. Abra cada página y enumere rápidamente todos los estilos de diseño que se repiten, como tamaños de fuente, colores de botones, espaciado de texto, acolchado de sección y estilos de borde. Esto es lo que encontré después de revisar el diseño de LMS:

• Tamaños de fuente: 30px se usa para todos los encabezados de H3 y 48px para H2S en varias páginas
• Fuentes: Poppins se usa de manera consistente para todos los encabezados
• Botón principal: el color de fondo es #4449E0 con texto blanco
• Rolando: la mayoría de las secciones usan 60px superior e inferior
• Iconos de propaganda: el tamaño del icono está configurado en 24px
• Bordes de propaganda: no se aplica ningún borde a los módulos de blurbs
• Fondos de sección: El color verde #47BE68 aparece en la sección de pies de pie de casi todas las páginas

Todos estos se ingresan manualmente como valores estáticos dentro de cada módulo. Por ejemplo, el módulo de la propaganda usa #4449E0 para el color del icono y un ancho de 24px.

Una vez que identifique estilos repetidos como estos, sabrá exactamente qué convertir en variables de diseño.

Este paso de auditoría crea la base de todo lo que sigue. Le ayuda a construir un enfoque sistemático que mantenga su diseño consistente y mantenible.

2. Guarde sus variables de diseño

Una vez que haya auditado su diseño y haya notado los estilos de repetición, el siguiente paso es crear variables de diseño de sus valores preferidos. Esto le permite convertir estilos codificados en tokens reutilizables, lo que hace que su diseño sea más fácil de actualizar más tarde. Después de haber guardado todos nuestros valores, reemplazaremos los actuales con los nuestros.

Creando una variable de color

En el ejemplo anterior, descubrí que los íconos de la propaganda usan el color #4449E0, pero quiero cambiar eso a mi color de marca principal, #6C012A. Para hacerlo, crearé una variable de color.

Vaya al Administrador de variables desde la barra lateral izquierda, luego abra la columna de color .

Desplácese hacia abajo y haga clic en la opción de color global + Agregar . Nombra tu variable e ingresa un valor. Haga clic en Guardar variables y está listo.

Creando una variable numérica

A continuación, quiero agregar un borde de 2px alrededor de las borrachas, por lo que necesitaré una variable numérica . El proceso es similar, pero en una columna diferente. Vaya a la columna Número . Haga clic en + Agregar número global, nombre su variable, asignar un valor y guardar.

Creando una variable de fuente

También quiero cambiar todas las fuentes de encabezado a Askhar, mi fuente de marca. Esto requiere una variable de fuente . Navegue a la columna de fuente , cree una nueva variable, asigne un nombre, elija una fuente y guarde.

Está hecho. Esta fuente ahora se puede seleccionar en todos los campos de texto de encabezado durante todo el diseño.

Siga el mismo proceso para el resto de los hallazgos de su auditoría, como el relleno de sección, otros tamaños de rumbo o colores adicionales de la marca. Cada estilo repetido de su diseño puede (y debe) convertirse en una variable.

De esa manera, no tiene que recordar códigos hexadecimales, nombres de fuentes o valores específicos. Viven en su gerente variable y lo siguen a través de módulos y páginas. Y lo mejor de todo es que puede usar Buscar y reemplazar para aplicarlos en todo el diseño, lo que haremos a continuación.

3. Use buscar y reemplazar para aplicar variables

Aquí está la parte más interesante que hemos estado esperando. Con nuestras variables guardadas, cambiar los estilos de todo este diseño es rápido y fácil. Veamos cómo.

Cambiar los colores de los iconos

Primero, cambiemos el color de los iconos a nuestra variable de color de marca primaria guardada. Navegue a la configuración de la propaganda> Diseño> Imagen e icono. Ahora, pasee la opción de color del icono y haga clic en los tres puntos. Elija Buscar y reemplazar .

En el panel Buscar y Reemplazar, todo lo que necesita hacer es pasar el paso para localizar el icono de administrador de variables y seleccionar su variable.

Y así, todos los íconos tienen un nuevo color. También podría haberlo hecho de otra manera, asignando el color de mi marca como un valor estático en lugar de guardar una variable de diseño, pero agregamos un paso adicional para simplificar las actualizaciones futuras.

¿Cómo? Imagine que ha modificado todas sus páginas de diseño pero desea cambiar el color de su marca. No es necesario sentirse abrumado por volver a visitar todas las páginas o hacerlo módulo por módulo. Dado que ya guardó una variable de diseño de color de marca, solo necesita cambiar el valor para actualizarlo en todo el sitio.

Cambiar todos los encabezados.

A continuación, cambiemos todas las fuentes de encabezado a mi fuente de marca. Acceda a la configuración de cualquier encabezado> Diseño> Texto del título. Case el tiempo sobre la fuente de título y abra Find & Reemplace . En la columna de valor de reemplazo , asigne la variable de fuente de encabezado de su marca .

Actualización del ancho del borde de todos los módulos de propaganda

Para la actualización de ancho de borde, usaré mi variable de módulo de blurb . El proceso sigue siendo consistente. Navegue a la configuración del borde de cualquier propaganda, abra Buscar y reemplazar, elija su variable y aplique.

Después de cambiar todos los valores estáticos con sus variables de diseño, habrá vinculado sus estilos de diseño directamente a variables. Esto significa que si alguna vez desea cambiar el color de la marca, la tipografía de encabezado de ajuste o ajustar los anchos de borde, no tendrá que rehacer los reemplazos. Simplemente actualice la variable y todos los elementos vinculados se ajustarán instantáneamente.

Paso de bonificación: Crear y guardar presets (opcional)

Si bien encontrar y reemplazar y reemplazar las variables de diseño le brindan una base sólida, hay un paso opcional que se basa aún más en este sistema. Los preajustes le permiten empaquetar estilos completos y reutilizarlos en cualquier lugar con solo un clic.

Una vez que esté satisfecho con sus variables base, puede dar un paso más profundo y crear preajustes para un estilo más granular. Esto no es necesario para el proceso central por el que acabamos de recorrer, pero vale la pena explorar si desea la máxima eficiencia.

Supongamos que le gusta agregar un efecto de sombra a todas sus borrones, para que haya diseñado el estilo de sombra perfecto para su módulo de propaganda. En lugar de copiar manualmente este estilo cada vez, puede guardarlo como un preajuste.

Hecho. Este preajuste ahora aparece en el menú desplegable Presets de cada módulo. Puede aplicarlo a otros módulos al instante; No hay necesidad de rehacer el espacio, los bordes, las sombras o cualquier otro ajuste de diseño.

Lo que hace que los preajustes sean aún más poderosos es su flexibilidad. Puede crear grupos preestablecidos para diferentes combinaciones de configuración para una mejor optimización del flujo de trabajo y control granular. Por ejemplo, es posible que tenga un grupo preestablecido para estilos de botones con variaciones como la luz primaria, el esquema de luz primaria y primaria, cada una que contenga diferentes combinaciones de fondos, bordes y espaciado.

De esta manera, mantiene la consistencia mientras tiene opciones para diferentes contextos. Los preajustes son especialmente útiles cuando su diseño tiene más de 10 módulos que usan el mismo estilo. En lugar de confiar en la memoria o las ediciones manuales, estandarizas todo por adelantado.

Aprenda todo sobre los preajustes del grupo de opciones de Divi

Después de aplicar todas las variables de diseño guardadas, así es como se ven las versiones de antes y después:

4. Aplicar el mismo proceso a otras páginas

Una vez que se configuran sus variables de diseño y presets, actualizar el resto de su paquete de diseño se vuelve mucho más rápido.

Tome la página de destino del curso, por ejemplo. Verá los mismos valores estáticos utilizados aquí, fuentes de encabezado, colores de botones, bordes de propaganda, colores de iconos y más. Nuevamente, en lugar de ajustar manualmente cada configuración, abra el módulo relevante, active Buscar y reemplazar, y asignar la variable de diseño coincidente.

Repita este proceso para cada estilo de repetición en todas sus páginas. Cuando haya terminado, todo su paquete de diseño se conectará a variables y preajustes, haciendo que futuras ediciones casi sin esfuerzo.

Página de destino actualizada del curso utilizando las variables de búsqueda y diseño de divi de Divi

Haga ediciones de diseño de todo el diseño en segundos con Reemplazar y Reemplazar

La configuración de las variables de diseño y el aprendizaje Buscar y reemplazar en Divi 5 podría tomar algo de tiempo por adelantado. Pero una vez que lo haya hecho para un paquete de diseño, nunca querrá volver a hacer clic manualmente en docenas de módulos.

Transformamos un paquete de diseño completo de valores estáticos dispersos a un sistema de diseño conectado. Lo que nos tomó minutos con Find & Reemplazo habría tomado horas haciéndolo de la antigua forma, módulo por módulo, página por página.

No se trata solo de ahorrar tiempo en este proyecto. Estás construyendo un sistema de diseño que hará cada futuro proyecto Divi más rápido y más consistente.