Divi 5 pour utilisateurs confirmés

Ce qui change dans l’interface

 

Les nouveaux emplacements à retenir

 

 

La barre gauche : votre nouveau tableau de bord

Toutes les fonctions globales de l’éditeur sont regroupées dans la barre verticale à gauche. De haut en bas : réglages du builder, bibliothèque de layouts, vue calques, inspecteur de styles, gestionnaire de variables, gestionnaire de presets, gestionnaire de pages, Command Center, vue wireframe, options d’affichage des icônes au survol, X-ray et aide. Tout au même endroit. C’est le genre de décision qui fait qu’on dit “aaah ben quand même !” au bout de deux semaines.

Le panneau de réglages à droite

Le panneau s’ouvre maintenant à droite et reste fixe pendant que vous travaillez. Vous voyez la page et les réglages en même temps. Le panneau est redimensionnable et peut être détaché si vous préférez le déplacer librement (réglable dans les Builder Settings).

En haut du panneau : le fil d’ariane (Page > Section > Ligne > Module). Cliquez sur n’importe quel niveau pour y accéder directement. Fini de fermer et rouvrir des fenêtres.

 

La sauvegarde : le piège principal

C’est le point qui surprend le plus les utilisateurs qui viennent de Divi 4. Et par “surprend”, on veut dire “provoque une légère panique la première fois”.

Fermer le panneau de réglages ne remplace plus le bouton ✅ vert. En Divi 5, quand vous fermez le panneau (X en haut à droite), les modifications sont enregistrées dans le module automatiquement. Il n’y a plus de bouton de validation.

Mais la page, elle, n’est pas encore enregistrée. Il faut toujours cliquer sur “Enregistrer” en haut à droite (ou ⌘S / Ctrl+S). Ne l’oubliez pas. Vraiment.

Le bouton “Enregistrer” propose un menu déroulant avec quatre options :

Enregistrer (⌘S / Ctrl+S) : publie immédiatement. Enregistrer Et Définir Comme Brouillon (⌘+Maj+S) : enregistre sans publier. Enregistrer Et Mettre En Attente : soumet pour validation. Enregistrer Et Définir Comme Privé : visible uniquement par les utilisateurs connectés.

 

 

Le clic droit : votre nouvel outil du quotidien

C’est l’une des fonctionnalités les plus utiles de Divi 5 pour un utilisateur confirmé. Un clic droit sur n’importe quel élément (module, ligne, section) ouvre un menu contextuel avec des actions directes, sans passer par le panneau de réglages.

Copier et coller des éléments

Copier/couper/coller un module, une ligne ou une section directement depuis le clic droit. Vous pouvez même coller dans une autre page en ouvrant un autre onglet avec le Visual Builder actif.

Copier et coller des attributs (le plus puissant)

Copy Attributes copie les styles d’un module. Sur un autre module du même type, “Paste Design Attributes” applique ces styles sans toucher au contenu. Exemple concret : vous stylisez un bouton, puis vous appliquez exactement le même style à tous les autres boutons de la page en quelques clics. Ce que vous faisiez avant en dix minutes se fait maintenant en dix secondes.

Étendre les attributs (Extend Attributes)

Encore plus puissant que le copier-coller : vous choisissez un module bien stylisé, vous faites “Extend Attributes” et vous définissez la portée (cette section, cette ligne, toute la page). Divi met à jour tous les éléments correspondants en une seule action. Parfait pour harmoniser rapidement des titres, des boutons ou des cartes sur une page entière.

Verrouiller des éléments (Lock)

Verrouillez une section ou un module pour empêcher toute modification accidentelle, y compris par un éditeur client. Seuls les administrateurs peuvent verrouiller et déverrouiller. Idéal pour livrer un site et protéger la structure tout en laissant le client modifier certains contenus. Le genre de fonctionnalité dont on avait besoin depuis longtemps.

 

Sauvegarder en bibliothèque depuis le clic droit

“Save to Library” est accessible directement depuis le clic droit, sans ouvrir le panneau de réglages du module. Gain de temps notable quand vous constituez une bibliothèque de blocs réutilisables.

 

 

Les variables de design globales

C’est l’une des grandes nouveautés de Divi 5. Les variables de design vont bien au-delà des anciennes couleurs globales de Divi 4. Beaucoup plus loin, même.

Ce que vous pouvez définir comme variable

Couleurs, typographies, nombres (avec unités CSS), chaînes de texte, images, liens. Chaque variable a un nom et une valeur. Une fois créée, vous pouvez l’assigner à n’importe quel champ compatible dans n’importe quel module du site.

Comment ça fonctionne

Accès via l’icône Variable Manager dans la barre gauche. Vous créez vos variables (par exemple : “Couleur principale”, “Taille de titre H2”, “Police de corps”). Vous les assignez aux champs en cliquant sur l’icône de contenu dynamique qui apparaît au survol d’un champ.

L’intérêt pratique pour les accros 

Quand un client change de couleur principale : vous modifiez la variable une seule fois dans le Variable Manager et tous les éléments qui utilisent cette variable se mettent à jour sur l’ensemble du site. Fini les recherches et remplacements manuels module par module. Un vrai gain de temps sur les refont de chartes.

Point d’attention : les couleurs globales existantes (Primary, Secondary, etc.) apparaissent dans le Variable Manager mais ne peuvent pas être renommées, supprimées ou réordonnées depuis cet outil.

 

 

Les presets de modules

Les presets permettent de créer des styles réutilisables pour un type de module donné. Par exemple, vous créez un preset “Bouton principal” avec vos couleurs, vos arrondis et votre typographie. Vous l’appliquez ensuite à tous les boutons du site en quelques clics.

Preset vs variable de design

Les deux fonctionnent ensemble mais ne font pas la même chose. Une variable de design stocke une valeur (une couleur, une taille). Un preset stocke une configuration complète d’un module (l’ensemble de ses réglages de style). Un preset peut utiliser des variables de design dans ses valeurs.

Gestionnaire de presets

Accessible depuis la barre gauche (icône Presets Manager). Vous y voyez tous vos presets par type de module, vous pouvez les éditer, les supprimer, ou les appliquer à des éléments existants.

Point à connaître : quand vous modifiez un preset, tous les modules qui utilisent ce preset se mettent à jour automatiquement sur l’ensemble du site. Puissant, donc à manier avec un minimum de prudence.

 

 

Le responsive : nouvelle logique

7 breakpoints au lieu de 3

Divi 5 propose sept breakpoints prédéfinis (de l’ultra-wide desktop au smartphone), tous personnalisables en largeur. Vous pouvez activer ceux dont vous avez besoin et définir leur largeur exacte en pixels.

Gestion responsive directement dans chaque réglage

Plus besoin de changer de vue pour ajuster la valeur d’un réglage sur mobile. Dans chaque champ du panneau de réglages, vous pouvez switcher entre les breakpoints directement, sans quitter le panneau. Vous voyez en temps réel le rendu sur la page pendant que vous ajustez. C’est le changement le plus silencieux de Divi 5, mais probablement celui qui fait le plus gagner du temps au quotidien.

Gestion des états hover

De même, les états hover (survol) sont gérables directement depuis chaque réglage, au même endroit que le responsive. Plus besoin de chercher un onglet séparé. Pour ceux qui font des hover sur absolument tout, c’est une très bonne nouvelle.

 

Le Theme Builder : édition directe depuis le front end

C’est un changement de workflow important. En Divi 4, éditer le header ou le footer impliquait de quitter la page, aller dans Divi > Theme Builder, ouvrir le template concerné, faire les modifications, sauvegarder puis revenir à la page. Fastidieux. Voir pénible. 

En Divi 5, quand vous ouvrez le Visual Builder sur une page, le header et le footer assignés à cette page sont directement accessibles et éditables dans la même session. Vous pouvez modifier le contenu de la page et les zones globales (header, footer) sans changer d’interface.

Masquer le Theme Builder pendant l’édition

Si vous ne voulez pas voir les zones globales pendant que vous travaillez sur le contenu d’une page : Builder Settings > désactiver “Show Theme Builder Layouts”. Utile pour se concentrer sur la page sans distraction.

Le Theme Builder reste accessible depuis le tableau de bord

Le workflow classique (Tableau de bord > Divi > Theme Builder) fonctionne toujours. L’édition directe depuis le front end est un complément, pas un remplacement.

 

La vue calques et la vue wireframe

Vue calques (Layers View)

Accessible depuis la barre gauche. Affiche l’arborescence complète de la page : sections, lignes, colonnes, modules. Chaque élément est cliquable pour l’ouvrir directement dans le panneau de réglages.

Particulièrement utile sur des pages complexes où les éléments sont difficiles à sélectionner directement sur le canvas. Vous pouvez aussi renommer les éléments dans la vue calques pour vous y retrouver plus facilement. Une bonne habitude à prendre dès le début.

Vue wireframe

Accessible depuis la barre gauche. Affiche tous les éléments sous forme de blocs neutres sans rendu visuel. Permet de travailler sur la structure pure sans être distrait par les couleurs, images et typographies. Les icônes d’action restent accessibles en vue wireframe.

 

Le Command Center

Le Command Center est une palette de commandes accessibles au clavier depuis n’importe où dans l’éditeur. Tapez ce que vous cherchez (le nom d’un module, d’une page, d’un réglage) et exécutez l’action directement.

Exemples d’utilisation :

Ajouter un module “Blurb” sans naviguer dans les menus. Ouvrir les réglages d’une page précise. Accéder à un panneau de réglages spécifique. Naviguer vers une autre page du site depuis l’éditeur.

C’est l’outil qui fait vraiment gagner du temps une fois qu’on est à l’aise avec Divi 5. Accessible depuis l’icône dédiée dans la barre gauche, ou via le raccourci clavier (voir section suivante).

 

Raccourcis clavier essentiels

Sur Mac, remplacez Ctrl par ⌘. Accédez à la liste complète depuis l’éditeur avec Maj + ?.

Les raccourcis de page