Introduction: qu’est-ce que le Divi Builder?

Bienvenue dans le Guide d’Utilisation du Divi Builder ! Ce guide vous fournira des instructions simples et détaillées sur la manière d’utiliser le Divi Builder pour mettre à jour et personnaliser votre site Web. Suivez attentivement les étapes ci-dessous pour profiter pleinement des fonctionnalités offertes par cet outil puissant.

Divi est un outil de création de sites Web moderne et visuel par glisser-déposer pour WordPress, sans code(ou presque ). Avec Divi, vous pouvez créer de superbes sites Web à partir de zéro sans toucher à une seule ligne de code (à moins que vous ne le souhaitiez !).

Divi exploite la puissance du développement Web complexe et vous permet de concevoir des sites Web personnalisés en utilisant Divi Visual Builder afin que vous puissiez voir les modifications que vous apportez en temps réel.

En faisant appel au services de LDDigtialwork vous pourrez obtenir un accès illimité à Divi pour votre futur site web!

1. Accéder au Divi Builder

• Connectez-vous à votre site Web WordPress en utilisant vos identifiants.

• Une fois connecté, accédez à la page que vous souhaitez modifier en naviguant dans le menu de navigation ou en utilisant la barre de recherche.

• Sur la page que vous souhaitez modifier, cliquez sur le bouton « Activer le Divi Builder » situé en haut de l’écran pour activer le Divi Builder.

2. Créer une nouvelle page et activer le générateur visuel

.

Pour repartir à zéro sur une page vierge, accédez à votre tableau de bord WordPress et cliquez sur Page > Ajouter un nouveau.

Donnez un titre à votre page, puis cliquez sur « Utiliser Divi Builder ». Cela rechargera la page sur le front-end du site Web avec Divi Visual Builder activé.

Au fur et à mesure que votre page se recharge, vous remarquerez que trois options apparaissent : Créer à partir de zéro, Choisir une mise en page prédéfinie et Cloner une page existante.

Construire à partir de zéro

Cette option charge le Divi Builder avec une conception de page vierge. Choisissez cette option si vous souhaitez démarrer la conception de votre page à partir de zéro.

Choisissez une mise en page prédéfinie

Si vous souhaitez démarrer votre conception avec l’une de vos mises en page enregistrées ou un pack de mises en page prédéfini de Divi, choisissez cette option. Elle chargera la bibliothèque Divi dans laquelle vous pourrez parcourir les packs de mises en page prédéfinis, vos conceptions précédemment enregistrées et les pages existantes de votre site Web.

Cloner une page existante

Vous pouvez également commencer votre conception en clonant une page existante sur votre site Web. Sélectionnez cette option si vous souhaitez charger une conception de page à partir d’une page existante sur votre site Web comme point de départ.

Sélectionnez, construisez à partir de zéro.

Par défaut, une section standard est automatiquement ajoutée à la page.

3. Structure de la Mise en Page

Avant de commencer à ajouter du contenu à votre page, il est important de comprendre la structure de la mise en page dans le Divi Builder. La structure de la page est visible au survol de la souris et divisée comm suit:

Sections:

Les sections sont les grands blocs de contenu sur votre page. Chaque section peut contenir plusieurs rangées, et chaque rangée peut contenir plusieurs colonnes. Les sections sont identifiables par une couleur de fond bleue.

Rangées:

Les rangées sont des sections plus petites à l’intérieur d’une section principale. Elles sont utilisées pour organiser le contenu de manière horizontale. Chaque rangée peut être subdivisée en plusieurs colonnes. Les rangées sont identifiables par une couleur de fond verte.

Colonnes:

Les colonnes sont les éléments de base d’une rangée. Elles permettent de structurer le contenu de manière verticale. Chaque colonne peut contenir un ou plusieurs modules. Les colonnes sont invisibles dans l’interface du Divi Builder, mais vous pouvez les ajuster en fonction de vos besoins lors de la création de la mise en page.

Modules:

Les modules sont les éléments individuels de contenu tels que du texte, des images, des vidéos, des formulaires, etc. Ils sont placés à l’intérieur des colonnes et sont utilisés pour créer le contenu de votre page. Les modules sont représentés par des boîtes grises dans l’interface du Divi Builder.

Maintenant que vous comprenez la structure de la mise en page, voyons comment ajouter et modifier du contenu sur votre page.

Hiérarchie des éléments parents/enfants dans les éléments de Divi Builder

Lors du réglage des paramètres et de l’application de styles dans Divi, il est important de se souvenir de la hiérarchie des sections, lignes, colonnes et modules de Divi. Les sections contiennent des lignes, les lignes contiennent des colonnes et les colonnes contiennent des modules. Ceux-ci sont appelés éléments parents et enfants. Les éléments enfants sont imbriqués dans les éléments parents et sont affectés par tout style de conception que vous appliquez à l’élément parent.

La fenêtre contextuelle des paramètres des éléments

Chaque fois que vous ouvrez les paramètres d’un élément, une fenêtre apparaît avec tout le contenu, la conception et les paramètres avancés disponibles pour cet élément. Examinons de plus près ce qui est disponible.

4. Personnaliser la Mise en Page

Module Texte:

• Cliquez sur la Roue Crantée du Module :

Pour modifier un module texte déjà existant sur votre page, cliquez sur la roue crantée qui apparaît au survol de la souris sur le module. Cela fera apparaître un ensemble d’options de modification spécifiques à ce module.

• Contenu :

Dans les options de contenu, vous pouvez modifier le texte contenu dans le module. Vous pouvez également formater le texte en utilisant les options de mise en forme disponibles dans la barre d’outils, telles que le gras, l’italique, le souligné, la couleur du texte, etc.

• Style :

Les options de style vous permettent de personnaliser l’apparence du texte. Vous pouvez ajuster la taille de la police, la famille de police, l’espacement entre les lignes, l’alignement du texte, la couleur du texte, etc.

Module Image:

• Cliquez sur la Roue Crantée du Module :

Pour modifier un module image déjà existant sur votre page, cliquez sur la roue crantée qui apparaît au survol de la souris sur le module. Cela fera apparaître un ensemble d’options de modification spécifiques à ce module.

• Contenu :

Dans les options de contenu, vous pouvez modifier l’image contenu dans le module. Vous pouvez télécharger une nouvelle image à partir de votre ordinateur ou sélectionner une image existante dans votre bibliothèque multimédia.

• Style :

Les options de style vous permettent de personnaliser l’apparence de l’image. Vous pouvez ajuster la taille de l’image en pixels (px) ou en pourcentage (%), spécifier une taille maximale (dimensionnement), définir l’alignement de l’image, ajouter des marges (espacement), des bordures et des ombres, etc.

5. Modifier la mise en page existante

• Cliquez sur la Ligne ou la Colonne :

Pour modifier une ligne ou une colonne existante sur votre page, cliquez sur la roue crantée visible au survol de la souris. Cela fera apparaître les options de modification pour cette section spécifique de votre mise en page.

• Ajoutez, Supprimez ou Modifiez des Modules :

Une fois que vous avez sélectionné la ligne ou la colonne à modifier, vous pouvez ajouter de nouveaux modules en cliquant sur le bouton « + » qui apparaît à l’intérieur de la section. De même, vous pouvez supprimer ou modifier les modules existants en cliquant sur les icônes correspondantes à côté de chaque module.

• Ajustez les Paramètres de Mise en Page :

Outre la gestion des modules individuels, vous pouvez également ajuster les paramètres de mise en page globaux. Cela comprend des éléments tels que la largeur de la colonne, l’espacement entre les colonnes, l’alignement des sections, etc. Ces options sont accessibles en cliquant sur l’icône d’engrenage qui apparaît lorsque vous survolez la section de mise en page.

6. Ajouter du contenu

Ajouter du Texte

• Cliquez sur le bouton « + » situé dans la zone où vous souhaitez ajouter du texte sur votre page. Ce bouton est généralement visible à l’endroit où vous souhaitez ajouter un nouveau contenu.

• Une fenêtre contextuelle s’ouvrira avec une liste des modules disponibles. Parmi ces modules, recherchez et sélectionnez le module « Texte ».

• Une fois que vous avez sélectionné le module « Texte », un nouvel élément de texte apparaîtra sur votre page. Cliquez à nouveau sur la roue crantée de cet élément de texte pour commencer à écrire votre contenu. La zone de texte ressemble à un éditeur de texte standard, vous pouvez donc y saisir votre texte directement.

• Utilisez les options de mise en forme disponibles dans la barre d’outils de l’éditeur de texte pour formater votre texte selon vos besoins. Ces options incluent la mise en gras, l’italique, le soulignement, le changement de couleur et la modification de la taille de la police(en pixels par ex.), entre autres.

• Pour modifier la taille du texte, sélectionnez le texte que vous souhaitez modifier en le mettant en surbrillance, puis utilisez les options de mise en forme de la barre d’outils pour ajuster la taille de la police, la famille de police et d’autres paramètres de texte selon vos préférences.

Ajouter une image

• Cliquez sur le bouton « + » situé dans la zone où vous souhaitez ajouter une image sur votre page.

• Dans la fenêtre contextuelle qui apparaît, recherchez et sélectionnez le module « Image » parmi la liste des modules disponibles.

• Une fois que vous avez sélectionné le module « Image », une fenêtre contextuelle supplémentaire apparaîtra vous permettant de choisir ou de télécharger l’image que vous souhaitez ajouter à votre page. Cliquez sur le bouton « Télécharger une image » pour télécharger une nouvelle image à partir de votre ordinateur, ou sélectionnez une image existante dans votre bibliothèque multimédia.

• Après avoir sélectionné l’image souhaitée, cliquez sur le bouton « Insérer dans le message » pour l’ajouter à votre page.

• Une fois l’image ajoutée à votre page, vous pouvez la redimensionner en cliquant dessus pour faire apparaître les options de modification. Utilisez les poignées de redimensionnement situées autour de l’image pour ajuster sa taille en faisant glisser les bords ou les coins de l’image. Vous pouvez également saisir des valeurs spécifiques dans les paramètres de l’image pour ajuster sa taille en pixels.

7. Options de Vue Mobile et Tablette

Au bas de la page, tout à gauche, vous trouverez des boutons d’options de vue pour mobile et tablette. Ces boutons vous permettent de prévisualiser et de modifier votre mise en page pour différents appareils, afin de vous assurer que votre site soit optimisé pour une expérience utilisateur cohérente sur tous les types d’appareils.

Cliquer sur l’icône « mobile » ou « tablette » dans la fenêtre contextuelle pour afficher les options en mode « responsive ».

8. Barre d’outils centrale

Regardons maintenant les icônes dans la partie centrale de la barre d’outils Divi.

9. Icône des calques(ou couches)

Cliquez sur cette icône pour afficher les calques de conception sur votre page. Vous pouvez ouvrir et fermer tous les calques et utiliser la fonction de filtre pour trouver rapidement l’élément de conception que vous recherchez.

Faites glisser et déposez les calques pour réorganiser la conception de la page, ou utilisez les icônes sur les calques pour accéder aux paramètres, dupliquer cet élément ou le supprimer.

10. Publier les Modifications

Une fois que vous avez terminé de modifier votre page, cliquez sur le bouton de couleur violette au fond de la page et ensuite cliquez sur le bouton « Sauvegarder » (de couleur verte à droite) pour enregistrer vos modifications. 

10. Pour aller plus loin

Pour un tutoriel complet et très détaillé sur le Divi Builder, vous pouvez visiter la page de Elegant Themes(développeur du plugin) ici:

Premier pas avec Divi Builder

Articles similaires