8 funciones de Divi Visual Builder que debes utilizar!

Actualizado el 05/03/2020 | Publicado el 27/02/2020 | 10 comentarios

¿Estás utilizando todas las funciones de Divi Visual Builder?

Si eres nuevo en DiviNo es fácil explorar todas las opciones y funciones que ofrece el Visual Builder .

En este artículo, te mostraré algunos consejos que te ayudarán a ser más eficiente y productivo cuando uses el Constructor de Páginas de Divi.

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - Pantalla con cable en 1 clic

Para los nostálgicos, los que amaban construir su diseño desde el back-officeEl Constructor Visual Divi le permite activar la "visualización del wireframe".

Affichage filaire Divi Visual Builder
Visual Builder de Divi, muestra el wireframe

Con un solo clic, la construcción del diseño se muestra como un "ladrillo".

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

Esto le permite comprobar, de un vistazo, la colocación de las secciones (en azul o morado), las líneas (en verde) y los módulos (en gris).

Activer l'affichage filaire

Para visualizar la maqueta en modo "wireframe", basta con abrir las opciones desde el botón púrpura de la parte inferior de la página y hacer clic en el icono del segundo ladrillo de la esquina inferior izquierda. Vuelve a hacer clic en él para volver a la vista normal.

Lea también: 7 funciones ocultas de Divi para Gutenberg!

2 - Bloqueo de un módulo Divi

¿Es usted el tipo de persona que empieza algo, lo termina y nunca mira atrás?

Genial, ¡esta opción oculta es para ti!

El Constructor Visual le permite bloquear módulos. Una vez que crea que su módulo está completo y perfecto, puede bloquearlo.

Esto le permite ver rápidamente qué partes del trazado se han completado y cuáles no.

Verrouiller un module Divi

Cada Módulo Divisección o línea, es probable que se bloquee:

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

Si necesita desbloquearlo, sólo tiene que hacer clic en él y el módulo volverá a ser editable.

No esperes más. Descubra el tema Divi aquí !

3 - Elija el tipo de interfaz del Divi Visual Builder

La interfaz de Visual Builder puede utilizarse en 3 modos:

  1. El modo "mover el módulo".
  2. El modo "desbloquear módulo".
  3. El modo "cuadrícula".

Puede mostrar los 3 iconos de acceso directo que le permitirán cambiar de un modo a otro con un solo clic.

Choisir l'interface du Divi Visual Builder
Elección de la interfaz del Constructor Visual Divi
  • Haga clic en el botón púrpura de la parte inferior de la página (3 puntos pequeños) para mostrar las opciones adicionales.
  • Haz clic en el primer icono de la esquina inferior izquierda (los 3 puntitos de nuevo).
  • Aparece una ventana: puedes hacer clic en los últimos 3 iconos grises (configuraciones del constructor Divi) para añadir los accesos directos.
Interface Visual Builder

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

3.1 - Interfaz de Visual Builder en modo "mover módulo"

Interface mode déplacer

El modo "mover módulo" es el modo por defecto, el que probablemente conozcas.

Permite obtener un diseño que muestra su composición sólo cuando se pasa el ratón por la pantalla (visualización hover).

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

3.2 - Interfaz de Visual Builder en modo "desbloquear módulo"

Interface mode déverrouiller
Interfaz del modo de desbloqueo

Aunque el la traducción no es muy buenaEl modo "desbloquear módulo" permite obtener cuadros de colores alrededor de las secciones/líneas/módulos para tener una idea general de la composición del trazado.

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

3.3 - Interfaz de Visual Builder en modo "cuadrícula"

Interface mode grille

El modo "cuadrícula " muestra todas las secciones/líneas/módulos con su menú de edición. Esto le permite llegar a ellos con facilidad y rapidez.

Por mi parte, no es raro tener que cambiar de un modo a otro, sobre todo cuando algunas secciones o módulos se superponen y las opciones de edición son difíciles de alcanzar. El modo wireframe también es de gran ayuda en este tipo de configuraciones.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

4 - Inserción de los parámetros de la página desde el Visual Builder

Si necesita cambiar el título de su página, añadir una imagen destacada o modificar el extracto para mejorar su SEOno necesitas volver a la parte trasera de tu página... ¿Lo sabías?

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

Paramètres de la page
Configuración de la página
  • Haga clic en el botón púrpura de la parte inferior de la página (los 3 puntitos), para que aparezcan las opciones adicionales.
  • Haga clic en el icono de la rueda dentada.
  • Aparece una ventana emergente que permite modificar estos parámetros: título de la página, extracto y imagen destacada.

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

Esta es una opción que le ahorrará mucho tiempo.

Imagina que acabas de terminar un diseño muy complejo y finalmente, su cliente (o usted) decide cambiar el color principal, el tipo de letra o incluso el tamaño de la fuente...

¿Realmente vas a modificar módulo por módulo y gastar más horas inútiles en tu proyecto? Te hace enfadar, yo también he pasado por eso...

No te preocupes con Divi!

La opción "extender estilos" es perfecta para aplicar el cambio de un elemento a toda una línea, sección o página!!!

Étendre les style dans le Visual Builder
Ampliar los estilos en el Visual Builder

En este ejemplo, puedes ver que mis botones son rojos. Si al final decido cambiarlos a morados, me gustaría evitar realizar la acción 3 veces (o tantas como botones haya)...

Por lo tanto, todo lo que tengo que hacer es :

  1. Abrir los parámetros de un módulo, aquí, es el primer botón.
  2. Hacer mis modificaciones: puede ser el tamaño del botón, añadir un borde, añadir una sombra, cambiar el color de fondo, etc. Una vez hecha esta modificación, sólo hay que pulsar sobre el icono de los 3 puntitos que aparece al pasar el ratón cerca de la opción.
  3. Elija "ampliar xxxxx". En mi caso, es "ampliar el botón de fondo"..
  4. Aparecerán las opciones: . a "todos los botones", en toda "esta página" .. En los menús desplegables, puede elegir las condiciones para aplicar este nuevo estilo. Terminar con "Extender"..

Este vídeo es ciertamente más explícito...

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

Historique du Visual Builder
Historia del Visual Builder

El Constructor Visual te da derecho a equivocarte.

Si acabas de cambiar algo que no te gusta, o si has eliminado un módulo o una sección por error, puedes volver atrás.

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

La lista de cambios aparece con el horario. Seleccione la versión que desea restablecer y confirme.

7 - Obtenga ayuda y recursos directamente en el Visual Builder

¿Necesitas ayuda para usar el Constructor Visual de Divi?

Puede que no necesites buscar la solución en Google... Puede que la tengas delante de ti...

Aide Divi Visual Builder
Ayuda de Divi Visual Builder

¿Ha hecho alguna vez clic en el icono del signo de interrogación de la parte inferior derecha?

Se abre una ventana emergente que te permite ver tutoriales en vídeo e incluso acceder a la lista de atajos de teclado de Divi.

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

Con estos atajos, puedes ahorrar mucho tiempo, especialmente si tu actividad principal se basa en el diseño web WordPress con Divi.

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

8 - ¡Las pruebas A/B son un juego de niños!

¿Has utilizado alguna vez la función de A/B Testing que ofrece el Divi Visual Builder?

Es realmente fácil de configurar y se puede utilizar en cualquier sección/fila o módulo del Divi Builder...

A/B Testing Divi
Activar la prueba A/B

En primer lugar, vaya al menú opcional (icono de los 3 puntos pequeños) del módulo o de la sección que se va a duplicar en el A/B Testing. Elija: A/B Testing.

Se abrirá una ventana emergente y podrá hacer clic en el elemento que será objeto de la prueba A/B. Verá que el cursor se vuelve redondo para apuntar al elemento.

En este punto, el elemento se duplicará.

A/B Testing Divi Visual Builder
Definir las 2 versiones de la prueba

Si no lo ves, cambia al modo wireframe (como se ve en este artículo) y verás que el elemento ha sido duplicado.

A continuación, puede editarlos para hacer variaciones. Por ejemplo: "presupuesto gratuito" o "contáctenos".

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

La idea es probar la versión A durante un periodo determinado, y luego la versión B durante otro periodo. A continuación, decida qué versión se aplicará a largo plazo.

Pruebas A/B es una técnica de marketing muy eficaz para medir la participación y el porcentaje de clics.

Cuando uno de sus elementos se somete a un periodo de prueba A/B, lo reconocerá fácilmente porque se vuelve azul. A continuación, puede :

  1. Defina los ajustes como de costumbre.
  2. Obtenga estadísticas al final del periodo de prueba.
  3. Pase de una versión a otra haciendo clic en las flechas laterales.
  4. Vaya al menú emergente para finalizar la prueba o acceder a otras opciones.
A/B Testing Visual Builder
Opciones de A/B Testing

Las estadísticas le permitirán acceder a información valiosa como:

  1. El número de clics
  2. El número de visitas
  3. Tasa de rebote
  4. El índice de compromiso
A/B Testing Divi Builder
Estadísticas de las pruebas A/B

Esto es muy similar a los datos y KPI necesarios para estudiar la eficacia de una campaña de marketing.

Todos los recursos oficiales sobre Las pruebas A/B de Divi están disponibles aquí.

9 - La última palabra...

Debo reconocer que aún no conozco todas las opciones ocultas de Divi y su Visual Builder.

Puede que utilice Divi a diario para los proyectos de mis clientes, mis propios proyectos o incluso mis sesiones de formación, pero siempre hay algo que descubrir...

Me encantaría saber si conoces y utilizas estas "opciones ocultas" del Constructor Visual o si ves alguna otra interesante que se me haya olvidado en esta lista: ¡dilo en los comentarios!

Fonctionnalites Divi Visual Builder
Fonctionnalites Visual Builder Divi
Hidden features of Divi Builder

1.760 palabras

7

A ti también te debería gustar:

10 Commentaires

  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 😉

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto