Accéder à la modification des pages
Si vous voulez effectuer une modification ou créer une quelconque page avec le constructeur de page Divi vous allez devoir vous connecter au back office de votre site internet. Si vous vous êtes bien connecté :


Une fois sur cette page vous pouvez soit cliquer sur « ajouter » afin de créer une nouvelle page soit passer votre souris sur la page que vous souhaitez modifier et cliquer sur le bouton « éditer avec Divi ». Faites bien attention à cliquer sur ce bouton car plusieurs modifications différentes peuvent être appliquées mais uniquement celle de Divi nous intéresse pour le moment.
Les blocs de modifications
Une fois que vous avez cliqué sur l’édition vous devez arriver sur ce genre de page :

Une fois arrivée ici cela devient un peu plus complexe mais rien d’insurmontable, les pages sont composées de gros blocs que vous pouvez tous paramétrer de la même manière. Quand vous cliquez sur un élément de la page vous aurez toujours un bloc qui apparaitra.
Vous pouvez voir que les blocs ont différentes couleurs sur la capture d’écran. Le grand bloc bleu est le body et comme son nom l’indique en anglais c’est le corps de la page, le contenant entier du contenu de la page. A l’intérieur de ce bloc s’y trouve un autre mais de couleur verte. Ce bloc est une section, il définit la structuration interne du body et permet de découper les contenus en plusieurs parties et à gérer l’allure globale de votre page. Pour terminer, le troisième bloc, noir, représente tous les types de contenus que vous pouvez intégrer dans votre page (titres, images, textes, etc).
Nous allons maintenant détailler à quoi servent les différents boutons qui apparaissent lorsque le bloc est sélectionné :
- Le premier bouton permet de déplacer le bloc dans la page en le dirigeant avec sa souris
- Le second permet de rentrer dans les réglages de paramètres plus avancés et parfois propres au type de bloc
- Le troisième vous permet de dupliquer en 1 clic le bloc sélectionné
- Le quatrième vous permet d’enregistrer le bloc que vous avez sélectionné en tant que modèle dans la bibliothèque du site et donc de le recréer en un clic sur une autre page ou à un autre endroit.
- Le cinquième est évident, il permet de supprimer le bloc entier.
- Le sixième ferme le menu
- Le dernier est un raccourci vers certaines modifications et propose d’autres options comme celle de copie de module qui permet de facilement appliquer un style similaire au bloc sélectionné en collant le style du module sur un autre bloc.
Quand vous souhaitez ajouter un bloc il suffit de cliquer sur le petit plus situé au centre en bas de chaque bloc et de choisir la nature du bloc à ajouter.
Les paramètres d’un bloc
Le bouton des paramètres du bloc doit vous ouvrir ce menu :

- Modifier le contenu du texte (vous pouvez intégrer un contenu dynamique via le petit bouton situé à droite dans la zone de texte si vous le souhaitez)
- Attribuer un lien au bloc et gérer son comportement (ouverture dans un nouvel onglet, etc)
- Définir un fond de couleur, dégradé ou autre pour l’arrière-plan
- L’Etiquette Admin ne nous sera pas utile

- Dans le premier volet vous pouvez changer la couleur, la graisse, la taille, etc
- Dans le second volet c’est exactement la même chose pour le sous-titre
- Pour le troisième vous pouvez définir la taille du contenu, son alignement, etc
- Le quatrième permet de définir l’écart avec les autres blocs de la page
- Le cinquième modifie la bordure du bloc
- Le sixième peut créer une ombre autour de votre bloc parmi de styles définis
- Le septième (très peu utile) permet d’appliquer des filtres de couleurs aux blocs.
- Le huitième permet d’appliquer des transformations basiques au contenu (transformation de la taille, du placement du contenu, etc)
- Le dernier permet d’appliquer une animation prédéfinie.
Les principaux modules Divi
Une fois que vous avez cliqué sur le petit + noir afin d’ajouter du contenu dans votre grand bloc vous avez un large choix, je vais donc vous parler des plus courants.
Le module texte Divi
Le premier et le plus utilisé est pour moi celui du texte. Vous pouvez retrouver les modifications assez basiques disponibles dans les outils de bureautiques traditionnels (alignement, gras, sous-lignage, surlignage, etc). Le deuxième onglet de ce menu vous permet d’assigner un lien à votre texte afin de le rendre cliquable. Vous pouvez choisir d’appliquer un fond à la zone de votre texte dans le troisième onglet.

Si jamais vous désirez modifier la taille, la typographie ou encore même la couleur de votre texte veuillez vous rendre dans la seconde partie du menu « Style ». Dans ce même menu vous pouvez aussi régler des paramètres comme l’espacement du bloc, ses dimensions, sa bordure, mettre une ombre, etc.
Le module image Divi
Le second et très répandu est le contenu image. Il vous permet évidemment d’ajouter une image à la page, et ce, de différentes manières.

Le module vidéo Divi
Le troisième, la vidéo, est un copié collé du contenu précédent à la différence près que la vidéo peut être intégrée directement via une URL et non forcément un fichier. Il est possible de déterminer une image fixe de superposition quand la vidéo n’est pas encore lancée.

Le module bouton Divi
Pour finir le contenu bouton, comme vous avez pu le constater les menus d’édition se ressemblent tous. Dans celui-ci il vous suffit de changer le texte du bouton dans la première partie du menu et le style dans le second.

Le menu principal de votre page
Les options ne s’arrêtent pas à la modification des blocs. Si vous cliquez sur les 3 petits points situés en bas en plein milieu de la page vous allez ouvrir le menu principal :

Dans ce menu il y a 6 boutons en dehors de celui qui permet de le refermer une fois ouvert.
Le premier vous permet de choisir une mise en page déjà réalisée, que ce soit par un inconnu parmi les recommandations de Divi, les votres dans l’onglet « vos pages existantes » ou alors de charger un modèle que vous avez récupéré ailleurs dans l’onglet « télécharger le modèle » :





Le dernier bouton vous permet d’exporter ou importer une mise en page via un fichier au format json. Vous pouvez donc utiliser ce fichier via ce bouton et il vous suffira de le glisser dans ce même menu (section import) sur un autre site et tout devra se transférer à l’identique.

Les options supplémentaires de page
Lorsque vous avez ouvert votre menu vous avez remarqué qu’il y a d’autres boutons que ceux en violet qui sont apparus.
Nous allons donc nous intéresser au petit menu de gauche :

- Le premier bouton permet de changer des options générales mais nous allons l’éviter pour ce tutoriel car c’est nous qui nous chargerons de ces paramétrages-là.
- Le second vous permet d’afficher un aperçu dézoomé de votre page en affichant la structure des blocs uniquement afin de visualiser si elle tient la route.
- Le troisième est similaire au précédent et permet d’afficher une vue dézoomée de votre page mais cette fois-ci avec son contenu et permet de se faire un avis sur le look de la page actuel.
- Les trois derniers boutons permettent de changer le mode d’affichage de la page (web, tablette ou mobile) selon le bouton sur lequel on appuie.

- Le premier vous ouvre une barre de recherche, elle vous permet de trouver une réponse à n’importe laquelle de vos questions.
- Le second vous ouvre un petit menu qui vous affiche toutes les différentes couches qui composent votre page :

- Le troisième recense toutes les aides dont vous pouvez avoir besoin vis-à-vis de fonctions basiques dont vous ignorez le fonctionnement, les réponses sont écrites et en vidéo pour certaines
L’enregistrement de votre page
Ce dernier bouton qui compose notre menu situé à gauche est celui qui permet d’enregistrer toutes les modifications que vous avez effectuées. Faites attention à ce que l’animation de chargement qui apparait lorsque vous cliquez dessus soit bien terminée et que le petit ricochet soit bien apparus avant de quitter la page sinon vous pourriez perdre une partie de votre travail.

Vous avez un site construits avec WordPress et Divi que vous souhaitez faire évoluer ? Vous avez besoin d’aide pour maintenir à jour votre site, que ce soit techniquement ou en matière de contenus ? Utilisez le formulaire ci-dessous pour contacter notre pôle WordPress. Nous serons ravis de pouvoir vous accompagner dans votre projet WordPress et Divi.