8 características del Divi Visual Builder que deberías utilizar!

Usar todo características del Divi Visual Builder?

Si Empieza con Divi, no es obvio explorar todas las opciones y características que Visual Builder !

En este artículo, te mostraré algunos consejos que te permitirán ser más eficiente y productivo cuando uses el Divi Builder Página.

1 – Pantalla con cable en 1 clic

Para los nostálgicos, aquellos que amaban construir su diseño de la oficina trasera, Divi Visual Builder permite habilitar "Visualización".

En sólo un clic, el diseño se construye como un "brick".

Esta manera de mostrar la construcción de la página es a veces necesaria para ver más claramente en su composición.

Esto permite comprobar, a primera vista, la colocación de secciones (azul o púrpura), líneas (verde) y módulos (verde).

Para diseño de pantalla en modo cableado, sólo abre las opciones desde el botón morado en la parte inferior de la página y haga clic en el icono 2o de ladrillo en la esquina inferior izquierda. Haga clic de nuevo para volver a una pantalla normal.

Lee también: 7 características ocultas de Divi para Gutenberg!

2 - Cierre de un módulo Divi

¿Eres el tipo de hombre que empieza algo, lo termina y ya no vuelve a hacerlo?

Genial, esta opción oculta es para ti!

El Editor Visual bloquea los módulos. Una vez que creas que tu módulo es completo y perfecto, puedes bloquearlo.

Esto le permite ver rápidamente las partes del diseño que se completan y las que aún no se completan.

Cada uno Módulo Divi, sección o línea, es probable que esté bloqueada:

1. Vaya a las opciones adicionales del elemento para bloquear: haga clic en el icono de los 3 puntos pequeños.
2. Seleccione la opción "Bloquear".
3. Un candado rojo aparece en el módulo bloqueado.

Si necesita desbloquearlo, haga clic en él y el módulo es editable de nuevo.

¡No te demores! Descubre el tema Divi aquí. !

3 – Select Divi Visual Builder Interface Type

La interfaz Visual Builder se puede utilizar en 3 modos:

1. El modo "Move Module".
2. El modo "Desbloquear el módulo".
3. El modo "grid".

Puedes mostrar los 3 iconos de acceso directo que le permitirá cambiar de un modo a otro en un solo clic.

• Haga clic en el botón morado en la parte inferior de la página (3 puntos pequeños) para hacer aparecer las opciones adicionales.
• Haga clic en el primer icono en la esquina inferior izquierda (todavía los 3 puntos pequeños).
• Aparece una ventana: puede hacer clic en los últimos 3 iconos grises (Divi Builder Settings) para añadir atajos.

Estos 3 modos de visualización también están disponibles en el menú desplegable llamado "Interface Builder". Aquí puede elegir el modo de visualización predeterminado.

3.1 – Interfaz Visual Builder en modo "Move Module"

El Modo "Move Module" es el modo predeterminado, el que ciertamente sabes.

Permite conseguir un diseño que muestre su composición sólo cuando pasa el ratón en la pantalla (mostrar en el buceador).

Con este modo, tendrá que pasar por encima del módulo o sección para editar para mostrar sus opciones. Cuando su ratón sale de la ventana, su diseño es "limpio", como el que el usuario de Internet ve cuando visita su sitio.

3.2 – Interfaz Visual Builder en modo "Unlock Module"

Incluso si traducción no es muy buena, Modo "Desbloquear módulo" permite obtener marcos de color alrededor de secciones/líneas/módulos para obtener una idea general de la composición de la distribución.

En el ratón, aparecerán las opciones de edición.

3.3 – Interfaz Visual Builder en modo cuadrícula

El Modo de presión muestra todas las secciones/líneas/módulos con su menú de edición. Esto le permite llegar fácilmente y rápidamente.

Por mi parte, no es raro tener que cambiar de un modo a otro, especialmente cuando ciertas secciones o módulos se solapan y las opciones de edición son difíciles de alcanzar. El modo cableado es también una gran ayuda en este tipo de configuración.

¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"

4 - Insertar la configuración de la página desde Visual Builder

Si necesitas cambiar el título, añadir una imagen avanzada o extracto de refinado para mejorar su SEO, no necesitas volver al back-end de su página... ¿Lo sabías?

Una opción Divi Visual Builder permite llegar a estos ajustes de página directamente...

• Haga clic en el botón morado en la parte inferior de la página (los 3 puntos pequeños), para hacer aparecer las opciones adicionales.
• Haga clic en el icono de la rueda curvada.
• Un pop-up aparece y le permite cambiar estos ajustes: título de página, extracto y imagen avanzada.

5 - Extender los estilos de cualquier módulo Divi a toda la página

¡Esta es una opción que te ahorrará tiempo loco!

Imagina que acabas de terminar diseño muy complejo y por último, su cliente (o usted) decide cambiar el color principal, Typo o incluso el tamaño de la fuente...

¿Realmente vas a modificar el módulo por módulo y pasar horas más innecesarias en tu proyecto? He pasado por esto, también...

¡No te preocupes por Divi!

Opción "Extienda estilos" es perfecto para aplicar la modificación de un elemento en el conjunto de una línea, sección o página !!!

En este ejemplo, mis botones son rojos. Si, al final, decido pasarlos en púrpura, me gustaría evitar hacer la acción 3 veces (o tantas veces como hay botones)...

Así que tengo que:

1. Abrir los parámetros de un módulo aquí es el primer botón.
2. Hacer mis cambios: este puede ser el tamaño del botón, añadir una frontera, añadir una sombra, cambiar el color de fondo, etc. Una vez hecho este cambio, haga clic en el icono de los 3 puntos pequeños que aparece en el folleto cerca de la opción.
3. Elija "extender xxxxx". En mi caso, es « botón de fondo extendido ».
4. Las opciones aparecerán: a "todos los botones", a través de "esta página". Desde los menús desplegables, puede elegir las condiciones para aplicar este nuevo estilo. Acabar con Ampliación.

Este video es ciertamente más explícito...

6 - Volver a una versión anterior con "revisiones"

El Visual Builder ¡Le da derecho al error!

Si acabas de cambiar algo que no es correcto para ti o has borrado erróneamente un módulo o sección, puedes regresar.

Para mostrar la historia de sus cambios, abra el menú contextual en la parte inferior de la página (botón violento) y haga clic en el icono del reloj.

La lista de cambios aparece con el calendario. Seleccione la versión que desea volver a entrar y luego confirme.

7 – Obtener ayuda y recursos directamente en Visual Builder

¿Necesita ayuda para utilizar mejor Divi Visual Builder?

Es posible que no necesite buscar en Google una solución... ¿Quizá está justo aquí delante de ti?

¿Alguna vez ha hecho clic en el icono de marca de preguntas en la parte inferior derecha?

Un popup abre y le permite ver video tutos e incluso acceso a la lista Atajos de teclado Divi.

Obtenga una lista completa de los atajos de teclado Divi Visual Builder aquí!

Con estos atajos, puede ahorrar mucho tiempo, especialmente si su actividad principal se basa en el diseño del sitio WordPress con Divi.

El icono de la lupa, justo al lado, le permite buscar rápidamente una respuesta a una pregunta.

8 - ¡La prueba es la obra de un niño!

¿Alguna vez has usado el funcionalidad de prueba A/B se ofrece con Divi Visual Builder?

Es muy fácil de configurar y se utiliza en cualquier sección/línea o módulo del Divi Builder...

Todo el tiempo, vaya al menú opcional (3 icono de puntos pequeños) del módulo o sección para duplicar en A/B Testing. Elija: Prueba A/B.

Un popup se abrirá y puede hacer clic en el elemento que se probará A/B. Usted verá que el cursor se vuelve redondo para apuntar el elemento.

En ese momento, se duplicará el elemento.

Si no lo ves, cambia a modo de visualización cableado (como se ve en este artículo) y verás que el artículo ha sido duplicado.

Puedes editarlos para hacer variaciones. Por ejemplo: "gratis cita" o "contáctenos".

A/B Las pruebas le permitirán comprobar qué CTA funciona mejor.

La idea es probar la versión A para un período determinado, luego la versión B para otro período. Entonces decidir qué versión será implementada a largo plazo.

A/B Testing es una técnica de marketing muy eficaz para medir el compromiso y la tasa de clic.

Cuando uno de sus elementos se somete a un período de prueba A/B, fácilmente lo reconocerás como se vuelve azul. Entonces puedes:

1. Establecer la configuración como de costumbre.
2. Obtener estadísticas al final del período de prueba.
3. Cambiar de una versión a otra haciendo clic en las flechas laterales.
4. Vaya al menú contextual para terminar la prueba o acceder a otras opciones.

Las estadísticas le darán acceso a información valiosa como:

1. El número de clics
2. Número de opiniones
3. La tasa de rebote
4. La tasa de compromiso

Esto es en todos los aspectos los datos y KPI necesitaba estudiar la eficacia de una campaña de marketing.

Todos los recursos oficiales relacionados con Las pruebas de Livi están disponibles aquí.

9 - La palabra final...

Confeso que aún no conozco todas las esquinas y Opciones ocultas de Divi y su constructor visual.

Aunque uso diario Divi para los proyectos de mis clientes, míos o incluso mi entrenamiento, siempre hay algo que descubrir...

Me encantaría saber si ya lo sabías y utilizas Las "opciones ocultas" de Visual Builder o si ves otros bonitos que podría haber olvidado en esta lista: dilo en comentario!