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

Usar todo características del Divi Visual Builder?

Si Empieza con Divi, ce n'est pas évident d'explorer toutes les options et les fonctionnalités qu'offrent le Visual Builder !

Dans cet article, je vous montre quelques astuces qui vont vous permettre d'être plus efficace et plus productif lorsque vous utilisez le Divi Builder Página.

1 - Affichage filaire en 1 clic

Para los nostálgicos, aquellos que amaban construir su diseño de la oficina trasera, Divi Visual Builder permet d'activer "l'affichage filaire".

En un seul clic, on retrouve alors la construction du layout sous forme de "brique".

Cette manière d'afficher la construction de la page est parfois nécessaire pour y voir plus clair dans sa composition.

Cela permet de vérifier, au premier coup d'œil, le placement des sections (en bleu ou violet), des lignes (en vert) et des modules (en gris).

Para afficher le layout en mode "filaire", il vous suffit d'ouvrir les options depuis le bouton violet en bas de la page et de cliquer sur le 2e icône en forme de brique, dans le coin inférieur gauche. Cliquez à nouveau dessus pour revenir à un affichage normal.

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

2 - Verrouillage d'un module 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!

Le Visual Builder permet de verrouiller les modules. Une fois que vous pensez que votre module est achevé et qu'il est parfait, vous pouvez le verrouiller.

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, section ou ligne, est susceptible d'être verrouillé :

1. Allez dans les options supplémentaires de l'élément à verrouiller : cliquez sur l'icône des 3 petits points.
2. Sélectionnez l'option "Verrouillage".
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 - Choisir le type d'interface du Divi Visual Builder

L'interface du Visual Builder peut être utilisée selon 3 modes :

1. Le mode "déplacer le module".
2. Le mode "déverrouiller le module".
3. Le mode "grille".

Puedes mostrar los 3 iconos de acceso directo qui vous permettront de passer d'un mode à l'autre en un clic seulement.

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

Ces 3 modes d'affichages sont également disponibles depuis le menu déroulant nommé "Interface Builder". Ici, vous pouvez choisir le mode d'affichage par défaut.

3.1 - Interface du Visual Builder en mode "déplacer le module"

El mode "déplacer le module" es el modo predeterminado, el que ciertamente sabes.

Il permet d'obtenir un layout qui affiche sa composition seulement lorsque vous passez la souris sur l'écran (affichage au hover).

Avec ce mode, vous devrez survoler le module ou la section à éditer pour faire apparaître ses options. Lorsque votre souris est sortie de la fenêtre, votre layout est "clean", comme celui que l'internaute voit lorsqu'il visite votre site.

3.2 - Interface du Visual Builder en mode "déverrouiller le module"

Incluso si traduction n'est pas très bonne, mode "déverrouiller le module" permet d'obtenir des encadrés de couleur autour des sections/lignes/modules afin de se faire une idée générale de la composition du layout.

Au hover de la souris, les options d'édition apparaîtront.

3.3 - Interface du Visual Builder en mode "grille"

El mode "grille" affiche carrément toutes les sections/lignes/modules avec leur menu d'édition. Cela vous permet de les atteindre facilement et rapidement.

Pour ma part, il n'est pas rare d'avoir à passer d'un mode à l'autre, surtout lorsque certaines sections ou modules se chevauchent et que les options d'édition sont difficiles à atteindre. Le mode filaire est aussi d'un grand secours dans ce type de configuration.

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

4 - Insérer les paramètres de la page depuis le Visual Builder

Si necesitas cambiar el título, añadir una imagen avanzada o peaufiner l'extrait para mejorar su SEO, vous n'avez pas besoin de volver al back-end de su página... Vous le saviez ?

Una opción Divi Visual Builder vous permet d'atteindre ces paramètres de page directement...

• 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.
• Cliquez sur l'icône de la roue crantée.
• Un pop-up aparece y le permite cambiar estos ajustes: título de página, extracto y imagen avanzada.

5 - Étendre les styles de n'importe quel module Divi à toute la page

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

Imagina que acabas de terminar diseño muy complejo et que finalement, votre client (ou vous) décide de changer de couleur principale, de typo ou même de taille de police...

¿Realmente vas a modificar el módulo por módulo y pasar horas más innecesarias en tu proyecto? Ça fait rager, j'ai connu ça aussi...

¡No te preocupes por Divi!

L'option "étendre les styles" est parfaite pour appliquer la modification d'un élément sur l'ensemble d'une ligne, d'une section ou d'une page !!!

Sur cet exemple, on voit que mes boutons sont rouges. Si, au final, je décide de les passer en violet, j'aimerais éviter de réaliser l'action 3 fois (ou autant de fois qu'il y a de boutons)...

Así que tengo que:

1. Ouvrir les paramètres d'un module, ici, c'est le premier bouton.
2. Effectuer mes modifications : cela peut être la taille du bouton, l'ajout d'une bordure, l'ajout d'une ombre, le changement de la couleur d'arrière-plan, etc. Une fois que cette modification est effectuée, il suffit de cliquer sur l'icône des 3 petits points qui apparait au survol à proximité de l'option.
3. Elija "étendre xxxxx". Dans mon cas, c'est "étendre bouton background".
4. Las opciones aparecerán: à "tous les boutons", tout au long de "cette page". Desde los menús desplegables, puede elegir las condiciones para aplicar este nuevo estilo. Acabar con "Étendre".

Cette vidéo est certainement plus explicite...

6 - Revenir à une version antérieure grâce aux "révisions"

El Visual Builder vous donne droit à l'erreur !

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

Pour faire apparaître l'historique de vos modifications, ouvrez le menu contextuel en bas de page (bouton violet) et cliquez sur l'icône de l'horloge.

La liste des modifications apparaît avec l'horaire. Sélectionnez la version que vous souhaitez réintégrer, puis validez.

7 - Obtenir de l'aide et des ressources directement dans le Visual Builder

Besoin d'aide pour mieux utiliser le Visual Builder de Divi ?

Vous n'avez peut-être pas besoin de chercher sur Google une solution... Elle se trouve peut-être juste là, sous vos yeux ?

Avez-vous déjà cliqué sur l'icône du point d'interrogation situé en bas à droite ?

Un popup s'ouvre et vous permet de visionner des video tutos et même d'accéder à la liste des 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.

L'icône de la loupe, juste à côté, permet de chercher rapidement une réponse à une question.

8 - L'A/B Testing est un jeu d'enfant !

¿Alguna vez has usado el fonctionnalité d'A/B Testing se ofrece con Divi Visual Builder?

C'est vraiment facile à mettre en place et c'est utilisable sur n'importe quelle section / ligne ou module du Divi Builder...

Tout d'ab ord, allez dans le menu optionnel (icône des 3 petits points) du module ou de la section à dupliquer en A/B Testing. Choisissez : Test A/B.

Un popup va s'ouvrir et vous pourrez cliquer sur l'élément qui fera l'objet du test A/B. Vous verrez que le curseur devient rond pour cibler l'élément.

À ce moment-là, l'élément va être dupliqué.

Si vous ne le voyez pas, passez en mode d'affichage filaire (comme vu dans cet article) et vous verrez que l'élément a bien été dupliqué.

Vous pourrez alors les éditer pour y faire des variations. Par exemple : "devis gratuit" ou "contactez-nous".

L'A/B Testing vous permettra de vérifier quel est le CTA qui fonctionne le mieux.

L'idée est de tester la version A durant une période donnée, puis la version B durant une autre période. Puis de décider quelle version sera implémentée sur le long terme.

L'A/B Testing est une technique marketing très efficace pour mesurer le taux d'engagement et de clics.

Lorsque l'un de vos éléments est soumis à une période de test A/B, vous le reconnaitrez facilement car il devient bleu. Vous pourrez alors :

1. Establecer la configuración como de costumbre.
2. Obtenir les statistiques à la fin de la période d'essai.
3. Passer d'une version à l'autre en cliquant sur les flèches latérales.
4. Aller dans le menu contextuel pour mettre fin au test ou accéder à d'autres options.

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. Le taux d'engagement

Cela ressemble en tous points aux données et KPI nécessaires à l'étude de l'efficacité d'une campagne marketing.

Todos los recursos oficiales relacionados con l'A/B Testing de Divi sont disponibles ici.

9 - Le mot de la fin...

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

J'ai beau utiliser Divi au quotidien pour les projets de mes clients, les miens ou même mes formations, il y a toujours quelque chose à découvrir...

Me encantaría saber si ya lo sabías y utilizas "options cachées" du Visual Builder ou si vous en voyez d'autres assez sympas que j'aurai pu oublier dans cette liste : dites-le en commentaire !