Bienvenue sur mon guide complet pour débuter avec Divi. Ce guide est destiné à vous apprendre les bases de Divi et plus spécifiquement du « Visual Builder » ou constructeur visuel présent avec le thème Divi.
Table des matières
Les bases du visual builder ou constructeur de page Divi
Divi est un thème qui vous permet de modifier rapidement et simplement tous les aspects et contenus de votre site.
Ainsi en quelques clics vous pouvez modifier la partie « front-end » c’est à dire la partie que le visiteur pourra voir, grâce au visual builder de Divi.
Le constructeur utilise trois blocs de construction principaux : Sections, Colonnes et Modules. Leur utilisation conjointe 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 rangées. Les colonnes se trouvent à l’intérieur des sections et servent à choisir le nombre de modules présent sur une seule ligne. Les modules sont placés à l’intérieur des colonnes. C’est la structure basique de Divi.
Les sections
Les sections sont les éléments de base utilisés dans la conception de pages avec Divi, elles sont la première chose que vous ajoutez à votre page. Celle-ci vous permet de créer des grands groupes de contenu. Il existe trois types de sections : Régulières, Spécialisées et Pleine largeur.
Les sections sont représentées par le cadre bleu pour les sections régulières, orange pour les sections spécialisées et violet pour les sections pleine largeur.
Les colonnes
Les colonnes se trouvent donc à l’intérieur des sections, vous pouvez choisir le nombre d’éléments (ou de modules) que vous souhaitez affichez sur une ligne.
Les colonnes sont représentées par les cadres vert.
Les modules
Les modules sont les éléments de contenu qui composent votre page web (texte, image, appel d’action…). Chaque module de Divi peut s’intégrer dans n’importe quelle largeur de colonne et ils sont tous entièrement personnalisable.
Les modules sont représentés par les cadres gris.
Les actions possibles pour chaque section, colonnes et modules :
Section :
Dans l’ordre de gauche à droite :
- Déplacer la section, cliquer et déplacer
- Les paramètres de la section
- Dupliquer la section
- Enregistrer la section dans la librairie Divi (afin de pouvoir réutiliser cette section sur d’autres pages)
- Supprimer la section
- Quitter
- Options avancées
Colonnes:
Dans l’ordre de gauche à droite :
- Déplacer la colonne, cliquer et déplacer
- Les paramètres de la colonne
- Dupliquer la colonne
- Modifier le nombre de colonne sur une seule ligne
- Enregistrer la section dans la librairie Divi (afin de pouvoir réutiliser cette colonne sur d’autres pages)
- Supprimer la colonne
- Quitter (toujours aussi mystérieux)
- Options avancées
Modules:
Dans l’ordre de gauche à droite :
- Déplacer le module, cliquer et déplacer
- Les paramètres du module
- Dupliquer le module
- Enregistrer le module dans la librairie Divi (afin de pouvoir réutiliser cette colonne sur d’autres pages)
- Supprimer le module
- Quitter
- Options avancées
Vous connaissez maintenant les base du visual builder de Divi, du moins en ce qui concerne la création interne des pages, dans la section ci-dessous je vous explique les réglages et actions générales que vous pouvez effectuer sur la page.
Paramétrage général de votre page Divi
Pour accéder à la barre de paramétrage générale vous pouvez cliquer sur le bouton suivant situé dans le bas de votre page, en mode visual builder activé.
Paramètres d’affichage du visual builder
Dans l’ordre de gauche à droite :
- Paramètres du constructeur de page
- Affichage en mode Wirefrime (utile quand certains éléments se chevauchent et sont inaccessible via l’affichage classique)
- Zoom
- Affichage en mode Ordinateur
- Affichage en mode Tablette
- Affichage en mode Smartphone
Paramètres de la page
Dans l’ordre de gauche à droite :
- Ajouter une autre page au contenu de celle-ci
- Sauvegarder la mise en page dans votre blibliothèque divi
- Supprimer la page
- Fermer la barre d’option inférieur
- Paramètres de la page
- Restaurer une version antérieure de la page
- Exporter ou importer la mise en page sur votre ordinateur
Option de sauvegarde
Dans l’ordre de gauche à droite :
- Effectuer une action via le mode recherche
- Ouvre une petite fenêtre ou vous trouver votre wireframe en version fenêtré
- Regroupe les guides disponnibles dans Divi
- Sauvegarder le brouillon
- Publier la page
Comment accéder au visual builde de Divi ?
1. Connectez-vous à votre espace administrateur
Pour cela rendez-vous sur votre url d’administration et introduisez votre login et votre mot de passe.
Dans votre tableau de bord WordPress cliquez sur la petite maison en haut à gauche puis sur « aller sur le site »
2. Choisissez la page à modifier
Maintenant que vous êtes sur votre site en mode administrateur naviguez jusqu’a la page contenant le texte à modifier.
Ceci fait appuyez sur bouton « activez le visual builder » pour ouvrir le mode édition de cette page
Sélectionner et remplacer le texte
Sélectionnez le texte en maintenant le clic gauche enfoncé, et remplacez-le par votre nouveau texte.
Ouvrir la barre de navigation du bas
Pour cela Appuyez sur les icones avec 3 petits points sur le bas de votre écran.
Enregistrez
Cliquez simplement sur le bouton vert sauvegarder pour enregistrer les modifications sur votre site.
Et voilà votre texte a bien été modifié vous pouvez quitter le visual builder.
Sélectionner et remplacer une image
Sélectionnez la page où se trouve l’image et activé le visual builder
Ouvrir le paramétrage de l’image
Vous devez ouvrir la fenêtre de paramétrage grâce à l’icône en forme de rouage sur fond gris se trouvant sur l’image en question.
Ouvrir la bibliothèque multimédia
Appuyer sur le bouton en forme de roue crantée
Choisissez l’image à insérer
- Si votre image ne se trouve pas dans votre bibliothèque multimédia téléversez la en appuyant sur l’onglet « téléverser des fichiers » comme indiquer en 1.
- Si vous possédez déjà l’image dans votre bibliothèque multimédia, sélectionnez-la et appuyez sur « charger une image » en bas à droite de l’écran comme le montre la flèche
Ouvrir la barre de navigation du bas
Pour cela Appuyez sur l’icône avec 3 petits points sur le bas de votre écran.
Enregistrer
Cliquez simplement sur le bouton vert sauvegarder pour enregistrer les modifications sur votre site.
Et voila votre image a bien été modifié vous pouvez maintenant quitter le visual builder.