Consejos Divi No 91

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

Actualizado en 02/06/24

1825 palabras

7 minutos de lectura
12 comentarios

Este artículo contiene enlaces de afiliados reconocibles por el icono porcentaje (%) → Soy un enlace de afiliado

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".

Pantalla con cable Divi Visual Builder
Pantalla con cable Divi Visual Builder

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).

Visualización cableable

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.

Cierre un módulo Divi

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.

Elija la interfaz del Divi Visual Builder
Elija la interfaz del Divi Visual Builder
  • 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.
Visual Builder Interfaz

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"

Interfaz de movimiento

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"

Desbloquear la interfaz de modo
Desbloquear la interfaz de modo

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

Interfaz del modo Grid

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...

Ajustes de página
Ajustes de página
  • 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 !!!

Ampliar estilo en Visual Builder
Ampliar estilo en Visual Builder

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"

Historia del constructor visual
Historia del constructor visual

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?

Ayuda Divi Visual Builder
Ayuda Divi Visual Builder

¿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...

A/B Testing Divi
Activar el ensayo A/B

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.

A/B Testing Divi Visual Builder
Establecer ambas versiones de la prueba

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.
A/B Testing Visual Builder
Las opciones del A/B Testing

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
A/B Probando Divi Builder
Estadísticas de prueba A/B

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!

Funcionalidades Divi Visual Builder
Funalites Visual Builder Divi

Obtener Divi

Entrenamiento Divi

Libro electrónico Divi

Consejos gratis

Cuestionario Divi

Entrenamiento en vivo

icono 256x256
¡Descubre mi extensión wpLingua, que hace que sus sitios sean multilingües en tan solo unos pocos clics! Compatible con SEO / Automático / Editable

12 Comentarios

  1. Samir

    Merci pour ces astuces.

    J’utilise DIVI pour mes clients et je tenais à vous remercier pour toutes les astuces que vous apportez.

    Samir
    wpcreationweb.com

  2. Lycia Diaz

    Merci Samir !

  3. jean-luc Robert

    Hello Lycia
    Super ces astuces, je ne les connaissais pas, et pourtant je suis assez curieux. Je suis content de connaitre ton blog.
    Merci encore

  4. Lycia Diaz

    Super Jean Luc !

  5. Benabou

    Super article et super site. J’utilise également beaucoup Divi avec mes clients et pour mes propres sites et je dois dire que ça m’a donné envie de tester le A/B testing.

  6. Michele

    c’est TOP toutes ces astuces !! tout est TOP sur ce site ma référence absolue
    en plus comme j’ai tout en anglais et que je suppose que les lignes sont dans l’ordre ça va m’aider
    merci encore

  7. Lycia Diaz

    Merci Michelle

  8. Pierre

    Top, merci 🙂

  9. Dominique

    Débutante dans le freelance et après une formation courte de DIVI, merci pour tous les conseils, j’y trouve toujours la solution.

  10. Lycia Diaz

    MErci à toi 😉

  11. Patrel

    Bonjour
    J’ ai un souci pour creer mes articles
    Apres en avoir crée un avec le divi builder , qd je creer un 2 eme des que je l’ edite c’ est le premier qui apparait
    Si je le modifie ds divi c’ est alors le premier qui est modifié ????

  12. Klik Studio

    Merci beaucoup pour ces astuces bien utiles au quotidien 🙂

Presentar un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios se indican con *

Este sitio utiliza Akismet para reducir indeseables. Más información sobre cómo se utilizan sus datos de retroalimentación.