Découvrez les bons plans & les réductions Alpa14

10 astuces Divi à connaître du Visual Builder ✔

Alpa14 les tutoriels faciles !

Catégories

Découvrez 10 Astuces Divi pour exploiter au mieux le Visual Builder

Dans ce tutoriel Divi Alpa14, je vous présente 10 conseils pratiques visant à optimiser votre expérience avec le Visual Builder de Divi, afin d’exploiter pleinement le potentiel de ce constructeur de page. Que vous soyez débutant dans la conception web avec Divi ou que vous cherchiez simplement à améliorer votre site internet, ces astuces pourraient s’avérer utiles.
Il convient de noter que le thème Divi d’Elegant Themes est non seulement le thème WordPress le plus réputé au monde, mais il s’agit également d’un constructeur de pages web révolutionnaire qui simplifie la création visuelle de pages WordPress grâce au thème Divi et son Visual Builder.

Licence Divi

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 1

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 2
Astuce Divi 2b

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.

Divi Supreme Pro
Astuce Divi 3

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 4

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 5

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.

Supreme AI Writer
Astuce Divi 6

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.

Licence Divi
Astuce Divi 7

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 8

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

Hostinger -10%
Astuce Divi 9
Astuce Divi 9b

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.

Formation WordPress
Astuce Divi 10
Astuce Divi 10b

Vous serez peut-être intéressé par les articles suivants :

Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Dans ce tutoriel Divi WordPress, je vous montre où trouver une image de qualité gratuite pour un usage commercial, je vous montre également comment la choisir et l’optimiser au bon format. Je vous apprends ensuite comment designer ce bandeau large « Hero Image » grâce au Divi Visual Builder du thème Divi de la société Elegant Themes.

lire plus
Tutoriel Divi : Inverser les colonnes selon la vue

Tutoriel Divi : Inverser les colonnes selon la vue

En vue ordinateur un site web peut avoir un design avantageux mais peut être moins en vue mobile du fait des colonnes d’une rangée qui passent les unes sous les autres.
On peut alors se trouver avec une suite d’éléments non souhaitée avec par exemple 2 textes ou 2 images à la suite.

lire plus
Un menu hamburger 🍔 en vue ordinateur : site WordPress Divi

Un menu hamburger 🍔 en vue ordinateur : site WordPress Divi

Sur Internet, le terme de “hamburger menu” désigne un menu de navigation utilisé sur les sites mobiles par souci  de gain de place et d’ergonomie, la largeur de l’écran étant restreinte pour conserver un menu classique. Sur ces périphériques mobiles, on masque alors le menu derrière un bouton à 3 petits traits ressemblant à un hamburger.

lire plus