Présentation de Divi

Qu’est-ce que Visual Builder?

Le Divi Builder se présente sous deux formes: le «Back-end Builder» standard et le front-end «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. Le générateur de back-end vit à l’intérieur du tableau de bord WordPress et il est accessible avec tous les autres paramètres WordPress standard. Il se trouve à l’intérieur de l’interface utilisateur WordPress et remplace l’éditeur de publication WordPress standard. Il est idéal pour effectuer des modifications rapides lorsque vous êtes à l’intérieur du tableau de bord, mais il est également limité par le tableau de bord et est rendu sous forme de représentation par blocs de votre site Web. Ce didacticiel se concentrera uniquement sur le générateur visuel.

image de documents

Le tout nouveau Visual Builder, d’autre part, vous permet de construire vos pages sur le front-end de votre site web! C’est une expérience incroyable et permet une conception beaucoup plus rapide. Lorsque vous ajoutez du contenu ou ajustez les paramètres de conception dans le générateur visuel, vos modifications apparaissent instantanément. Vous pouvez cliquer sur la page et commencer à taper. Vous pouvez mettre en surbrillance du texte et ajuster sa police et son style. Vous pouvez ajouter du nouveau contenu, créer votre page et regarder tout se dérouler sous vos yeux.

using-visual-builder-2-2

Activation de Visual Builder

Pendant que vous êtes connecté à votre tableau de bord WordPress, vous pouvez naviguer vers n’importe quelle page sur le front-end de votre site Web et cliquer sur le bouton «Activer Visual Builder» dans la barre d’administration WordPress pour lancer le constructeur visuel.

Si vous modifiez votre page sur le back-end, vous pouvez basculer vers le générateur visuel en cliquant sur le bouton “Activer Visual Builder” qui se trouve en haut de l’interface principale du Divi Builder (notez que vous devez d’abord activer le Divi Builder avant que le bouton du constructeur visuel apparaisse).

image de documents

Les bases de Visual Builder

La puissance de Divi réside dans le Visual Builder, un constructeur de pages par glisser-déposer 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 à l’unisson vous permet de créer une multitude de mises en page. Les sections sont les plus grands blocs de construction et abritent des groupes de rangées. Les rangées se trouvent à l’intérieur des sections et sont utilisées pour abriter des modules. Les modules sont placés à l’intérieur des rangées. C’est la structure de chaque site Web Divi.

Sections

Les blocs de construction les plus élémentaires et les plus importants utilisés dans la conception de dispositions avec Divi sont les sections. Ceux-ci sont utilisés pour créer de grands groupes de contenu, et ils sont la première chose que vous ajoutez à votre page. Il existe trois types de sections: régulière, spécialisée et pleine largeur. Les sections régulières sont constituées de rangées de colonnes tandis que les sections pleine largeur sont constituées de modules pleine largeur qui étendent toute la largeur de l’écran. Les sections spécialisées permettent des dispositions de barre latérale plus avancées. Pour plus d’informations sur l’utilisation des sections, rendez-vous sur notre didacticiel détaillé sur les sections.

Lignes

Les lignes se trouvent à l’intérieur des sections et vous pouvez placer n’importe quel nombre de lignes à l’intérieur d’une section. Il existe de nombreux types de colonnes différents. Une fois que vous avez défini une structure de colonnes pour votre ligne, vous pouvez ensuite placer des modules dans la colonne souhaitée. Il n’y a pas de limite au nombre de modules que vous pouvez placer dans une colonne. Pour plus d’informations sur l’utilisation des lignes, consultez notre didacticiel détaillé sur les lignes.

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 et ils sont tous entièrement réactifs.

Construire votre première page

Les trois blocs de construction de base (sections, lignes et modules) sont utilisés pour créer votre page.

image de documents

Ajout de votre première section

Avant de pouvoir ajouter quoi que ce soit à votre page, vous devez d’abord ajouter une section. Les 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ît en dessous. Lorsque vous cliquez dessus, une nouvelle section est ajoutée sous la section sur laquelle vous passez la souris.

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

image de documents

Ajout de votre première ligne

Après avoir ajouté votre première section, vous pouvez commencer à ajouter des lignes de colonnes à l’intérieur. Une section peut contenir un nombre illimité de lignes, et vous pouvez mélanger et assortir des lignes de différents types de colonnes pour créer une variété de dispositions.

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 en cours pour ajouter une nouvelle ligne en dessous. Une fois que vous avez cliqué sur le bouton vert (+), vous serez accueilli avec une liste de types de colonnes. Choisissez la colonne de votre choix, puis vous êtes prêt à ajouter votre premier module.

image de documents

Ajout de votre premier module

Des modules peuvent être ajoutés à l’intérieur des rangées, et chaque rangée 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 éléments différents que vous pouvez utiliser pour construire avec. 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 curseurs, des galeries de portfolio et des boutiques de commerce électronique. Nous avons des tutoriels individuels pour chaque module Divi, donc si vous voulez en savoir plus sur les types de modules fournis par Divi, assurez-vous de revenir à la page principale du document et de parcourir la section «Modules».

Pour ajouter un module, cliquez sur le bouton gris (+) qui existe à l’intérieur d’une colonne vide ou cliquez sur le bouton gris (+) qui existe 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 serez accueilli par une liste de modules. Choisissez le module souhaité et il sera ajouté à votre page et le panneau des paramètres du module apparaîtra. À l’aide de ce panneau de paramètres, vous pouvez commencer à configurer votre module.

image de documents

Configuration et personnalisation des sections, des lignes et du module

Chaque section, rangée et module peut être personnalisé de différentes manières. Vous pouvez accéder au panneau des paramètres d’un élément en cliquant sur l’icône d’engrenage qui existe lorsque vous survolez un élément de la page.

using-visual-builder-8-2

Cela lancera le panneau des paramètres de l’élément spécifié. Chaque panneau de paramètres est divisé en trois onglets: Contenu, Conception et Avancé. Chaque onglet est conçu pour rendre l’accès et le réglage de la grande variété de paramètres de Divi rapides et faciles. L’onglet Contenu est bien sûr l’endroit où vous pouvez ajouter du contenu tel que des images, des vidéos, des liens et des étiquettes d’administration. L’onglet Conception est l’endroit où nous avons placé tous les paramètres de conception intégrés pour chaque élément. Selon ce que vous modifiez, vous pouvez contrôler une grande variété de paramètres de conception en un clic; y compris: typographie, espacement (remplissage / marge), styles de bouton, etc. Pour un examen approfondi de l’onglet Conception, consultez notre didacticiel sur les paramètres de conception. Enfin, si vous voulez encore plus de contrôle, vous pouvez vous rendre dans l’onglet Avancé où vous pouvez appliquer un CSS personnalisé, ajuster la visibilité en fonction de l’appareil et (en fonction de l’élément que vous modifiez) effectuer un réglage encore plus fin.

Enregistrement de votre page et accès aux paramètres de page

Pour accéder aux paramètres généraux de la page, cliquez sur l’icône du dock violet au bas de votre écran. Cela élargira la barre des paramètres et vous offrira diverses options. Vous pouvez ouvrir les paramètres de votre page en cliquant sur l’icône d’engrenage. Ici, vous pouvez ajuster des éléments comme la couleur d’arrière-plan de la page et la couleur du texte. Vous trouverez également les boutons Enregistrer et Publier ainsi que les bascules d’aperçu réactives.

image de documents

Démarrez votre conception avec des mises en page prédéfinies

Une excellente façon de démarrer votre nouvelle page consiste à démarrer les choses avec une mise en page prédéfinie. Divi est livré avec plus de 20 mises en page prédéfinies qui couvrent une variété de types de pages courants, tels que «À propos de nous», «Contact», «Blog», «Portfolio», etc. Vous pouvez les charger puis échanger la démo contenu pour votre propre. Votre nouvelle page sera terminée avant que vous le sachiez! Pour en savoir plus sur l’utilisation des mises en page prédéfinies, assurez-vous de consulter notre didacticiel détaillé sur les mises en page prédéfinies .

image de documents

Enregistrement de vos propres dispositions dans la bibliothèque

En plus d’utiliser les dispositions prédéfinies fournies avec Divi, vous pouvez également enregistrer vos propres créations dans la bibliothèque Divi. Lorsqu’un dessin est enregistré en tant que mise en page Divi dans la bibliothèque Divi, il peut être chargé sur de nouvelles pages. Plus vous construisez votre bibliothèque avec vos designs préférés, plus vite vous pourrez créer de nouveaux sites Web. Pour un examen approfondi de la bibliothèque Divi, assurez-vous de consulter notre didacticiel dédié à la bibliothèque Divi

Pour enregistrer un élément dans la bibliothèque, cliquez sur l’icône de bibliothèque qui existe lorsque vous survolez un élément et dans la barre des paramètres de page. Une fois qu’un élément a été ajouté à la bibliothèque, il apparaîtra dans l’onglet «Ajouter à partir de la bibliothèque» lors de l’ajout de nouvelles dispositions, sections, rangées et modules Divi.

image de documents

Ok, vous avez les bases. Il est maintenant temps de creuser plus profondément!

Vous avez donc désormais ajouté vos premières sections, lignes et modules à votre page. Vous avez ajusté leurs paramètres et commencé à créer et à personnaliser votre conception. Vous avez les bases, mais il y a tellement plus à apprendre. Nous avons des dizaines et des dizaines de tutoriels qui couvrent tous les aspects de Divi. Je vous encourage à retourner à la page principale de la documentation et à les lire tous. Au moment où vous avez terminé, vous serez un maître Divi!