Las formas más rápidas de actualizar el diseño de su página con Divi 5

Divi 5 presenta un puñado de nuevas herramientas inteligentes para ayudarlo a trabajar más rápido y diseñar más libremente. Pero con tanta potencia a su alcance, es fácil sentirse inseguro sobre dónde comenzar, especialmente al actualizar un diseño existente.

Probablemente ya sepa cómo ajustar el espacio, ajustar los colores y limpiar los diseños, por lo que esta publicación no se trata de volver a aprender lo básico. Se trata de hacerlo más rápido con Divi 5. En los siguientes pasos, pasamos por un flujo de trabajo de actualización práctica que puede seguir en cualquier página existente. Y si los cambios recientes se han sentido abrumadores, comience aquí. Te relajarás con claridad y confianza.

8 pasos para actualizar el diseño de su página con Divi 5

Para este tutorial, estamos utilizando la página de destino de negocios CV desde la biblioteca de paquete de diseño Divi.

Suscríbete a nuestro canal de YouTube

Pasaremos cómo actualizar la página utilizando las nuevas herramientas de Divi 5, como buscar y reemplazar, diseñar variables y extender los atributos, para acelerar su flujo de trabajo y reducir las ediciones repetitivas. Comencemos.

1. Optimice su tablero para la edición sin distracciones

Incluso las interrupciones menores pueden romper su enfoque cuando está actualizando un diseño. Puede saltar entre secciones, abrir la configuración repetidamente y perder la pista de dónde lo dejó. Este tipo de retrasos se suman rápidamente, especialmente en páginas más largas o más complejas.

Divi 5 ayuda a reducir esa fricción con un entorno de edición más flexible. Puede acoplar paneles para mantener visibles la configuración clave, abrir múltiples módulos en las pestañas y usar el panel de capas para navegar por su diseño sin un desplazamiento sin fin. En lugar de hacer clic y salir de los módulos, puede mantener todo abierto y accesible a medida que se mueve.

El panel Capas le brinda una descripción estructural completa del diseño, por lo que puede saltar instantáneamente a cualquier sección, fila o módulo con solo hacer clic. Es especialmente útil para saltar a través de páginas grandes sin desplazarse.

Anteriormente, el flujo de trabajo a menudo significaba abrir un módulo, guardarlo, desplazarse nuevamente, abrir el siguiente y repetir ese ciclo. Divi 5 omite todo eso. Puede abrir varios módulos consecutivos; Cada uno se mantiene visible como una pestaña en su panel de edición. Esto facilita la comparación de la configuración o el cambio entre elementos sin la configuración de elementos de cierre y reapertura de cierre repetidamente.

Puede tomar un poco de ajuste para acostumbrarse al nuevo flujo de trabajo. A medida que los paneles se comportan de manera diferente, el cambio entre módulos no sentirá una segunda naturaleza de inmediato. Pero dale un poco de práctica, y estos pequeños cambios comienzan a sumarse.

A medida que sigue los pasos a continuación, intente trabajar con paneles de manera diferente, acoplue algunos, apile un par en pestañas o mantenga el panel de capas abierto. Comenzará a sentir qué funciona mejor para su flujo.

2. Establezca primero sus variables de diseño global

Cuando manejas un diseño completo, lo último que quieres es repetirte. Pero eso es exactamente lo que sucede cuando cada estilo se establece manualmente dentro de cada módulo. Puede funcionar al principio, pero con el tiempo, su página se convierte en un mosaico de opciones desconectadas. Finalmente, siempre se pierde algo.

Las variables de diseño lo ayudan a evitar eso. Te dan un lugar central para definir su lenguaje de diseño. Defina valores reutilizables para fuentes, colores, espaciado, imágenes, URL o enlaces. Una vez aplicado, estos valores permanecen vinculados a cada módulo que los usa.

Aquí hay un ejemplo simple. Digamos que quieres que todos tus encabezados usen la fuente de Lato. En lugar de elegir Lato en cada módulo, crea una variable de fuente . Déle un nombre, seleccione Lato y guárdelo. Cualquier encabezado que te acompañe a esa variable ahora se mantendrá sincronizado.

Si desea cambiar a una fuente diferente más adelante, simplemente actualice la variable. Cada módulo conectado reflejará automáticamente el cambio.

Y ese es solo un caso de uso. También puede establecer variables para relleno de sección consistente, estilos de botones, colores de fondo o cualquier otra cosa que use repetidamente. No necesita definir todo a la vez si se siente demasiado abrumador. Comience con los estilos que sabe que reutilizará y amplíe su sistema de diseño desde allí.

3. Reemplace los valores estáticos con variables de diseño

A veces, los diseños tienen estilos codificados, por lo que actualizarlos manualmente hace que el proceso sea inconsistente. Es por eso que reemplazamos los valores estáticos con las variables globales que acabamos de definir.

No necesitas cazarlos individualmente. La herramienta de búsqueda y reemplazo de Divi facilita el intercambio de valores estáticos por variables en solo unos pocos clics. Digamos que todos sus encabezados usan fuentes seleccionadas manualmente. Abra cualquier módulo de encabezado, haga clic en el campo de fuente y seleccione Buscar y reemplazar.

En el panel de valor de reemplazo , pasee sobre el campo y abra el administrador de variables . Seleccione todos sus encabezados variables de fuentes y confirme el cambio.

Verá la magia de inmediato: cada instancia de esa fuente a través del diseño se reemplaza de inmediato. Este mismo método funciona para colores, espacios, estilos de botones y cualquier cosa por la que haya establecido una variable.

Y no tienes que cambiar todo a la vez. Comience a los estilos pequeños, elija los estilos que más reutilice, como el acolchado de sección o los fondos de botones, y cambielos primero. A medida que avanza, su diseño cambia de un mosaico de ediciones manuales a un sistema totalmente conectado. Y cuando ese sistema está en su lugar, cada cambio futuro se vuelve más fácil, más rápido y más consistente por defecto.

4. Use los atributos de extensión para aplicar actualizaciones en segundos

Una vez que sus valores globales están en su lugar, el siguiente paso es el refinamiento. A menudo se encontrará haciendo pequeños ajustes a secciones individuales y deseando poder llevar esos cambios al resto del diseño sin rehacer el trabajo. Es posible con atributos extendidos.

Le permite copiar instantáneamente estilos, contenido o preajustes de un elemento y aplicarlos a otros. También funciona incluso si los módulos no son del mismo tipo. Por ejemplo, si ha diseñado un borde y sombra personalizados para una imagen, puede usarlo como referencia para cada imagen de la sección.

Haga clic con el botón derecho en la imagen de estilo y elija extender los atributos.

Cuando el panel de extensión se abra, dale a un lado, ya que probablemente volverás a él. En los menores desplegables, configure el alcance en la sección principal y el tipo de elemento a la imagen, luego confirme.

Esa acción aplica su actualización a cada imagen en esa sección, sin necesidad de tocarlas individualmente.

Y ahí es donde extender los atributos realmente gana su lugar. Se necesita lo que hubiera sido una serie de ediciones manuales y repetitivas y las convierte en un movimiento constante. Puede usarlo para secciones con múltiples columnas o módulos similares, como una galería de imágenes o borrones. Es la forma más rápida de aportar una sensación de esmalte a su diseño sin quemar tiempo en cada módulo.

5. Guardar ediciones reutilizables como preajustes del grupo de opciones

A medida que refina su diseño, es probable que ajuste el espacio, los bordes o los colores de fondo para obtener las cosas bien. En lugar de repetir esos ajustes cada vez, guárdelos como preajustes de grupo de opciones.

Digamos que ha personalizado el espacio, el borde y el fondo de una columna. Te gusta cómo se ve y quieres reutilizarlo en otro lugar. Abra la configuración para esa columna, desplácese al grupo de estilo que modificó (como espaciado o borde), y haga clic en el icono preestablecido para guardarlo.

Para aplicar el preajuste a otras columnas, haga clic con el botón derecho en el original y elija Extender atributos> extender los preajustes de columna . En el panel, configure su alcance en la fila principal, elija la columna como tipo de elemento y presione los atributos de extensión.

Ese preajuste ahora se aplica a cada columna de la fila en un movimiento. Es especialmente útil para diseños con elementos repetidos como tablas de precios, borrones, testimonios o en cualquier lugar donde desee consistencia visual sin el esfuerzo manual. Y dado que los preajustes se guardan en el paquete de diseño, también los tendrá listos para usar en otras páginas.

6. Use copiar/pegar para cambios únicos rápidos

Una vez que haya extendido los estilos a una sección o fila completa, es posible que desee hacer ajustes pequeños y específicos. Tal vez solo una columna o módulo necesita un aspecto ligeramente diferente. En lugar de extender los presets nuevamente, use la función de gestión de atributos.

Por ejemplo, si ha personalizado el borde y la sombra de una columna y desea que solo uno o dos otros coincidan, haga clic con el botón derecho en la columna de estilo y elija Copiar estilos de elementos . Luego, haga clic con el botón derecho en la columna que desea actualizar y seleccione Pegar los estilos de elementos .

Esto no sobrescribirá otras configuraciones y funciona al instante, lo que lo hace ideal para situaciones en las que desea mantenerse flexible. Puede copiar y pegar estilos de casi cualquier elemento y decidir exactamente qué copiar, ya sea espaciado, colores, bordes u otros ajustes de diseño.

Extender los atributos Maneja las ediciones a granel, y Copy/Pegar maneja los detalles. Es perfecto para ajustar un diseño que se realiza principalmente, pero que aún necesita algunos toques personales.

7. Cambie entre puntos de interrupción personalizados para perfeccionar la vista receptiva

Asegúrese de que su diseño de escritorio se vea genial en cada tamaño de pantalla. Los puntos de interrupción personalizables de Divi 5 lo facilitan al permitirle cambiar entre tableta, teléfono e incluso anchos de pantalla personalizados con un solo clic. Los iconos del dispositivo están dentro del constructor, por lo que puede obtener una vista previa rápidamente de cómo se comportan sus secciones en pantallas más pequeñas.

Si es necesario, también puede definir sus propios puntos de interrupción para obtener más control.

Este es el momento perfecto para verificar el espacio, los tamaños de fuente y la alineación de imágenes. Solo lleva unos minutos, pero lo ahorra de problemas de diseño más grandes más tarde, especialmente en páginas con mucha contenido o centradas en la conversión. Y no necesitas cambiar tu flujo de trabajo. Las herramientas Divi funcionan con la misma suavidad en la vista receptiva, así que haga sus ajustes, visite el diseño y siga adelante.

8. Actualice sus variables de diseño para actualizar todo el diseño al instante

Anteriormente, configuramos sus variables de diseño globales y reemplazamos los valores estáticos utilizando Buscar y Reemplazar. Y ahora su diseño está completamente conectado a un sistema de diseño centralizado.

Las variables de diseño hacen que las actualizaciones de todo el sitio web sean extremadamente fáciles. Digamos que su marca actualiza su tipografía o color principal. En lugar de cavar a través de cada módulo para realizar los mismos cambios repetidamente, solo actualiza la variable guardada. Ese cambio se aplica instantáneamente en todo su diseño.

Para ver esto en acción, eche un vistazo a esta comparación de lado a lado. La estructura de diseño permanece igual, pero el proceso detrás de ella se vuelve dramáticamente más simple y más rápido.

Ahora piense en cómo escala esto. Imagine todo su sitio web, cada página y sección, construidas en el mismo sistema. Ya no está volviendo sobre sus pasos para cada cambio. Un solo ajuste a una variable actualiza todo. Está administrando toda su marca administrando valores a través del Administrador de variables.

Este tipo de flexibilidad es exactamente para qué fue diseñado Divi 5. No se trata solo de ediciones más rápidas, sino de reducir la repetición, aumentar la precisión y darle más control con menos esfuerzo.

Personaliza tu flujo de trabajo Divi 5

En este momento, ha visto cómo herramientas como variables de diseño, extensiones de atributos y preajustes de grupos de opciones pueden remodelar cómo actualiza los diseños. Pero no hay una sola forma de usarlos.

Este tutorial es solo una versión del proceso. Puede seguir los pasos en un orden diferente, omitir algunos o mezclarlos con su propia rutina. Y eso está completamente bien, ya que el objetivo no es seguir una fórmula, sino encontrar un ritmo que se sienta natural y se ajuste a la forma en que te gusta trabajar.

Experimentar un poco. Cuanto más juegues con las herramientas, más comenzarás a reconocer lo que funciona mejor para tu flujo. Si las cosas se sienten más suaves, sus actualizaciones son más rápidas y su diseño se mantiene consistente, esa es su señal de que está funcionando.

Y si se pregunta si estas herramientas pueden mantenerse al día a medida que evoluciona su flujo de trabajo, absolutamente pueden porque ...

Divi 5 está diseñado para adaptarse a su forma de trabajar

Ese es el pensamiento detrás de cada característica que hemos cubierto. Ya sea que desee definir cada estilo por adelantado o hacer cambios a medida que construye, las herramientas se adaptan a la forma en que prefiere trabajar.

Puede moverse rápidamente o tomarse su tiempo. Comience desde una página en blanco o refine un diseño existente. El constructor no te obliga a un flujo de trabajo rígido. Está construido para reducir el trabajo ocupado, omitir las ediciones repetitivas y ayudarlo a concentrarse en lo que realmente importa: diseñar con claridad, velocidad y confianza.

En última instancia, se trata de construir un proceso que se sienta como el suyo y se mantenga al día con usted a medida que crecen sus proyectos e ideas. ¿Estás listo para construir un flujo de trabajo de diseño que mejore contigo?