Comprendre le constructeur Divi

Qu’est-ce que Constructeur Divi  (ou Divi Builder)?

Le constructeur Divi ou  se présente sous deux formes: l’éditeur standard par défaut de WordPress et le “Visual Builder”. Les deux interfaces vous permettent de créer exactement les mêmes types de sites Web avec les mêmes éléments de contenu et paramètres de conception. La seule différence est l’interface. Ce tutoriel se concentrera uniquement sur le Visual Builder.

Les avantages du Visual Builder

Avec le Visual Builder, vous pouvez créer vos pages sur le front-end de votre site Web ce qui permet une conception beaucoup plus rapide et agréable. Lorsque vous ajoutez du contenu ou ajustez les paramètres de conception dans le Visual Builder, vos modifications apparaissent instantanément à l’écran. Vous pouvez cliquer sur la page et commencer à saisir votre texte. Vous pouvez mettre du texte en surbrillance et ajuster sa police et son style. Vous pouvez ajouter du nouveau contenu, créer votre page et regarder tout se passer sous vos yeux.

Comment activer le Visual Builder

Lorsque vous êtes connecté à votre tableau de bord WordPress, si vous survolez le nom de votre site en haut à gauche, vous pouvez ensuite cliquer sur Aller sur le site (voir image 1). Vous pouvez, de là, accéder à n’importe quelle page de votre site Web et cliquer sur le Activer le Visual Builder (voir image 2) dans la barre d’administration WordPress pour lancer le constructeur visuel.

1. Aller sur le site à partir du tableau de bord

2. Activer le Visual Builder

Les bases du Visual Builder

La puissance de Divi réside dans le Visual Builder, un constructeur de pages qui vous permet de créer à peu près n’importe quel type de site Web en combinant et en organisant des éléments de contenu.

Le générateur utilise trois blocs de construction principaux: les sections, les lignes et les modules. Leur utilisation vous permet de créer un nombre incalculable de mises en page. Les sections sont les plus grands blocs de construction et elles abritent des groupes de lignes. Les lignes se trouvent à l’intérieur des sections et sont utilisées pour loger des modules. Les modules sont placés à l’intérieur des lignes. C’est la structure de chaque site Web Divi.

Sections

Les blocs de construction les plus basiques et les plus importants utilisés dans la conception de mises en page avec Divi sont les sections. Celles-ci sont utilisées pour créer de grands groupes de contenu, et elles sont la première chose que vous ajoutez à votre page. Il existe trois types de sections: normal, spécialité et plein écran. Les sections normales sont constituées de rangées de colonnes tandis que les sections plein écran sont constituées de modules pleine largeur qui étendent toute la largeur de l’écran. Les sections spécialité permettent des dispositions de barre latérale plus avancées.

Avant de pouvoir ajouter quoi que ce soit à votre page, vous devez d’abord ajouter une section. Des sections peuvent être ajoutées en cliquant sur le bouton bleu (+). Lorsque vous survolez une section qui existe déjà sur la page, un bouton bleu (+) apparaîtra en dessous. Lorsque vous cliquez dessus, une nouvelle section sera ajoutée sous la section sur laquelle vous êtes actuellement survolé.

Si vous démarrez une toute nouvelle page, votre première section sera ajoutée automatiquement.

3. Insérer une section

 Rangées

Les rangées se trouvent à l’intérieur des sections et vous pouvez placer n’importe quel nombre de lignes dans une section. Vous avez le choix entre plusieurs types de colonnes. Une fois que vous avez défini une structure de colonne pour votre rangée, vous pouvez ensuite placer des modules dans une colonne souhaitée. Il n’y a pas de limite au nombre de modules que vous pouvez placer dans une colonne.

Après avoir ajouté votre première section, vous pouvez commencer à ajouter des rangées à l’intérieur. Une section peut contenir n’importe quel nombre de lignes, et vous pouvez mélanger et faire correspondre des lignes de différents types de colonnes pour créer une variété de mises en page.

Pour ajouter une ligne, cliquez sur le bouton vert (+) à l’intérieur d’une section vide, ou cliquez sur le bouton vert (+) qui apparaît lorsque vous survolez une ligne actuelle pour ajouter une nouvelle ligne en dessous. Une fois que vous avez cliqué sur le bouton vert (+), vous verrez une liste de types de colonnes. Choisissez la colonne souhaitée et vous êtes prêt à ajouter votre premier module.

4. Insérer une rangée

 Modules

Les modules sont les éléments de contenu qui composent votre site Web. Chaque module de Divi peut s’adapter à n’importe quelle largeur de colonne.

Des modules peuvent être ajoutés à l’intérieur des lignes, et chaque ligne peut contenir n’importe quel nombre de modules. Les modules sont les éléments de contenu de votre page et Divi est livré avec plus de 40 modules différents que vous pouvez utiliser pour créer votre site. Vous pouvez utiliser des modules de base tels que du texte, des images et des boutons, ou des modules plus avancés tels que des compteurs, des galeries de photo et des boutiques de commerce électronique.

Pour ajouter un module, cliquez sur le bouton gris (+) qui se situe à l’intérieur d’une colonne vide ou cliquez sur le bouton gris (+) qui apparait lorsque vous survolez un module sur la page pour ajouter un nouveau module en dessous. Une fois que vous avez cliqué sur le bouton, vous verrez une liste de modules disponibles. Choisissez le module souhaité et il sera ajouté à votre page. Le panneau de configuration du module apparaîtra ensuite. À l’aide de ce panneau de paramètres, vous pouvez commencer à configurer votre module.

5. Insérer un module

Sauvegarde de votre page et accès aux paramètres de la page

Pour accéder aux paramètres généraux de la page, cliquez sur l’icône du cercle violet en bas de votre écran. Cela ouvrira le menu et vous fournira diverses options.  Vous trouverez le bouton Sauvegarder ainsi que des outils d’aperçu sur bureau, tablette et téléphone.

6. Sauvegarder votre page

Si vous êtes intéressé à travailler avec moi pour votre site web, vous pouvez remplir ma demande de soumission et je vous contacterai dans les plus brefs délais.