Date de mise à jour : 17 mai 2026
Temps de lecture : 6 minutes. Soit exactement le temps qu’il vous faut pour ne plus avoir peur du bouton “Activer le Visual Builder”.
Divi 4
Votre site utilise Divi 4, un constructeur de pages visuel qui vous permet de modifier vos contenus directement en ligne, sans toucher au code. Sections, lignes, modules. Trois mots à retenir et vous avez déjà compris 80% de Divi. Pour les 20% restants, ce tutoriel est là.
Ce tutoriel concerne Divi 4. Si votre site a déjà été migré vers Divi 5, consultez le tutoriel dédié à cette version. Vous pouvez également consulter notre tutoriel “De Divi 4 à Divi 5” qui explique les grands changements entre les deux versions.
Niveau de difficulté
Pour les débutant·e·s qui ont peur de tout casser et les confirmé·e·s qui ont déjà tout cassé au moins une fois.
Comprendre et utiliser Divi
Votre site utilise Divi, un constructeur de pages visuel qui vous permet de modifier vos contenus directement en ligne, sans avoir à toucher au code. Ce tutoriel vous explique comment il fonctionne et comment l’utiliser.
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, plusieurs actions sont disponibles au survol du titre.
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. Avant de se lancer, trois notions à retenir. Promis, c’est la partie la plus difficile du tutoriel.
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. Si vous avez retenu ça, vous pouvez déjà fermer la moitié des autres tutoriels. (mais lisez quand même le reste de celui-ci)
Modifier un contenu existant
Quand vous devez modifier un contenu, vous avez deux façons de procéder selon ce que vous voulez faire.
Pour des modifications légères (corriger une faute, changer un mot) : rendez-vous sur la page à modifier et cliquez sur “Activer le Visual Builder” dans la barre en haut de l’écran. Vous pouvez alors modifier votre contenu directement en ligne, en cliquant sur l’élément à changer. Une fois vos corrections faites, sauvegardez en cliquant sur le bouton mauve en bas de l’écran, puis cliquez sur “Quitter le Visual Builder” en haut de la page.
Pour des modifications plus importantes (changer une image, restructurer un bloc, modifier un module) : depuis la liste de vos pages dans le tableau de bord, cliquez sur “Modifier” sous le nom de la page. Vous arrivez dans l’éditeur en mode back-end, qui affiche la structure de la page sous forme de blocs. Cliquez ensuite sur “vue de bureau” pour passer en mode visuel et voir la page telle qu’elle s’affiche.
Une précaution importante : ne cliquez jamais sur “Retour à l’éditeur standard”. Cela effacerait votre contenu Divi. Si vous le voyez apparaître, faites comme s’il n’existait pas.
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. Cinq icônes, cinq actions :
La première icône permet de déplacer le bloc dans la page en le faisant glisser.
La deuxième, la roue crantée, permet d’ouvrir les réglages du bloc pour modifier son contenu ou son apparence.
La troisième permet de dupliquer le bloc.
La quatrième permet d’enregistrer le bloc dans la bibliothèque, pour le réutiliser sur une autre page.
La cinquième permet de supprimer le bloc. Attention : une suppression enregistrée, c’est définitif. Pas de retour en arrière possible après sauvegarde.
Les champs de configuration
Quand vous ouvrez les réglages d’un module en cliquant sur la roue crantée, vous trouvez 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. C’est votre terrain de jeu.
Style : vous permet de modifier l’apparence du module : typographies, couleurs, tailles, espacements. On préfère que vous nous consultiez avant d’y toucher sur les pages existantes : chaque page a été configurée pour respecter l’identité visuelle de votre site et une modification de style peut créer des incohérences en cascade. Parfois spectaculaires.
Avancé : 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 : 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.
Conseil général : dupliquez toujours une page existante plutôt que de créer une nouvelle page de zéro. Vous conservez ainsi les mises en forme et les styles déjà en place sur votre site. Et vous évitez de repartir de la page blanche, ce qui n’est jamais agréable.
Les principes de sauvegarde
La sauvegarde en Divi fonctionne en deux temps et c’est un point qui surprend souvent. On vous aura prévenus.
Quand vous travaillez dans un module et que vous fermez sa fenêtre de réglages, vos modifications sont enregistrées dans le module… mais pas encore sur la page. Il faut ensuite sauvegarder la page entière.
En mode Visual Builder (front end), cliquez sur le bouton mauve en bas de l’écran, puis sur “Sauvegarder”. L’affichage revient alors en mode back end et vous devez cliquer sur “Mettre à jour” dans la colonne de droite pour finaliser l’enregistrement.
Les flèches qui apparaissent dans la barre du bas de l’éditeur permettent d’annuler ou de rétablir des actions, tant que la sauvegarde n’a pas encore été effectuée.
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.
Pour sauvegarder vos modifications, cliquez sur les “…” mauves en bas de l’écran, puis sur “Sauvegarder“.
Attention : toute modification du footer s’applique à l’ensemble des pages de votre site. Ce n’est pas le moment de tester des choses en live. En cas de doute, contactez-nous avant d’intervenir.
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.
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.
Les questions que nous comprenons que vous vous posiez
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 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.
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.
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.
La page s'affiche différemment sur mon téléphone. Comment vérifier l'affichage mobile ?
En mode Visual Builder, une icône de téléphone apparaît en bas de l’écran. Cliquez dessus pour basculer en aperçu mobile. Vous pouvez également basculer en aperçu tablette. Attention : en mode aperçu, vous pouvez toujours modifier les éléments, mais certains réglages s’appliquent uniquement à ce format.
Puis-je modifier le header (l'en-tête) de la même façon que le footer ?
Oui, le principe est identique. Rendez-vous dans Tableau de bord > Divi > Theme Builder, puis cliquez sur le crayon à côté de “En-tête”. Attention : toute modification s’applique à l’ensemble des pages du site. Si vous avez le moindre doute, contactez-nous avant d’intervenir.
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.
Divi 5
Sections, lignes, modules, icônes d’action, sauvegarde : un tutoriel Divi 5 vous donne tous les repères pour modifier votre site en toute sérénité.
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à.