5 consejos para navegar por la interfaz Divi 5 como un profesional

Con el lanzamiento de la Alfa pública de Divi 5, los usuarios ahora pueden explorar las poderosas mejoras que se están gestando detrás de escena en Elegant Themes. Divi 5 es una actualización importante que ofrece una base renovada para mejorar la velocidad, la estabilidad y la escalabilidad. Ya sea que sea un profesional experimentado o esté comenzando con Divi, este nuevo Visual Builder le permitirá crear sitios web de manera más eficiente, con menos pasos y tiempos de carga más rápidos. Participa con esta nueva actualización de Elegant Themes y navega como un profesional.

Descubra más sobre Divi 5 Public Alpha y cómo descargarlo.

Descargar la alfa pública de Divi 5

5 consejos para dominar la interfaz Divi 5

Navegar por la interfaz Divi 5 puede resultar emocionante para usuarios nuevos y experimentados. La interfaz actualizada proporciona un nuevo enfoque para la creación de sitios web con su diseño moderno y funcionalidad mejorada. Aquí hay algunos consejos que hemos compartido para ayudarlo a familiarizarse con la interfaz:

1. Acceda a los elementos rápidamente a través de la vista de capas

El Panel de Capas no es nuevo en Divi 5. Tenemos la Vista de Capas en Divi 4. Sin embargo, se le ha dado una interfaz de usuario mejorada con un acceso más fácil en la barra lateral izquierda. También es uno de los paneles acoplables clave que querrás tener a la vista durante tus construcciones. Es un punto de inflexión en la gestión de diseños complejos, especialmente cuando los elementos se superponen o se vuelven difíciles de seleccionar. También es útil buscar/filtrar por diferentes elementos que busca para encontrar rápidamente múltiples elementos en páginas grandes.

Abra el Panel de capas a la izquierda de su pantalla para ver todos los elementos en su diseño, independientemente de su posición o visibilidad en el lienzo. Puede seleccionar cualquier capa directamente desde allí, incluso cuando esté oculta detrás de otro módulo o sección.

Consejo profesional

Mantenga siempre visible la vista de capas como uno de sus paneles acoplados. Es demasiado útil y conveniente como para ignorarlo.

Ejemplo práctico

Supongamos que desea actualizar todos los botones CTA de su página con contenido nuevo. En Divi 5, puedes usar el panel de capas para buscar el elemento deseado (botón) y verlos todos. Luego, con un solo clic en cada botón, podrá actualizar la configuración en el panel de configuración, que aparecerá inmediatamente. Este flujo de trabajo fluido cambia las reglas del juego para manejar diseños complejos y con mucho contenido.

2. Acelere las ediciones con paneles acoplables y un clic

Los paneles acoplables de Divi 5 y las funciones de edición con un solo clic le permiten mantener abiertos múltiples paneles de configuración mientras realiza cambios rápidos con un solo clic. Esto permite realizar ajustes rápidos y una navegación más fluida por los módulos sin abrir y cerrar paneles repetidamente.

Consejo profesional

Mantenga los paneles relevantes acoplados al costado de su pantalla para un acceso rápido, especialmente cuando trabaje en varias secciones o módulos simultáneamente. Esto reduce la cantidad de clics necesarios y acelera su flujo de trabajo.

Ejemplo práctico

Continuando con el ejemplo de nuestro primer consejo, es necesario ajustar el texto del botón de todos los módulos. Al acoplar las capas y los paneles de botones en el mismo lado, puede cambiar fácilmente entre ellos para realizar ediciones rápidas con un solo clic, lo que le ahorra la molestia de volver a abrir los paneles cada vez que necesita hacer ajustes o tener que mover el cursor de uno. extremo de la pantalla al otro. Esta configuración es ideal cuando se trabaja en varias secciones que necesitan actualizaciones.

3. Optimice la navegación con las rutas de navegación del panel de configuración

Las rutas de navegación en el panel de configuración son una característica única en Divi 5. Las rutas de navegación permiten a los usuarios navegar a cualquiera de los elementos principales de un elemento secundario en Divi directamente desde el panel de configuración. Un elemento padre es básicamente el contenedor del elemento hijo. A continuación se muestra una ilustración sencilla de la estructura principal y secundaria de los elementos Divi.

Incluso los módulos tienen elementos secundarios (como un acordeón o un formulario de contacto) y las secciones tienen "Página" como elemento principal, lo que hace que las rutas de navegación sean aún más útiles. Anteriormente, en Divi 4, tenías que confiar en la vista de capas o intentar encontrar el elemento principal haciendo clic dentro del constructor.

Cuando abres la configuración de cualquier módulo en Divi 5, aparece una ruta de navegación en la parte superior del panel de configuración. Este recorrido muestra su ubicación actual y le permite regresar al elemento principal con un solo clic. A continuación se muestra un ejemplo de cuáles son las rutas de navegación cuando se selecciona un elemento de acordeón. Verá "Acordeón" como uno de los enlaces en el menú de ruta de navegación porque es el elemento principal inmediato del elemento de acordeón seleccionado.

Las rutas de navegación son especialmente útiles al diseñar formularios de contacto o CTA que utilizan varios elementos principales para crear un diseño único. Una vez que haya diseñado el módulo, puede saltar fácilmente al elemento de columna o fila para ajustar el diseño en consecuencia.

Ejemplo práctico

Supongamos que está diseñando un formulario de contacto y desea incorporar la fila y la sección en su diseño. Puede realizar cambios y utilizar las rutas de navegación para acceder a los elementos principales que necesita, todo sin cerrar el panel.

4. Diseño adaptable sin esfuerzo con escalado de lienzo

En Divi 5, puedes escalar el lienzo en tiempo real para simular cómo se verá tu diseño en dispositivos móviles, tabletas y de escritorio. Esta herramienta le permite cambiar el tamaño del lienzo visualmente sin salir del generador, lo que significa que ya no necesita cambiar al modo de vista previa ni cambiar el tamaño de la ventana del navegador manualmente. El constructor de Divi 5 se adapta automáticamente a medida que escala el lienzo para mostrar los cambios para ese tamaño de dispositivo específico, lo que facilita el ajuste de los diseños responsivos.

Consejo profesional

Utilice Canvas Scaling para asegurarse de que sus diseños móviles se vean perfectos. Ajuste el relleno, las fuentes y la alineación desde la vista móvil para que su diseño funcione perfectamente en pantallas más pequeñas.

Ejemplo práctico

Después de realizar ajustes en el texto, ahora debes asegurarte de que el diseño se vea bien en el móvil. Al utilizar Canvas Scaling, puede ajustar fácilmente el diseño para vistas de dispositivos móviles y tabletas sin cambiar entre diferentes dispositivos o pantallas.

Para obtener más información, consulte cómo dominar la edición responsiva en Divi 5.

5. Optimización de diferentes capas de interacción en diferentes modos de visualización

Divi 5 agiliza la gestión de efectos de desplazamiento, elementos fijos y diseño responsivo. En Divi 4, tenías que habilitar estas configuraciones para cada elemento manualmente y, a menudo, cambiar entre diferentes paneles, lo que hacía que aplicar y obtener una vista previa de los efectos llevara mucho tiempo. Divi 5 simplifica este proceso al hacer que las capas de interacción estén disponibles directamente dentro del mismo panel de configuración, lo que reduce la cantidad de pasos y clics necesarios para ajustar su diseño.

Cómo funciona

En Divi 5, las opciones de diseño para los estados de desplazamiento, fijo y de respuesta están integradas directamente en el panel de configuración de cada módulo. Puede cambiar rápidamente entre los estados predeterminado, flotante y fijo haciendo clic en las pestañas dentro de la configuración del módulo. Esta interfaz intuitiva le permite aplicar efectos de diseño, como animaciones al pasar el mouse o comportamientos fijos, sin tener que navegar por diferentes menús ni codificarlos manualmente.

Consejo profesional

Cambie entre los modos de desplazamiento y fijo para obtener una vista previa de cómo se comportarán sus elementos de diseño en todos los dispositivos y durante las interacciones. Divi 5 facilita ver los efectos en tiempo real y ajustarlos rápidamente. Anteriormente, en Divi 4, tenías que aplicar los cambios a cada característica respectiva, lo que consumía mucho tiempo.

Ejemplo práctico

Hemos añadido un botón de consulta en nuestra página de inicio. Con las capas de interacción optimizadas de Divi 5, puedes alternar entre configuraciones responsivas, estados de desplazamiento y estados fijos directamente en el mismo panel de configuración, asegurando que cada elemento se comporte perfectamente en todos los dispositivos. Comenzaremos cambiando el color de fondo del botón de nuestra página de inicio y verificando su comportamiento en la configuración responsiva.

Continuaremos entrando en el modo de desplazamiento, cambiando el color de fondo del botón y volviendo al modo de escritorio después de realizar los cambios. Esto mostrará que el botón en la versión de escritorio tendrá su color original (negro) antes de que el cursor se mueva hacia él.

Por último, activaremos el modo fijo antes de comprobar el comportamiento del botón en modo fijo. Esto le permite aplicar y obtener una vista previa rápidamente de los efectos mientras se desplaza por diferentes vistas sin salir del generador ni habilitar configuraciones separadas.

Obtenga más información sobre cómo Divi 5 simplifica los procesos de diseño aquí.

Navegando Divi 5 como un profesional

Al dominar estas funciones esenciales de la interfaz Divi 5, podrá navegar por sus diseños de manera más eficiente y evitar frustraciones comunes que pueden ralentizar su flujo de trabajo. Ya sea usando el Panel de capas para administrar elementos superpuestos o aprovechando la edición con un clic y la escala del lienzo para un diseño responsivo, estos consejos lo ayudarán a aprovechar Divi 5 al máximo.

Comienza a experimentar con estas herramientas en Divi 5 Public Alpha y lleva tus diseños al siguiente nivel. Para obtener más consejos y recursos sobre cómo comenzar con Divi 5, consulte nuestra descripción general completa de la interfaz y otras publicaciones del blog.

Descargar la alfa pública de Divi 5