¿Cómo ahorrar tiempo al usar Divi 5 para crear un sitio web?

Rifat Divi Tutorials Nov 18, 2024

El rediseño de Divi 5 desde cero ofrece una velocidad, un rendimiento y una simplicidad de uso inigualables. Con un generador visual simplificado y un back-end totalmente rediseñado, crear sitios web con Divi 5 es más rápido y sencillo que nunca. Divi 5 le permitirá, independientemente de su nivel de experiencia, desarrollar excelentes sitios en un tiempo récord sin sacrificar tiempo ni creatividad.

Ven a ver la nueva interfaz de usuario de Divi 5 durante este período de prueba alfa pública. Recuerda que esta versión aún se encuentra en desarrollo activo. Aunque es posible que encuentres algunas fallas, los consejos a continuación te permitirán maximizar tu productividad mientras pruebas y desarrollas con Divi 5.

Las 10 mejores formas de crear un sitio web más rápido con Divi 5

Desde el lanzamiento de Divi 5 Public Alpha, se han implementado muchos ajustes y mejoras.

1. Utilice la edición con un solo clic

En Divi 4, debes hacer clic en el ícono de configuración para modificar secciones, filas y módulos. Con Divi 5, la edición con un solo clic ha eliminado todo eso. El módulo se puede editar haciendo clic en cualquier parte de él, lo que acelera y reduce la frustración del proceso de diseño.

Create Amazing Websites

Con el mejor generador de páginas gratuito Elementor

Empezar ahora

Por ejemplo, para cambiar un módulo de texto, todo lo que se necesita es un clic en cualquier parte del módulo para acceder a su configuración instantáneamente.

2. Para realizar acciones rápidas, haga clic derecho

El menú contextual con botón derecho en Divi 5 le ofrece un nuevo y valioso atajo para su proceso de diseño. Puede hacer clic con el botón derecho en cualquier módulo, sección o fila para crear un menú de acciones rápidas con algunas actividades de uso frecuente. Esta herramienta le permite completar operaciones rápidamente sin abrir varios paneles ni buscar entre las opciones, ya sea que desee copiar estilos de módulos, duplicar configuraciones o eliminarlas.

Por ejemplo, supongamos que ha creado un botón con un estilo único. Con la opción de acciones rápidas, puede hacer clic con el botón derecho, copiar el estilo del botón y aplicarlo a todos los módulos de botones que desee que tengan el mismo estilo.

3. Ancle varios paneles con pestañas para distintas tareas

Otra característica fantástica de Divi 5 es la posibilidad de acoplar varios paneles, que te permite abrir y controlar muchos paneles simultáneamente. En versiones anteriores, podías ver muchos paneles (por ejemplo, capas + configuraciones de módulos), pero solo podías moverlos por el lienzo sin obstruir la vista. Para mantener el lienzo despejado, puedes usar pestañas para los paneles en Divi 5.

Cuando puedes documentar varios paneles uno al lado del otro, es sencillo modificar varios aspectos de tu diseño a la vez. La interfaz de Divi 5 te permite organizar los paneles en el lienzo como quieras, creando el espacio de trabajo ideal para tus necesidades. Supongamos, por ejemplo, que prefieres tener todos los paneles en el lado izquierdo del lienzo. Para crear un espacio de trabajo que se adapte a tus necesidades, puedes separar y mover los paneles hacia la izquierda y, luego, colocar pestañas en otros paneles.

4. Utilice el escalado de Canvas a su favor en el diseño adaptable

Divi 5 ofrece un enfoque completamente nuevo para la creación de páginas web adaptables. Gracias al escalado del lienzo, puedes escalar rápidamente tu espacio de trabajo y ver cómo se verá tu sitio web en diferentes pantallas sin tener que salir del Visual Builder. También puedes cambiar rápidamente el tamaño del lienzo de diseño, lo que te permite cambiar el diseño, el relleno y los márgenes.

Considere el siguiente escenario: está trabajando en un diseño para dispositivos móviles y desea cambiar la distancia entre las partes. Para ajustar la escala del lienzo, haga clic y arrastre el borde del lienzo hasta el tamaño deseado. Desde allí, puede ajustar rápidamente los márgenes y el relleno para garantizar que su diseño se vea nítido en pantallas pequeñas.

5. Aplique efectos de desplazamiento y pegajosidad inmediatamente

Añadir efectos flotantes y fijos a tus diseños ahora es más fácil que nunca con Divi 5. En versiones anteriores de Divi, los usuarios tenían que ir a la pestaña de diseño del módulo e ingresar la configuración. Sin embargo, Divi 5 te permite aplicar estos efectos directamente desde el menú de configuración. Gracias a este método innovador, crear diseños dinámicos y cautivadores sin interferir con tu flujo de trabajo ahora es más simple que nunca.

Divi 5 permite aplicar efectos de desplazamiento a los botones de forma fácil y rápida y mantener el encabezado en la parte superior de la pantalla mientras los usuarios navegan. Por ejemplo, supongamos que desea agregar un color diferente al desplazarse sobre un elemento al crear una llamada a la acción. Para aplicar los cambios en cuestión de segundos, elija el estado de desplazamiento en un menú desplegable en la configuración.

6. Para una navegación más eficaz, utilice migas de pan

Una nueva función de migas de pan en Divi 5 hace que sea más fácil y rápido para los usuarios acceder a los módulos y configuraciones. Gracias a las migas de pan, puedes navegar entre diseños sin perderte. Sirven como una guía visual que indica tu ubicación exacta dentro de la configuración.

Cuando trabaje dentro de una sección, no tendrá que volver atrás a través de los menús ni perder el punto en el que se encontraba. Para agilizar el proceso de diseño, cada ruta de navegación ofrece un enlace en el que puede hacer clic y que le permite volver rápidamente a un ajuste preestablecido anterior.

7. Copie y pegue estilos en distintos módulos para ahorrar tiempo

Divi 5 simplifica la tarea de copiar y pegar estilos de módulos entre distintas partes. Esto ahorra tiempo y garantiza la coherencia en todo el sitio al permitirle aplicar las mismas configuraciones de diseño rápidamente en varios módulos. Divi 5 simplifica los estilos de cualquier módulo, fila o sección y luego los usa en todo el diseño.

Por ejemplo, supongamos que desea que todos los botones de una página web tengan el mismo diseño. Puede aplicar el estilo haciendo clic derecho para abrir el menú de acciones rápidas, copiando el estilo y, a continuación, haciendo clic derecho para pegarlo en todos los botones de la página.

8. Al crear diseños complejos, utilice la vista de estructura alámbrica

La vista de estructura alámbrica en Divi 5 elimina los componentes de diseño visual de una página, revelando un plano de diseño claro y sin complicaciones. En esta vista, puedes concentrarte completamente en la estructura, sin distracciones visuales como colores y fuentes. Es útil para diseños complejos cuando necesitas hacer ajustes estructurales rápidamente.

Con esta versión simplificada, puede concentrarse en organizar secciones, filas y módulos. La vista de estructura alámbrica le permite administrar la estructura de un proyecto complejo sin preocuparse por la estética.

9. Utilice contenido de formato largo en la vista de capas

La vista de capas delimita las secciones, filas y módulos de la página. Esto hace que sea más sencillo ver rápidamente toda la estructura del diseño. Puede encontrar fácilmente una pieza o un módulo en particular en el panel Capas en lugar de navegar por el Constructor visual.

Cualquier elemento del diseño se puede seleccionar y editar inmediatamente en la vista de capas sin necesidad de hacer clic en él en el generador. Esto resulta especialmente útil para piezas que están anidadas en profundidad dentro de otros módulos o que están ocultas, como filas dentro de varias capas de secciones.

10. Esté abierto a aprender cosas nuevas

Divi 5 ofrece un enfoque completamente diferente para usar el Visual Builder. Existe una curva de aprendizaje asociada con todas estas importantes actualizaciones. Al principio, es normal sentirse un poco abrumado, especialmente si estás acostumbrado a las versiones anteriores de Divi. La buena noticia es que todas las modificaciones que hicimos al Visual Builder son fáciles de usar, por lo que familiarizarse con la interfaz de usuario te ayudará a crear sitios web con Divi de manera más rápida y eficaz.

Terminando

La interfaz de Divi 5 está diseñada para mejorar la productividad, pero los usuarios deberían experimentar con ella acoplando múltiples paneles, usando atajos de clic derecho y revisando diseños existentes.

Divi 5 Migrator puede ayudar a perfeccionar los diseños. Comienza con funciones simples como la escala del lienzo y las herramientas de efectos flotantes y fijos. A medida que te sientas más cómodo con Divi 5, incorporarás naturalmente más funciones a tu proceso de diseño. Experimenta con diferentes configuraciones, juega con la nueva interfaz y perfecciona las técnicas para que tu flujo de trabajo sea más fluido y eficiente.

Divi WordPress Theme