Les préréglages de groupes d’options au cœur de Divi 5
Dans Divi 5, un préréglage permet d’enregistrer des réglages de design pour les réutiliser à différents endroits d’un site. Jusqu’ici, les Element Presets servaient surtout à sauvegarder la configuration complète d’un élément : un module, une ligne, une colonne ou une section. Les préréglages de groupes d’options ajoutent une couche de contrôle supplémentaire.
Au lieu de sauvegarder l’ensemble du design d’un élément, ils ciblent un groupe de réglages précis, accessible depuis les onglets du builder : Typography, Background, Border, Spacing, Box Shadow, Button, Effects, etc. Cela rend les styles beaucoup plus modulaires. Tu peux par exemple créer un préréglage dédié à une bordure et l’utiliser sur différents éléments du site boutons, images, colonnes, cartes ou sections ou définir un style de titre réutilisable dans plusieurs modules partageant ce même groupe d’options.
L’idée est proche d’une classe CSS, mais intégrée au système de design de Divi. Plutôt que de répéter les mêmes réglages dans chaque module, tu crées un style une seule fois et tu le réutilises partout où c’est nécessaire. L’objectif est simple : construire un véritable système de design réutilisable, cohérent et facile à maintenir.
Element Presets vs préréglages de groupes d’options
Ces deux systèmes sont complémentaires.
Un Element Preset contrôle le design d’un élément complet. Il peut définir tout le style d’un module et reste lié à un type d’élément précis, comme un bouton entier.
Un préréglage de groupe d’options contrôle un seul groupe de réglages. Il peut par exemple définir une typographie, une bordure ou une ombre, et se réutiliser sur différents éléments compatibles comme le style de bordure d’un bouton. Cette distinction est essentielle pour comprendre la logique du nouveau système de design de Divi 5.
Concrètement : un Element Preset définit l’apparence complète d’un bouton, tandis qu’un préréglage de groupe d’options gère séparément sa bordure, son ombre ou sa typographie. Les deux se combinent ensuite pour construire des composants plus complexes et plus faciles à maintenir. Pour qui vient de Divi 4, où chaque module se personnalisait surtout individuellement, c’est un vrai changement de méthode de mise en page.
Définir les styles de base d’un site
Un bon système de design ne consiste pas à rendre chaque élément identique, mais à définir une base cohérente puis à prévoir les variations utiles. C’est précisément là que les préréglages de groupes d’options deviennent intéressants. Tu peux définir des styles de base pour :
- les boutons ;
- les titres ;
- le texte de corps ;
- les arrière-plans ;
- les bordures ;
- les ombres portées ;
- les espacements ;
- la typographie ;
- les effets et animations.
La plupart des sites WordPress n’utilisent pas une infinité de styles. Ils reposent sur quelques règles bien définies : deux ou trois styles de titres, quelques variantes de boutons, une palette cohérente, des rayons de bordure récurrents, des ombres standardisées. Plutôt que de saisir ces réglages manuellement dans chaque module, tu crées des préréglages correspondant à ces besoins. Un Heading – Default devient le style de base de tes titres, tandis qu’un Heading – Highlight sert aux sections importantes ou aux zones promotionnelles. Tu obtiens une base commune tout en gardant assez de flexibilité pour créer des variantes.
Le vrai gain : modifier un style partout en une fois
L’un des principaux avantages des préréglages, c’est la maintenance. Quand un préréglage est modifié, les éléments qui l’utilisent récupèrent automatiquement la nouvelle configuration.
Imagine un site avec 30 boutons partageant le même préréglage. Pour changer leur couleur, leur rayon de bordure ou leur typographie, tu n’ouvres pas les 30 modules un par un : tu modifies le préréglage, et le changement se répercute partout. En quelques clics, tout le site est à jour.
Ce bénéfice grandit avec le projet. Sur un petit site, éditer manuellement quelques boutons reste rapide. Sur un site de dizaines de pages et de centaines de composants, la gestion centralisée réduit fortement les tâches répétitives et les incohérences. Le préréglage devient une source commune pour le style, plutôt qu’une succession de réglages indépendants un vrai atout lors d’une refonte ou d’une mise à jour de charte graphique.
Des préréglages comme des briques de design réutilisables
La force du système apparaît quand plusieurs préréglages se combinent. Plutôt qu’un préréglage géant qui contrôle tout, tu crées des briques indépendantes :
- un préréglage pour la bordure ;
- un préréglage pour l’ombre ;
- un préréglage pour la typographie ;
- un préréglage pour l’espacement ;
- un préréglage pour le bouton.
Ces briques se combinent ensuite pour construire des composants plus complets. On se rapproche des workflows modernes basés sur des composants et des classes CSS. Divi 5 permet même de stacker (empiler) et de nester (imbriquer) les préréglages : un petit préréglage peut être réutilisé dans un préréglage plus large, lui-même intégré à un Element Preset.
Comment superposer les styles dans Divi 5
Le fonctionnement repose sur plusieurs couches de styles. Tu commences avec un élément auquel tu appliques un Element Preset pour définir sa structure générale, puis tu affines son apparence avec différents préréglages de groupes d’options. Un bouton peut ainsi utiliser :
- un Element Preset pour son apparence générale ;
- un préréglage de groupe d’options pour sa typographie ;
- un autre pour sa bordure ;
- un autre pour son ombre ;
- une variation spécifique pour un état particulier (survol, actif).
Cette superposition conserve une base commune tout en ajoutant des variations ciblées. Un même système sert alors plusieurs composants sans repartir de zéro.
Les préréglages imbriqués vont encore plus loin
Divi 5 pousse la logique avec les Nested Option Presets. Un groupe d’options situé à l’intérieur d’un autre peut recevoir son propre préréglage, ce qui crée une hiérarchie réutilisable :
Border – Pill → Button – Primary → CTA – Standard
Si tu modifies ensuite Border – Pill, la modification se répercute à travers tous les niveaux qui l’utilisent. Cette approche rend le système particulièrement intéressant pour les sites complexes et les design systems à grande échelle.
À garder en tête. Cette hiérarchie est puissante mais introduit des dépendances. Plus tu imbriques, plus une modification en amont peut avoir des effets inattendus en aval, et plus le débogage devient délicat. Nomme et documente clairement tes préréglages dès le départ.
Préréglages et Design Variables : une combinaison plus puissante
Les préréglages de groupes d’options se marient aux Design Variables de Divi 5, qui centralisent des valeurs comme les couleurs, les tailles, les largeurs ou les espacements. Plutôt que de coder une couleur en dur dans un préréglage de bouton, tu utilises une variable liée à la couleur principale de ta marque. Si cette couleur évolue, tu modifies la variable au lieu de rechercher chaque utilisation.
La combinaison Design Variables + préréglages de groupes d’options + Element Presets permet de construire un système de design réellement scalable l’équivalent d’une feuille de styles CSS centralisée, mais pilotée depuis l’interface visuelle de Divi.
Et le responsive dans tout ça ?
Les points de rupture responsive personnalisables complètent l’approche. Les préréglages organisent et réutilisent les styles ; les breakpoints contrôlent leur évolution entre desktop, tablette et mobile. En combinant les deux, tu construis un système cohérent tout en gardant un contrôle précis sur chaque taille d’écran. Couplé au moteur de mise en page flexbox de Divi 5, l’ensemble rend les layouts à la fois plus flexibles et plus prévisibles.
Une nouvelle façon de concevoir les sites avec Divi 5
Les préréglages de groupes d’options ne sont pas une simple fonctionnalité qui fait gagner quelques clics. Ils accompagnent une évolution plus profonde : passer d’une configuration élément par élément à un système de design fait de styles réutilisables, modulaires et connectés.
Les Element Presets définissent des composants complets. Les préréglages de groupes d’options créent des briques de style réutilisables. L’empilement et l’imbrication permettent de composer ces briques. Les Design Variables centralisent les valeurs fondamentales. Le résultat : un workflow bien plus proche des méthodes modernes de conception web, avec un design system directement intégré au Visual Builder.
Conclusion
Divi 5 renforce son système de design avec une approche plus modulaire et plus scalable. Les préréglages de groupes d’options permettent de créer des styles partagés pour les titres, boutons, bordures, arrière-plans, ombres et espacements, de les réutiliser sur différents modules, de les combiner avec des Element Presets et de les imbriquer pour construire des composants plus complexes.
Le principe reste simple : concevoir une fois, réutiliser partout, modifier globalement. Pour les petits projets WordPress, c’est surtout du temps gagné. Pour les sites plus importants, cela transforme la manière dont le design est construit, organisé et maintenu. Associés aux Design Variables, aux Element Presets, aux préréglages empilés et aux nouveaux outils responsive, les préréglages de groupes d’options constituent l’une des briques essentielles du nouveau constructeur. Pour découvrir l’évolution complète de Divi, consulte la documentation et les ressources officielles d’Elegant Themes.