Qu’est-ce que le Visual Builder ?
Avec le thème Divi, il est existe deux Divi Builder, soit deux moyens de modifier le contenu des pages de son site internet :
- Le classique « Back-end Builder »
- Le Front-end « Visual Builder »
Ces deux Divi Builder permettent de réaliser les mêmes modifications, la seule différence étant l’interface.
Le back-end Builder permet de modifier le contenu via des blocs en restant dans le tableau de bord de WordPress. Nous recommandons fortement l’utilisation du Visual Builder plutôt que du Builder en back-end. Les raisons sont qu’il est bien plus simple de trouver ce que l’on souhaite modifier et de voir directement le rendu avant d’enregistrer et de publier les modifications. Nous allons donc nous concentrer sur le Visual Builder dans cet article.
Le Visual Builder est une technologie assez récente permettant à tous de modifier simplement le contenu de l’ensemble des pages de son site internet ! C’est finalement très intuitif et simple à comprendre. Vous pourrez ainsi modifier les textes, les images, ajouter du contenu en quelque clics et voir instantanément le rendu avant de publier les modifications.
Activer le Visual Builder
Lorsque vous êtes connecté à votre site WordPress en tant qu’administrateur, vous avez la possibilité de naviguer sur les pages de votre site internet et de cliquer sur le bouton présent dans le bandeau supérieur indiquant « Activer le Visual Builder ».
Vous pouvez également activer le Visual Builder si vous êtes en train de modifier votre page depuis le back-end en cliquant sur « Éditer avec le constructeur Divi » (vous devez cependant avoir activé l’utilisation du constructeur Divi et non être sur l’éditeur par défaut de WordPress).
Les bases du Visual Builder
Le Visual Builder de Divi utilise 3 blocs principaux : Sections, Rangées et Modules. Leur utilisation permet de créer un nombre infini de mise en page. Les sections correspondent au plus grand blocs qui abritent les groupes de rangées. Les rangées se trouvent donc à l’intérieur des sections et sont utilisées pour abriter les modules. Il s’agit de la structure de l’ensemble des sites utilisant Divi.
Sections
Les sections sont les éléments de base et les plus importants dans la mise en page avec Divi. Celles-ci sont utilisées pour créer de grands groupes de contenu, il s’agit de la première chose que vous ajoutez à votre page. Il existe trois types de sections : Normale, Spécialité et Pleine écran. Les sections normales sont constituées de rangées de colonnes, tandis que les sections pleine écran sont constituées de modules pleine largeur qui s’étendent sur toute la largeur de l’écran. Les sections spécialités permettent une disposition plus avancée des barres latérales.
Les sections du Visual Builder de Divi sont représentée par la couleur Bleu.
Rangées
Les rangées se situent à l’intérieur des sections et vous pouvez placer autant de rangées que vous le souhaitez à l’intérieur d’une section. Vous pouvez choisir parmi de nombreux types de colonnes différents. Une fois que vous avez défini une structure de colonne pour votre rangée, vous pouvez alors 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.
Les rangées du Visual Builder de Divi sont représentée par la couleur Verte.
Modules
Les modules sont les éléments de contenu qui composent votre site internet. Chaque module de Divi peut s’adapter à n’importe quelle largeur de colonne et il est entièrement réactif.
Les rangées du Visual Builder de Divi sont représentée par la couleur Grise.
Construire votre première page
Les trois blocs de construction de base (Sections, Rangées et Modules) sont utilisés pour construire votre page.
Ajouter 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 sous celle-ci. Lorsque vous cliquez dessus, une nouvelle section est ajoutée sous la section sur laquelle vous vous trouvez.
Si vous commencez une toute nouvelle page, votre première section sera ajoutée automatiquement.
Ajouter votre première rangée
Après avoir ajouté votre première section, vous pouvez commencer à ajouter des rangées de colonnes à l’intérieur de celle-ci. Une section peut contenir un nombre illimité de rangées, et vous pouvez mélanger des rangées de différents types de colonnes pour créer une variété de mises en page.
Pour ajouter une rangée, cliquez sur le bouton vert (+) à l’intérieur de toute section vide, ou cliquez sur le bouton vert (+) qui apparaît lorsque vous survolez une rangée actuelle pour ajouter une nouvelle rangée en dessous. Une fois que vous avez cliqué sur le bouton vert (+), une liste de types de colonnes s’affiche. Choisissez la colonne souhaitée et vous êtes prêt à ajouter votre premier module.
Ajouter votre premier module
Les modules peuvent être ajoutés à l’intérieur de rangées, et chaque rangée peut accueillir un nombre quelconque 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. Vous pouvez utiliser des modules de base comme le texte, les images et les boutons, ou des modules plus avancés comme les curseurs, les galeries de portfolio et les boutiques e-commerce.
Pour ajouter un module, cliquez sur le bouton gris (+) à l’intérieur de toute 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 aurez cliqué sur le bouton, vous serez accueilli par une liste de modules. Choisissez le module souhaité, il sera ajouté à votre page et le panneau de configuration du module apparaîtra. Grâce à ce panneau de configuration, vous pouvez commencer à configurer votre module.
Configurer et personnaliser les Section, Rangées et Modules
Chaque section, rangée et module peut être personnalisé de diverses manières. Vous pouvez accéder au panneau de configuration d’un élément en cliquant sur l’icône de roue dentée qui apparait lorsque vous survolez un élément de la page.
Cela lancera le panneau de configuration de l’élément spécifié. Chaque panneau de configuration est divisé en trois onglets : Contenu, Style, et Avancé. Chaque onglet est conçu pour faciliter l’accès et l’ajustement de la grande variété de paramètres de Divi. 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 Style est l’endroit où se trouve tous les paramètres de conception intégrés pour chaque élément. En fonction de ce que vous modifiez, vous pouvez contrôler une grande variété de paramètres de conception d’un simple clic, notamment la typographie, l’espacement (remplissage/marge), les styles de boutons, etc. Enfin, si vous voulez encore plus de contrôle, vous pouvez vous rendre dans l’onglet Avancé, où vous pouvez appliquer des feuilles de style CSS personnalisées, ajuster la visibilité en fonction du périphérique et (selon l’élément que vous modifiez) effectuer des réglages encore plus précis.
Sauvegarder votre page et accéder aux paramètres
Pour accéder aux paramètres généraux de la page, cliquez sur l’icône violette du dock en bas de votre écran. La barre de paramètres s’agrandira et vous proposera diverses options. Vous pouvez ouvrir les paramètres de votre page en cliquant sur l’icône en forme d’engrenage. Vous pouvez y ajuster des éléments tels que la couleur de l’arrière-plan de la page et la couleur du texte. Vous trouverez également les boutons « Enregistrer » et « Publier » ainsi que les boutons d’aperçu de la réactivité.
Vous avez maintenant ajouté vos premières sections, rangées et modules à votre page. Vous avez ajusté leurs paramètres et commencé à construire et à personnaliser votre design. Vous avez acquis les bases, mais il y a encore beaucoup à apprendre. N’hésitez pas à consulter nos autres articles et à vous abonner à notre blog.
Des questions ? Nous sommes disponible pour vous répondre dans l’espace commentaire ci-dessous.