Qu'est-ce que le Visual Builder ?

Le Divi Builder existe sous deux formes : le “Back-end Builder” standard et le “Visual Builder” en front-end. Ces deux interfaces permettent de construire exactement les mêmes types de sites web avec les mêmes éléments de contenu et paramètres de design. La seule différence réside dans l’interface. Le Back-end Builder se trouve dans le tableau de bord WordPress et remplace l’éditeur de publication WordPress standard. Il est utile pour effectuer des modifications rapides depuis le tableau de bord, mais il est limité par son interface sous forme de blocs. Ce tutoriel se concentre uniquement sur le Visual Builder.

Le nouveau Visual Builder permet de créer des pages directement sur le front-end de votre site web. Il offre une expérience intuitive et rapide. Les changements effectués dans le Visual Builder apparaissent immédiatement. Vous pouvez cliquer sur la page pour commencer à écrire, surligner du texte pour en modifier la police ou le style, ajouter du contenu et voir le tout en temps réel.

Activer le Visual Builder

Une fois connecté à votre tableau de bord WordPress, accédez à une page du site sur le front-end et cliquez sur le bouton “Activer le Visual Builder” dans la barre d’administration WordPress pour lancer le Visual Builder.

Si vous modifiez votre page dans le Back-end, vous pouvez passer au Visual Builder en cliquant sur le bouton “Activer le Visual Builder” situé en haut de l’interface du Divi Builder (notez que vous devez d’abord activer le Divi Builder pour que le bouton apparaisse).

Les bases du Visual Builder

Le Visual Builder est un outil de création de pages avec un système de glisser-déposer qui permet de concevoir presque tout type de site web en combinant et organisant des éléments de contenu.

Le builder repose sur trois blocs principaux : Sections, Lignes et Modules. Ces blocs fonctionnent ensemble pour créer une infinité de mises en page. Les sections sont les blocs les plus larges et contiennent des groupes de lignes. Les lignes, elles, contiennent des modules. Les modules représentent les éléments de contenu de la page.

Sections

Les sections sont les blocs de construction de base les plus grands et servent à regrouper de larges ensembles de contenu. Elles sont les premières choses à ajouter sur une page. Il existe trois types de sections : Régulières (composées de lignes), Pleine largeur (modules occupant toute la largeur de l’écran) et Spéciales (pour des mises en page avancées). Pour plus d'informations, consultez notre tutoriel sur les sections.

Lignes

Les lignes se trouvent à l’intérieur des sections et peuvent contenir plusieurs types de colonnes. Une fois la structure de colonnes définie, vous pouvez ajouter des modules dans les colonnes. Il n’y a aucune limite au nombre de modules que vous pouvez insérer. Pour en savoir plus, consultez notre tutoriel sur les lignes.

Modules

Les modules sont les éléments de contenu de votre site. Chaque module peut s’adapter à n’importe quelle largeur de colonne et est entièrement responsive.

Créer votre première page

Les trois blocs de base (Sections, Lignes et Modules) sont utilisés pour construire votre page.

Ajouter votre première section

Avant d’ajouter du contenu, vous devez d’abord ajouter une section. Cliquez sur le bouton bleu (+) pour insérer une nouvelle section. Si vous commencez une page vierge, une section sera automatiquement ajoutée.

Ajouter votre première ligne

Une fois votre section ajoutée, vous pouvez commencer à y insérer des lignes. Cliquez sur le bouton vert (+) pour insérer une ligne avec le type de colonnes souhaité.

Ajouter votre premier module

Les modules, tels que les textes, images ou boutons, sont les éléments de contenu. Cliquez sur le bouton gris (+) pour ajouter un module dans une colonne.

Configurer et personnaliser sections, lignes et modules

Chaque section, ligne et module peut être personnalisé via son panneau de paramètres. Cliquez sur l’icône d’engrenage lorsque vous survolez un élément.

Le panneau de paramètres est divisé en trois onglets : Contenu (ajouter des textes, images, liens), Design (modifier la typographie, les marges, styles de boutons, etc.), et Avancé (ajouter du CSS personnalisé, gérer la visibilité selon les appareils).

Enregistrer 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 en bas de l’écran. Vous y trouverez des options comme la couleur de fond de la page, les couleurs de texte, et les boutons pour enregistrer ou publier vos modifications.

Pour des tutoriels plus approfondis sur l’utilisation de Divi, visitez : https://www.elegantthemes.com/documentation/divi/