10 astuces Divi à connaître du Visual Builder ✔

Astuce Divi 1 : Déplacer la barrre outils

En utilisant le Divi Visual Builder, vous pouvez facilement accéder à la barre de menu située en bas de l’écran. Cette barre s’étend dès que vous cliquez sur le petit disque violet avec trois points blancs. Grâce à ce menu, vous pouvez effectuer diverses tâches telles que les sauvegardes et accéder aux paramètres de la page. De plus, il est extrêmement simple de déplacer ce menu en le faisant glisser et en le déposant à gauche, en haut ou à droite de l’écran.

Astuce Divi 2 : créer un format landing page

Une landing page ou passe d’atterrissage est un format de page web conçu pour canaliser et encourager l’engagement du lecteur. Ce format exclut intentionnellement l’en-tête (le menu) et souvent le pied de page afin d’éviter toute distraction.

Pour créer une landing page, vous pouvez accéder à la section « Pages » dans le menu latéral de WordPress, puis cliquer sur « Modifier » ou « Modification rapide » pour la page souhaitée. Choisissez le format de page « Blank » pour supprimer l’en-tête et le pied de page.

Une autre option consiste à utiliser la fonctionnalité « Theme Builder » (Divi > Theme Builder) pour créer un modèle de page. Sélectionnez « Page spécifique » dans les paramètres du modèle et cochez la page souhaitée. Une fois le modèle créé, vous pouvez choisir d’afficher ou de masquer l’en-tête ou le pied de page en cliquant sur l’icône appropriée (Oeil).
Cette méthode offre davantage de flexibilité, vous permettant de masquer uniquement l’un de ces deux éléments.

Astuce Divi 3 : enregistrer et exporter une page

Il est simple de sauvegarder le contenu d’une page et de l’importer vers un autre site. Pour cela, cliquez sur le petit disque violet avec trois points blancs dans le menu inférieur du Visual Builder. Vous pouvez choisir d’exporter ou d’importer la page. Lorsque vous exportez la page, un fichier .json sera créé sur votre disque dur. Vous pouvez ensuite l’importer dans un autre site, par exemple.

Astuce Divi 4 : Préréglages Divi (Divi Presets)

Dans le Divi Visual Builder, vous avez la possibilité de créer facilement un modèle d’élément prédéfini avec un style spécifique. Par exemple, si vous créez un bouton avec un certain style, vous pouvez aisément l’adopter comme modèle par défaut et même appliquer ce style à tous les autres boutons présents sur votre site. Cette fonctionnalité extrêmement puissante vous permettra de gagner un temps précieux.

Pour créer un modèle prédéfini pour un bouton, il vous suffit d’accéder aux paramètres du module bouton et de sélectionner « Préréglage » en haut à gauche de la fenêtre. À partir de là, vous pouvez créer un nouveau réglage basé sur le style actuel du bouton.

Astuce Divi 5 : étendre un style

Toujours dans l’idée de gagner du temps, la fonction « étendre le style » peut être très utile. Une fois que vous avez apporté le style souhaité à un module en cliquant sur les 3 petits points du menu du module, vous pouvez étendre ce style à la rangée entière, voire même à la page.

Par exemple, si vous avez conçu le « module résumé » avec un style particulier, ce style pourra être appliqué en un seul clic à d’autres modules de la même rangée.
Cette fonctionnalité vous permettra de créer une cohérence visuelle sur l’ensemble de votre site web.

Astuce Divi 6 : Survol image  effet filtre

Un effet intéressant à utiliser est l’effet de survol lors du passage du curseur de la souris ou du toucher en mode tactile sur une image. Cet effet peut être facilement réalisé en utilisant les filtres disponibles dans l’onglet Style.

Par exemple, en sélectionnant l’effet « Saturation » et en cliquant sur l’icône du curseur, deux onglets apparaîtront : l’onglet « bureau » et l’onglet « survol ». En appliquant un filtre à l’un de ces onglets, l’apparence de l’image changera lorsque la souris survolera celle-ci. Enregistrez votre travail puis quittez le Visual Builder pour voir le résultat de votre travail.

Pour obtenir un effet de zoom lors du survol d’une image, vous pouvez utiliser la fonction « Transformer » au lieu de la fonction « Filtre ». Ces deux effets peuvent même être combinés.

Pour appliquer cet effet, allez dans l’onglet « Style » et sélectionnez la fonction « Transformer ». Choisissez le premier onglet « Echelle de transformation » et cliquez sur l’icône du curseur comme précédemment. Deux onglets apparaîtront. Dans l’onglet « survol », augmentez la taille de l’image de 105% (pas plus) et enregistrez.
Quittez le Visual Builder pour voir le résultat de votre travail.

Astuce Divi 8 : Ajuster une image de fond en vue mobile

Quand une image est utilisée comme arrière-plan, elle peut apparaître correctement sur un écran d’ordinateur avec tous les éléments de l’image visibles. Cependant, lorsqu’elle est visionnée sur un appareil mobile, il se peut que certains éléments importants de l’image soient masqués. Heureusement, il existe une solution !

Pour remédier à cela, rendez-vous dans l’onglet « Contenu », puis « Fond », et enfin l’onglet « Image de fond » (où se trouve votre image de fond). Sous l’option « Position de l’image de fond« , vous pouvez choisir par exemple « Centre gauche ». Une glissière apparaîtra juste en dessous pour le « Décalage horizontal de l’image de fond », vous permettant d’ajuster l’image en vue mobile et de vous assurer que la partie importante de l’image reste visible.

Astuce Divi 9 : fonction visibilité

Une autre fonction utile à prendre en compte est la fonction Visibilité. Cette fonction vous permet de désactiver tout élément de Divi (section, rangée, module) en fonction de l’appareil sur lequel la page web est consultée. Par exemple, si vous voulez faire apparaître une section sur un ordinateur mais pas sur une tablette ou un téléphone, il vous suffit de cliquer sur les trois petits points dans le menu de la section, puis de choisir l’option « Désactiver ». Vous pouvez ensuite sélectionner l’appareil sur lequel désactiver la section.

Cette option est également accessible dans la fenêtre des paramètres de l’élément, sous l’onglet « Avancé », puis « Visibilité ».

Astuce Divi 10 : Centrer verticalement des modules Divi dans une rangée

Et enfin, voici une astuce pratique qui vous évitera de devoir manipuler les marges. Il s’agit d’une petite ligne de code CSS qui permettra de centrer verticalement les modules dans les colonnes d’une rangée.

Pour commencer, choisissez les paramètres de la rangée, puis dans l’onglet « Style » et « Dimensionnement », activez l’interrupteur « Harmoniser les hauteurs des colonnes ». Ensuite, rendez-vous dans les paramètres de chaque colonne, dans l’onglet « Avancé » puis « Personnaliser CSS », et entrez la ligne de code suivante dans l’espace « Elément principal »:
align-self: center;

Cette astuce pratique facilitera la mise en page de vos colonnes et vous permettra d’obtenir un alignement vertical parfait.