De Divi 4 à Divi 5

Votre site reste votre site

Vous utilisez Divi depuis plusieurs années pour modifier vos pages, ajouter des articles ou mettre à jour vos textes et images. La bonne nouvelle : tout ça, vous allez continuer à le faire exactement pareil.

Divi 5 est une mise à jour en profondeur du système, mais pour vous au quotidien, c’est surtout une nouvelle interface à apprivoiser. Les boutons ont bougé, les couleurs ont changé, mais la logique reste la même. Un peu comme quand votre supermarché réorganise ses rayons : agaçant au début, mais on finit toujours par retrouver le beurre.

Ce tutoriel est là pour vous montrer où retrouver vos repères.

 

Une fois dans l’éditeur, le tableau de bord WordPress disparaît

Cela peut surprendre au début. En Divi 4, la barre d’administration WordPress restait visible en haut de l’écran quand vous travailliez dans l’éditeur. Pratique pour aller rapidement consulter vos médias ou vos articles.

En Divi 5, cette barre disparaît complètement dès que vous entrez dans l’éditeur. Pour accéder à votre tableau de bord WordPress, vous devez d’abord quitter l’éditeur via le bouton “Quitter” en haut à gauche puis naviguer normalement.

Un changement de méthode à intégrer, mais rien d’insurmontable.

 

Le plus grand changement : la barre d’outils

C’est le changement le plus visible. En Divi 4, les outils étaient éparpillés un peu partout : en bas de l’écran, dans des menus cachés, dans des icônes discrètes. En Divi 5, tout est regroupé dans une barre verticale sur le côté gauche de l’écran. Bienvenue dans l’ère du rangement.

La roue crantée : Réglages de la page Accès aux paramètres globaux de la page en cours (titre, modèle de page, navigation par points, etc.).

Le + bleu : Ajouter un layout Lance le sélecteur de mise en page pour démarrer depuis un layout existant, un canevas sauvegardé ou une page blanche. 

Les couches : Panneau des calques (Layers) Affiche l’arborescence complète de ta page : toutes les sections, lignes et modules sont listés ici. Très utile pour naviguer dans une page complexe et sélectionner un élément précis sans avoir à le chercher sur la page.

La palette : Variables de design Accès aux variables globales : couleurs, typographies, tailles. C’est ici que sont définies les couleurs de ta charte, utilisables partout sur le site en un clic.

La base de données : Bibliothèque Divi Accès à ta bibliothèque de blocs, sections et layouts sauvegardés. C’est là que vous retrouvez vos canevas et encadrés sauvegardés.

Les lignes : Mode fil de fer (Wireframe) Bascule en vue fil de fer pour voir la structure de votre page sans le rendu visuel. Pratique pour avoir une vue d’ensemble claire.

Les deux icônes de curseur : Modes d’interaction Gèrent l’affichage des icônes d’action au survol des éléments. La première affiche les icônes sur l’élément survolé, la deuxième les affiche sur l’élément parent.

L’oeil avec cadre : Mode X-Ray Ajoute un contour visible autour de toutes les sections, lignes et modules. Le rendu visuel reste affiché, mais la structure devient visible en superposition.

Les outils : Réglages du builder Paramètres de l’éditeur lui-même (comportement, préférences d’affichage).

Le point d’interrogation : Aide : Ouvre l’assistant d’aide Divi.

 

Ouvrir l’éditeur : le bouton a changé de tête

Quand vous visitez une page de votre site en étant connecté à WordPress, vous avez l’habitude de voir un bouton violet en haut qui dit “Activer le Visual Builder”.

Ce bouton existe toujours, mais il s’appelle maintenant “Edit with Divi” et il est bleu.

C’est le même bouton. Il fait la même chose. Cliquez dessus pour entrer dans l’éditeur, comme avant.

Note : si le bleu ne vous convient pas, sachez que la couleur de l’interface est personnalisable dans les réglages du builder, vous pouvez remettre du violet si vous y tenez !

 

Dans l’éditeur : une nouvelle barre sur la gauche

C’est un des changements le plus visible. Toutes les fonctionnalités d’édition sont regroupées dans une seule barre d’outil.

En Divi 4, quand vous vouliez ajouter un nouvel élément à votre page, vous cherchiez un petit cercle gris avec un “+” qui apparaissait entre les blocs.

En Divi 5, lorsque vous ouvrez l’éditeur, vous êtes directement en mode “visual builder”. Une barre d’outils apparaît sur le côté gauche de votre écran.

Soit vous ajouter votre module en cliquant sur le “+” qui est devenu noir

Soit vous cliquez sur “wireframe view” si vous préférez travailler en “structure”, pour en suite ajouter votre module.

 Note : tout est regroupé au même endroit — c’est plus pratique une fois qu’on s’y habitue.

Les réglages s’ouvrent à gauche (et non plus au centre)

En Divi 4, quand vous cliquiez sur l’icône de réglages d’un texte, d’une image ou d’un bouton, une grande fenêtre s’ouvrait au milieu de l’écran.

En Divi 5, ce panneau de réglages s’ouvre maintenant sur le côté gauche de l’écran. Votre page reste visible à gauche pendant que vous faites vos modifications.

Note : c’est en réalité plus pratique — vous pouvez voir vos changements en direct sur la page pendant que vous modifiez les réglages.

Nouveau raccourci bonus : vous pouvez aussi double-cliquer directement sur un élément pour ouvrir ses réglages, en plus du clic sur l’icône ⚙️.

 

Sauvegarder et valider : ça a changé !

C’est le point qui surprend le plus. Tenez-vous bien.

En Divi 4, les panneaux de réglages avaient un bouton vert pour valider vos modifications et un bouton rouge pour annuler.

En Divi 5, ces boutons ont disparu. Les modifications que vous faites dans un panneau de réglages sont enregistrées automatiquement quand vous fermez le panneau (en cliquant sur le X en haut à droite).

Attention : ce n’est pas un bug ! C’est voulu. Vos changements sont bien pris en compte. Pensez simplement à sauvegarder la page régulièrement avec le bouton Sauvegarder en haut de l’écran.

 

Sauvegarder et quitter : ça a déménagé en haut

En Divi 4, vous utilisiez le bouton vert pour sauvegarder et ensuite le bouton bleu “mettre à jour” ou “publier” de WordPress.

 

 

 

 

En Divi 5, ces deux actions se trouvent maintenant dans une fine barre en haut de l’éditeur :

• À droite de cette barre : le bouton Sauvegarder
• À gauche : le bouton Quitter (avec une petite flèche pour choisir où aller ensuite)

Comme toujours : sauvegardez avant de quitter. Certaines habitudes ne changent pas.

 

Un fil d’Ariane pour naviguer dans les réglages

Petite nouveauté très pratique : en haut de chaque panneau de réglages, vous voyez maintenant un chemin du type Page > Section > Ligne > Module.

Cliquez sur n’importe quel élément de ce chemin pour passer directement aux réglages du niveau souhaité, sans fermer et rouvrir des fenêtres. Un vrai gain de temps sur les pages complexes.

 

La nouvelle barre du haut dans Divi 5

En Divi 4, vos actions principales étaient éparpillées : le bouton de sauvegarde en bas à droite, le bouton pour quitter dans la barre WordPress en haut, les vues responsive en bas de l’écran… En Divi 5, tout a été regroupé dans une fine barre qui apparaît tout en haut de l’éditeur. Voici à quoi sert chaque élément, de gauche à droite.

1. Tout à gauche de la barre. Elle donne accès aux paramètres de l’éditeur lui-même : comportement, préférences d’affichage, options de l’interface. Vous n’en aurez généralement pas besoin pour la gestion quotidienne de votre contenu.
2. Trois icônes représentent les formats d’affichage : bureau, tablette et téléphone.
3. Vous voyez une icône avec des flèches horizontales accompagnée d’une valeur en pixels (par exemple “1680px”). Cela indique la largeur à laquelle votre page est affichée dans l’éditeur. Vous pouvez modifier cette valeur pour simuler différentes tailles d’écran.
4. La loupe accompagnée d’un pourcentage vous permet d’ajuster le niveau de zoom de votre page dans l’éditeur.
5. Le cercle blanc vous permet de basculer l’interface de l’éditeur entre un mode clair et un mode sombre.
6. La flèche gauche annule votre dernière action, la flèche droite la rétablit
7. L’icône horloge vous donne accès à l’historique de vos actions sur la page en cours.
8. Ces flèches permettent d’exporter ou d’importer le contenu de votre page
9. Cette icône efface l’intégralité du contenu de votre page et repart d’une page blanche.
10. Permet de sauvegarder dans la bibliothèque

 

Accéder aux réglages WordPress depuis le builder

C’est un changement important à connaître. En Divi 4, la sidebar WordPress (catégories, étiquettes, image mise en avant…) restait accessible en permanence depuis l’éditeur.

En Divi 5, une fois dans le builder, ces réglages ne sont plus visibles directement. Le panneau qui s’ouvre à droite au lancement de l’éditeur contient bien le titre, l’extrait et l’image mise en avant, mais pas les catégories ni les étiquettes.

Si vous avez besoin d’accéder à ces réglages en cours d’édition, pas de panique : cliquez sur le bouton Exit en haut à droite de la barre, puis choisissez “Edit Article” dans le menu déroulant. Vous revenez alors dans l’éditeur WordPress avec toute la sidebar accessible. Une fois vos réglages effectués, relancez le builder via le bouton “Edit With The Divi Builder”.

Son apparence a légèrement changé mais les fonctionnalités restent les mêmes.

 

 

Tableau récap : où retrouver vos actions habituelles

 

 

Vérifier l’affichage sur mobile : la logique change un peu

 

Si vous avez l’habitude de vérifier comment votre site s’affiche sur téléphone, voici ce qui change.

En Divi 4, vous cherchiez une petite icône de téléphone ou de tablette en haut de l’écran.

En Divi 5, ces icônes se trouvent maintenant en haut au centre de l’éditeur.

 

Ce qui ne change absolument pas

Pour finir sur une bonne note, voici tout ce qui reste exactement pareil. Rien à réapprendre ici.

• Cliquer directement sur un texte pour le modifier
• La structure de vos pages (sections, lignes, modules) est intacte
• Tous vos contenus (textes, images, pages) sont préservés
• L’apparence de votre site pour vos visiteurs ne change pas
• La logique générale : on clique, on modifie, on sauvegarde