Divi Tips n°91

¡8 funciones de Divi Visual Builder que debes utilizar!

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

1.760 palabras

7

¿Estás utilizando todas las funciones del 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.

Aviso: 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 de 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 de alambre".

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 su composición con mayor claridad.

Esto 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 características ocultas de Divi para Gutenberg!

2 - Bloqueo de un módulo Divi

¿Es usted el tipo de persona que empieza algo, lo termina y no vuelve a retomarlo?

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 "Bloqueo".
  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 se demore. Descubra el tema Divi aquí !

3 - Elija el tipo de interfaz para el Divi Visual Builder

La interfaz de Visual Builder puede utilizarse en 3 modos:

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

Puedes hacer aparecer los 3 iconos de acceso directo que te permitirán pasar 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 que aparezcan 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 (configuración 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 llamado "Interface Builder". Aquí puedes 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 el módulo" es el modo por defecto, con el que probablemente estés familiarizado.

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

Incluso si el la traducción no es muy buenaEn el modo "Desbloquear módulo ", se muestran cuadros de colores alrededor de las secciones/líneas/módulos para dar una idea general de la composición de la maqueta.

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 fácil y rápidamente.

Por mi parte, no es raro tener que cambiar de un modo a otro, sobre todo cuando ciertas 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 haga clic en "PRUEBA GRATUITA

4 - Inserción de parámetros de 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 es necesario que vuelvas al back-end 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 puntos pequeños), 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
Ampliación de 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)...

Así que sólo tengo que :

  1. Abrir los parámetros de un módulo, aquí, es el primer botón.
  2. Hacer mis cambios: puede ser el tamaño del botón, añadir un borde, añadir una sombra, cambiar el color de fondo, etc. Una vez realizado este cambio, basta con hacer clic en 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 "esta página. En los menús desplegables, puede elegir las condiciones para aplicar este nuevo estilo. Terminar con Botón "Ampliar".

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 sección por error, puedes volver atrás.

Para mostrar el historial de cambios, 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 - Obtener 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 que aparece al lado permite buscar rápidamente la respuesta a una pregunta.

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

¿Ha utilizado alguna vez la funcionalidad de pruebas A/B 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 Constructor Divi...

A/B Testing Divi
Activar la prueba A/B

En primer lugar, diríjase al menú opcional (icono de los 3 puntos pequeños) del módulo o sección 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 pruebas 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
Las opciones del 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 confesar que aún no conozco todas las características ocultas de Divi y su Visual Builder.

Puede que utilice Divi a diario para los proyectos de mis clientes, los míos propios o incluso mis cursos 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 pasado en esta lista: ¡dilo en los comentarios!

Fonctionnalites Divi Visual Builder
Fonctionnalites Visual Builder Divi
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi
bouton calendrier avent divi small

Puede que a ti también te guste:

11 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 😉

  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é ????

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

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.

¡24 regalos para descargar!

Todos los días, del 1 al 24 de diciembre, ven a abrir tu caja y sal con tu bono digital para descargar.

Pínchalo en Pinterest

Acciones
Comparte esto