Divi 5 : Les variables de design, la fondation de votre site WordPress
Les variables de design sont au cœur du nouveau système de Divi 5. Plutôt que de saisir manuellement une couleur ou une taille dans chaque module de votre site, vous définissez une valeur une seule fois et vous la référencez partout. Résultat : modifier l’ensemble de votre site devient aussi simple que de changer une seule valeur.
Dans cet article, nous allons explorer comment mettre en place un système de design global avec les variables, puis comment le générateur de variables de Divi 5 peut tout automatiser pour vous.
Qu’est-ce qu’une variable de design ?
Une variable de design, c’est une valeur nommée et réutilisable que Divi 5 peut référencer dans l’ensemble de votre site. Par exemple, au lieu de taper #2176ff dans chaque module qui utilise votre couleur principale, vous créez une variable appelée Couleur Principale avec la valeur #2176ff. Vous la référencez ensuite partout où ce bleu apparaît. La valeur est stockée en un seul endroit, et toutes les références pointent vers elle.
Divi 5 prend en charge six types de variables : couleurs, polices, nombres, images, textes et liens. Votre système de variables peut donc couvrir bien plus que du style il peut aussi stocker des logos, des coordonnées, des textes d’appel à l’action et des URLs externes.
Comment accéder au gestionnaire de variables
Pour accéder au gestionnaire de variables de design, ouvrez n’importe quelle page ou template dans le Visual Builder. Ensuite, cliquez sur l’icône de variable de design dans la barre du builder, sur le côté gauche de l’écran. Cela ouvre le gestionnaire, où vous pouvez créer, organiser et gérer vos variables à l’échelle du site.
En haut du gestionnaire, un menu déroulant vous permet de filtrer les variables par type : Couleurs, Polices, Nombres, Images, Textes et Liens. Pour créer une nouvelle variable, cliquez sur le bouton + dans la section du type souhaité, donnez-lui un nom descriptif, définissez sa valeur et enregistrez.
Un conseil de nommage avant de commencer
Avant de créer vos variables, utilisez des noms qui décrivent leur rôle. Pour les valeurs générales de marque, des noms comme Couleur Principale, Couleur Secondaire ou Couleur Texte Corps fonctionnent bien car ils peuvent être utilisés dans de nombreux contextes.
Pour les valeurs à usage spécifique, préférez des noms fonctionnels comme Bordure – Champs Sombre ou Arrondi – Boutons. Cela facilite la lecture du système ultérieurement, notamment lorsque vous commencez à construire des presets à partir de ces variables.
Créer son système de variables de design
Variables de couleurs
Les couleurs définissent l’identité de marque, la hiérarchie visuelle et le contraste entre les sections. Commencez par créer les variables de couleur fondamentales : Couleur Principale, Couleur Secondaire, Couleur Texte Titres, Couleur Texte Corps et Couleur Lien.
L’une des fonctionnalités les plus puissantes de Divi 5 est le système de couleurs relatives. Au lieu de créer manuellement une série de nuances claires à foncées de votre couleur principale, vous créez une couleur relative basée sur elle et en ajustez la luminosité. Lorsque vous modifiez la couleur principale, toutes les couleurs relatives sont automatiquement mises à jour. Ainsi, le schéma de couleurs de l’intégralité de votre site peut évoluer à partir d’une seule variable.
À partir de vos couleurs de base, vous pouvez construire des variantes dérivées pour les textes clairs, sombres, transparents, ainsi que des couleurs d’arrière-plan, d’overlay, de bordure et d’ombre toutes liées à vos couleurs principales via des opacités relatives.
Variables de polices
Pour les polices, créez au minimum deux variables : Titres et Corps. Divi facilite la sélection de Google Fonts et prend en charge les polices personnalisées importées. Utiliser une seule famille typographique pour les deux est tout à fait valide la distinction visuelle entre titres et texte courant peut alors passer par la taille, le poids et l’interlignage plutôt que par des familles différentes.
Variables numériques : tailles, espacements et plus
Les variables numériques gèrent les valeurs en pixels, rems, ems ou fonctions CSS. Voici les groupes logiques à couvrir :
Tailles des titres : Chaque niveau de titre (H1 à H6) reçoit une taille fluide via la fonction CSS clamp(). Ces valeurs définissent une taille minimale, une vitesse de mise à l’échelle préférée et une taille maximale. Ainsi, les titres s’adaptent harmonieusement entre mobile et bureau sans nécessiter de valeurs distinctes pour chaque point de rupture.
Tailles du texte corps : Body standard, Body Small pour les textes secondaires (pieds de page, légendes), Body XS pour les mentions et étiquettes.
Interlignes : Des interlignes serrés pour les titres, plus généreux pour le corps du texte.
Espacement : Des variables d’espacement créent un rythme cohérent entre les éléments. Plutôt que d’estimer visuellement le padding et les marges de chaque module, vous référencez une variable d’espacement qui impose la même distance partout où elle est utilisée, du XSmall (10px) au Large (100px), avec une variante fluide basée sur clamp() pour s’adapter à la taille de l’écran.
Bordures et arrondis : Largeurs de bordure et rayons de coin séparés par contexte (images, champs, boutons, conteneurs) pour pouvoir les faire évoluer indépendamment.
Boutons : Taille de police, padding vertical et horizontal pour définir les dimensions physiques de chaque bouton du site.
Dimensions de mise en page : Des variables de largeur maximale contraignent le contenu à des longueurs de ligne lisibles (ex. 1080px, 900px, 700px, 510px selon le contexte).
Variables images, textes et liens
Variables images : Stockez vos logos (version claire et version sombre). Chaque header, footer et template qui affiche le logo peut référencer l’une de ces variables. Si vous remplacez un logo, vous ne le mettez à jour qu’en un seul endroit. 
Variables textes : Stockez les informations récurrentes : nom de l’entreprise, adresse, téléphone, email, horaires, mais aussi les textes d’appel à l’action (« Prendre rendez-vous », « Voir les offres », « En savoir plus »). Cela assure une cohérence de formulation sur tout le site.
Variables liens : Pour les destinations externes comme les profils sociaux, les outils de réservation ou les ressources tierces. Lorsqu’une URL externe change, vous mettez à jour la variable une fois tous les modules qui la référencent pointent automatiquement vers le nouvel emplacement.
Le générateur de variables : automatiser tout en quelques clics
Mettre en place un système de variables complet prend du temps, et maîtriser des fonctions comme clamp() peut sembler intimidant. C’est là qu’intervient le générateur de variables de Divi 5, qui vous permet de créer automatiquement un système entier de tailles et de couleurs en quelques clics.
Générer une palette de couleurs relative
Dans le gestionnaire de variables, survolez le groupe couleurs et cliquez sur le bouton « Générer les variables de palette de couleurs » pour ouvrir le générateur.
Divi prend votre couleur principale et génère automatiquement un système de couleurs relatif à partir d’elle. Vous pouvez ajuster la relation avec la couleur secondaire, choisir le nombre de nuances souhaitées, et c’est tout !
Une fois enregistrées, les variables générées couvrent les couleurs de base (principale, secondaire, texte corps, texte titres, lien) ainsi qu’un spectre de nuances claires à foncées et de couleurs transparentes basées sur vos couleurs primaire et secondaire. La beauté de ce système : chaque variable est relative à la couleur principale, et quand vous modifiez celle-ci, tout le reste suit automatiquement.
Générer un système de tailles fluides
Le générateur de couleurs n’est que la surface. Le générateur de variables va bien plus loin.
En quelques clics, il crée un système de tailles fluides et responsive complet, incluant des variables pour la taille du texte, l’espacement, le gap, la largeur, le border-radius, et bien plus. Le système généré par Divi fonctionne très bien tel quel, mais vous pouvez aussi ajuster chaque aspect.
Dans le gestionnaire de variables, survolez le groupe nombres et cliquez sur « Générer les variables de tailles fluides ». Ensuite, choisissez votre type de variable dans le menu :
- Taille de police – Pour des titres et textes qui s’adaptent à la taille de l’écran.
- Espacement – Pour les marges et paddings qui évoluent avec l’écran.
- Gap – Pour les espaces entre éléments flex qui varient selon la résolution.
- Rayon – Pour des coins arrondis qui s’adaptent à la taille de l’écran.
- Largeur de bordure – Pour des bordures qui évoluent avec l’écran.
- Clamp (générique) – Pour créer vos propres variables clamp personnalisées.
- Taille (générique) – Pour tout ce qui n’est pas couvert par les systèmes ci-dessus.
Pour les débutants, il n’est pas nécessaire de configurer quoi que ce soit. Choisissez simplement le nombre de variables souhaitées, puis cliquez sur « Ajouter les variables à mon site ».
Par défaut, toutes les variables de taille générées par Divi utilisent clamp() pour créer des tailles qui s’adaptent à toutes les résolutions. Vous n’avez plus besoin du tout d’utiliser l’édition responsive.
Pour les utilisateurs avancés : tout personnaliser
Le système de taille par défaut généré par Divi fonctionne très bien, mais si vous souhaitez garder le contrôle, vous l’avez entièrement. Ouvrez la barre latérale de personnalisation pour accéder à tous les réglages possibles :
- Choisir parmi différentes fonctions de mise à l’échelle.
- Définir les largeurs minimale et maximale de votre site pour adapter les fonctions clamp.
- Personnaliser chaque variable individuellement.
- Construire des systèmes de variables statiques sans clamp.
- Modifier les suffixes et préfixes des variables.
Conclusion
Avec les variables de design et le générateur de variables de Divi 5, gérer un site WordPress devient plus simple, plus logique et plus rapide au quotidien. Définir vos valeurs une seule fois (couleurs, tailles, polices, contenus récurrents) et les utiliser partout permet d’éviter les incohérences et de gagner beaucoup de temps lors des mises à jour de contenu.
Que vous soyez débutant et que vous laissiez Divi générer votre système automatiquement, ou expert souhaitant tout paramétrer manuellement, ces outils s’adaptent à votre niveau.
N’hésitez pas à nous contacter si vous souhaitez être accompagné dans la mise en place de votre système de design Divi 5.