Date de mise à jour – temps de lecture
Divi 5
Votre site utilise Divi 5, un constructeur de pages visuel qui vous permet de modifier vos contenus directement en ligne, sans toucher au code. Sections, lignes, modules, icônes d’action, sauvegarde : ce tutoriel vous donne tous les repères pour modifier votre site au quotidien en toute sérénité.
Ce tutoriel concerne Divi 5. Si votre site tourne encore sous Divi 4, consultez le tutoriel dédié à cette version. Si votre site vient d’être migré depuis Divi 4, consultez également notre tutoriel “De Divi 4 à Divi 5” qui explique les grands changements entre les deux versions.
Niveau de difficulté
Pour tout utilisateur de Divi, débutant·e ou confirmé·e.
L’interface des pages
Depuis le tableau de bord, quand vous allez dans Pages ou Articles, vous obtenez une liste de vos contenus. Pour chacun, vous disposez de plusieurs actions :
Modifier vous fait entrer dans la page pour l’éditer.
Modification rapide vous permet de changer rapidement le statut ou la date de publication sans entrer dans la page.
Corbeille déplace l’élément dans la corbeille. Ce n’est pas définitif immédiatement — les éléments restent dans la corbeille pendant 30 jours avant d’être supprimés automatiquement et définitivement.
Voir vous permet de visualiser la page telle qu’elle apparaît pour vos visiteurs.
La date de publication de chaque contenu est visible dans la colonne de droite de la liste.
Le langage Divi : sections, lignes et modules
Divi construit les pages comme une composition de blocs empilés les uns sur les autres. Pour comprendre comment fonctionne l’éditeur, il faut connaître trois notions de base.
Les sections constituent le découpage horizontal de votre page. Chaque section peut avoir une couleur ou une image de fond différente, ce qui permet de créer des ruptures visuelles entre les parties de la page. Divi propose trois types de sections : Normal, Spécialité et Plein écran. Dans la grande majorité des cas, vous travaillerez avec des sections de type Normal.
Les lignes se trouvent à l’intérieur de chaque section. Elles définissent la mise en colonnes du contenu : une colonne, deux colonnes, trois colonnes, etc. Chaque fois que vous avez besoin d’un nouveau découpage en colonnes, vous créez une nouvelle ligne.
Les modules sont les blocs de contenu eux-mêmes, à l’intérieur de chaque ligne. Un module représente un type de contenu précis : texte, image, bouton, vidéo, formulaire de contact, accordéon, icône, et bien d’autres encore. C’est principalement sur les modules que vous allez travailler quand vous modifiez votre site.
En résumé : une page est faite de sections, chaque section contient des lignes, et chaque ligne contient des modules.
Modifier un contenu existant, ouvrir l’éditeur de Divi 5
Pour modifier une page, rendez-vous sur celle-ci en étant connecté à WordPress. Cliquez sur le bouton bleu “Edit with Divi” pour entrer dans l’éditeur.
Vous pouvez également passer par le tableau de bord : dans la liste de vos pages, cliquez sur “Modifier” sous le nom de la page, puis sur “Edit with the Divi builder” pour basculer en mode visuel.
Une précaution importante : ne cliquez jamais sur “Retour à l’éditeur standard”. Cela effacerait votre contenu Divi. Si vous le voyez apparaître, ne cliquez pas dessus.
La barre d’outils à gauche
C’est l’un des éléments les plus visibles de Divi 5. Une barre d’outils est présente sur le côté gauche de l’écran pendant toute votre session dans l’éditeur.
C’est depuis cette barre que vous accédez notamment au bouton pour ajouter de nouveaux éléments à votre page (sections, lignes, modules). Tout est regroupé au même endroit, ce qui évite de chercher les boutons d’ajout directement sur la page.
De haut en bas, voici ce que contient cette barre :
Réglages du builder (roue crantée, en haut) : accès aux réglages globaux de l’éditeur : mode d’affichage par défaut, position du panneau de réglages, thème clair ou sombre, couleur de l’interface, et d’autres préférences de travail. C’est aussi ici que vous pouvez passer du mode sombre au mode clair.
Ajouter un layout (“+”) : ouvre la bibliothèque de mises en page prédéfinies (layouts). Permet d’importer une mise en page complète ou un bloc sauvegardé dans votre bibliothèque Divi. Attention : cette icône n’ajoute pas un module ou une section individuelle. Pour ajouter un élément à votre page, cliquez directement sur les boutons “+” qui apparaissent sur la page quand vous survolez les blocs existants.
Vue en calques : affiche la structure complète de votre page sous forme d’arborescence (sections, lignes, modules). Très utile pour naviguer dans une page complexe ou sélectionner un élément difficile à atteindre directement sur la page.
Inspecteur de styles : affiche les styles, le contenu et les préréglages appliqués à l’élément sélectionné. Utile pour comprendre d’où vient un style particulier.
Gestionnaire de variables : accès aux variables globales de design (couleurs, typographies, espacements). C’est ici que sont définies les couleurs et polices utilisées sur l’ensemble du site. Nous vous déconseillons d’y toucher sans nous consulter au préalable.
Gestionnaire de presets : gestion des préréglages de style applicables aux modules. Réservé à un usage avancé.
Gestionnaire de pages : permet de naviguer entre toutes les pages et articles qui utilisent Divi, sans avoir à quitter l’éditeur pour retourner dans le tableau de bord.
Centre de commandes : un raccourci clavier ou un champ de recherche qui permet d’exécuter rapidement des actions : ajouter un élément, naviguer vers une page, ouvrir un panneau de réglages. Utile une fois qu’on connaît bien l’éditeur.
Affichage filaire : bascule l’affichage en mode filaire, où tous les éléments de la page sont représentés sous forme de blocs neutres. Pratique pour travailler sur la structure sans être distrait par le rendu visuel.
Icônes d’action au survol et Icônes d’action parent au survol : deux options qui contrôlent quelles icônes d’action s’affichent quand vous survolez un élément. Activées par défaut, elles permettent de voir les icônes du module survolé ainsi que celles de ses éléments parents (ligne, section).
X-ray : affiche les contours de tous les éléments de la page (modules, colonnes, lignes, sections), ce qui aide à visualiser la structure même quand les blocs n’ont pas de fond visible.
Aide (“?”) : accès à la documentation et aux tutoriels vidéo de Divi.
Les icônes d’action sur les blocs
En mode visuel, quand vous survolez un bloc, une rangée d’icônes apparaît. Ces icônes sont les mêmes pour les sections, les lignes et les modules. De gauche à droite :
La première, la roue crantée, permet d’ouvrir les réglages du bloc pour modifier son contenu ou son apparence.
La deuxième permet de dupliquer le bloc.
La troisième permet de supprimer le bloc. Attention : une suppression enregistrée est définitive.
La quatrième permet d’accéder à d’autres fonctionnalités
Pour déplacer un bloc, passez simplement votre curseur dessus et déplacez le.
Les champs de configuration
Quand vous ouvrez les réglages d’un module, le panneau s’affiche sur le côté droit de l’écran. Votre page reste visible à gauche pendant que vous faites vos modifications, ce qui vous permet de voir vos changements en direct.
Vous pouvez ouvrir ce panneau de deux façons : en cliquant sur la roue crantée d’un bloc, ou en double-cliquant directement sur l’élément.
En haut du panneau, un fil d’ariane indique votre position dans la structure de la page : Page > Section > Ligne > Module. Vous pouvez cliquer sur n’importe quel élément de ce chemin pour accéder directement aux réglages du niveau souhaité, sans fermer et rouvrir des fenêtres.
Le panneau contient trois onglets.
Contenu : c’est l’onglet que vous utiliserez le plus souvent. C’est là que vous modifiez le texte, changez une image, mettez à jour un lien.
Style : vous permet de modifier l’apparence du module : typographies, couleurs, tailles, espacements. Nous vous déconseillons de modifier ces réglages sur les pages existantes, car chaque page a été configurée pour respecter l’identité visuelle de votre site. Une modification de style sur un module peut créer des incohérences visuelles.
Avancé : contient des paramètres plus techniques. Vous n’en aurez généralement pas besoin pour de la modification de contenu simple. La seule option de cet onglet qui peut vous être utile est celle qui permet de masquer ou afficher un élément sur mobile ou tablette, sans pour autant le supprimer. C’est une action réversible, contrairement à la suppression d’un module.
Nous vous conseillons de toujours dupliquer une page existante plutôt que de créer une nouvelle page de zéro, afin de conserver les mises en forme et les styles déjà en place sur votre site.
Les principes de sauvegarde
La sauvegarde en Divi 5 fonctionne différemment de ce que vous avez peut-être connu avec d’autres outils. Il y a deux niveaux à bien distinguer.
Fermer le panneau de réglages n’est pas sauvegarder la page. Quand vous modifiez un module et que vous fermez son panneau (en cliquant sur le X en haut à droite), vos modifications sont enregistrées dans le module automatiquement. Mais la page, elle, n’est pas encore sauvegardée.
Pour enregistrer la page, cliquez sur le bouton “Enregistrer” situé en haut à droite de la barre de l’éditeur. Ce bouton propose un menu déroulant avec plusieurs options :
Enregistrer (raccourci ⌘S sur Mac) : enregistre et publie la page immédiatement.
Enregistrer Et Définir Comme Brouillon : enregistre la page sans la publier. Elle reste invisible pour vos visiteurs jusqu’à ce que vous la publiez manuellement.
Enregistrer Et Mettre En Attente : enregistre la page et la soumet pour relecture, sans la publier. Utile si un autre utilisateur doit valider le contenu avant publication.
Enregistrer Et Définir Comme Privé : enregistre la page en la rendant visible uniquement pour les utilisateurs connectés à l’administration du site.
Dans la grande majorité des cas, vous utiliserez simplement “Enregistrer” ou le raccourci ⌘S.
Pour quitter l’éditeur, cliquez sur le bouton “Quitter” en haut à gauche de cette même barre. Une petite flèche vous permet de choisir où aller ensuite.
Pensez toujours à enregistrer avant de quitter.
Modifier le footer
Le footer (le pied de page) de votre site est commun à toutes les pages. Il ne se modifie pas depuis une page classique, mais depuis le constructeur de thème : Tableau de bord > Divi > Theme Builder.
Cliquez sur le crayon à côté de “Pied de page” pour l’ouvrir. Le footer s’affiche alors en mode front end et fonctionne exactement comme n’importe quelle autre section de page : vous cliquez sur la roue crantée d’un module pour en modifier le contenu. Le panneau de réglages s’ouvre sur la droite, comme partout ailleurs dans Divi 5.
Pour enregistrer vos modifications, cliquez sur le bouton “Enregistrer” en haut à droite de l’éditeur (ou utilisez le raccourci ⌘S sur Mac).
Attention : toute modification du footer s’applique à l’ensemble des pages de votre site.
Modifier le menu avec Divi (et le thème builder)
Le menu de navigation de votre site se gère à deux endroits, et les deux sont nécessaires.
La structure du menu (quelles pages apparaissent, dans quel ordre, avec quels sous-menus) se définit dans WordPress via Tableau de bord > Apparence > Menus. C’est là que vous ajoutez ou retirez des éléments. Cette partie est expliquée en détail dans le tutoriel WordPress généraliste.
L’affichage du menu (couleurs, typographie, disposition) se gère lui dans le Theme Builder de Divi : Tableau de bord > Divi > Theme Builder. Cliquez sur le crayon à côté de “En-tête” pour ouvrir l’en-tête en mode front end. Le menu y apparaît sous forme de module : cliquez sur la roue crantée du module Menu pour accéder à ses réglages.
Dans les réglages du module Menu, vous retrouvez les trois onglets habituels : Contenu, Style et Avancé. L’onglet Contenu vous permet notamment de choisir quel menu WordPress afficher (si votre site en a plusieurs). L’onglet Style permet d’ajuster les couleurs, la typographie et l’espacement des éléments du menu.
Comme pour le footer, toute modification du menu dans le Theme Builder s’applique à l’ensemble des pages du site. En cas de doute, contactez-nous avant d’intervenir.
Avril 2026 — LAHPLAB
Les questions que nous comprenons que vous vous posiez
J'ai fermé le panneau de réglages mais je ne vois pas de bouton de validation. Mes changements ont bien été enregistrés ?
Oui. En Divi 5, les modifications sont enregistrées automatiquement quand vous fermez le panneau. Il n’y a plus de bouton vert de validation comme dans les versions précédentes. N’oubliez pas d’enregistrer la page elle-même en cliquant sur “Enregistrer” en haut à droite de l’éditeur (ou ⌘S sur Mac).
J'ai cliqué sur "Retour à l'éditeur standard" et mon contenu a disparu. Que faire ?
Ne sauvegardez surtout pas. Quittez la page immédiatement sans enregistrer et contactez-nous. Si la page n’a pas été sauvegardée dans cet état, nous pouvons récupérer le contenu via l’historique des révisions ou une sauvegarde du site.
J'ai modifié un texte mais les changements n'apparaissent pas sur le site. Pourquoi ?
Vous avez probablement fermé le panneau de réglages du module sans sauvegarder la page entière. Retournez dans l’éditeur, vérifiez votre modification et cliquez bien sur le bouton mauve “Sauvegarder” en bas de l’écran, puis sur “Mettre à jour” dans la colonne de droite.
Je vois un message "Backward Compatibility Mode Enabled" sur une page. C'est grave ?
Non, pas du tout. C’est un message informatif qui indique que cette page contient un élément qui sera mis à jour prochainement. Votre page fonctionne normalement pour vos visiteurs. Aucune action de votre part n’est nécessaire.
Je n'arrive pas à cliquer sur un élément de la page en mode Visual Builder.
Certains éléments sont imbriqués dans d’autres. Essayez de cliquer une première fois pour sélectionner le bloc parent, puis une seconde fois pour accéder à l’élément souhaité. Vous pouvez aussi utiliser le fil d’ariane en haut du panneau de réglages pour naviguer dans la structure.
J'ai supprimé un module par erreur. Peut-on le récupérer ?
Si vous n’avez pas encore sauvegardé la page, utilisez la flèche “Annuler” dans la barre du bas de l’éditeur. Si la page a déjà été sauvegardée, contactez-nous : nous pouvons consulter les révisions ou restaurer une sauvegarde.
Je n'arrive pas à cliquer sur un élément de la page en mode Visual Builder.
Certains éléments sont imbriqués dans d’autres. Essayez de cliquer une première fois pour sélectionner le bloc parent, puis une seconde fois pour accéder à l’élément souhaité. Si le problème persiste, essayez de passer par l’éditeur back end pour naviguer dans la structure de la page.
Puis-je créer une nouvelle page de zéro avec Divi ?
Techniquement oui, mais nous vous le déconseillons. Créer une page de zéro signifie repartir sans aucun style, ce qui risque de produire une page visuellement incohérente avec le reste du site. La bonne pratique est de dupliquer une page existante dont la structure ressemble à ce que vous souhaitez obtenir.
D’autres ressources utiles
Divi 5 pour utilisateurs confirmés
Guide de transition et de prise en main rapide pour quelqu’un qui connait Divi 4 et qui veut juste savoir ce qui a changé, ce qui est nouveau, et comment aller vite dans Divi 5.
De Divi 4 à Divi 5
Nouveau bouton, nouvelle barre, nouveaux réflexes : Divi 5 change la disposition de votre éditeur. Mais derrière les apparences, la logique que vous connaissez est toujours là.
Divi 4
Sections, lignes, modules, icônes d’action, sauvegarde : ce tutoriel vous donne tous les repères nécessaire à l’utilisation de DIVI 4