Un site qui vieillit mal se reconnaît souvent à un symptôme précis : la même nuance de bleu déclinée en douze variantes légèrement différentes selon la page, ou un titre en Montserrat ici, en Open Sans là, sans qu’aucune règle n’explique pourquoi. Ce n’est presque jamais un choix assumé. C’est la conséquence d’un réglage pris widget par widget, page après page, sans jamais remonter à une source commune.
Elementor propose depuis un moment déjà deux fonctionnalités pensées exactement pour éviter ce piège : les Global Colors et les Global Fonts, accessibles depuis les réglages du site. Bien utilisées, elles transforment la manière de construire un site : au lieu de choisir une couleur à chaque fois, on la sélectionne dans une liste restreinte, déjà validée. Voici comment les mettre en place correctement, dès le début d’un projet ou en reprise d’un site existant.
Où se trouvent les réglages globaux
Les réglages globaux se trouvent dans le menu Elementor, sous Site Settings (Réglages du site), puis dans les sections Global Colors et Global Fonts. Ces réglages ne sont pas propres à une page : ils s’appliquent à l’ensemble du site, quel que soit le widget ou la page où ils sont utilisés. C’est la différence fondamentale avec un réglage de couleur pris directement dans le panneau d’un widget, qui ne concerne que cet élément précis.
Par défaut, Elementor propose déjà quatre couleurs (Primaire, Secondaire, Texte, Accent) et quatre styles de police (Primaire, Secondaire, Texte, Accent). Ces valeurs par défaut sont un point de départ, pas une contrainte : elles peuvent être renommées, remplacées, et complétées par autant d’entrées supplémentaires que le projet le nécessite.
Construire une palette de couleurs qui a du sens
La tentation, face à une page vierge, est d’ajouter une couleur globale à chaque fois qu’un besoin apparaît. Résultat courant après quelques mois : une liste de quinze couleurs globales, dont la moitié se ressemblent tellement qu’plus personne ne sait laquelle utiliser. Mieux vaut partir d’une palette resserrée, pensée avant même d’ouvrir l’éditeur :
- Une couleur de marque principale, utilisée pour les boutons d’action et les éléments qui doivent attirer l’œil.
- Une couleur secondaire, pour les accents et les états de survol.
- Une couleur de texte principal, généralement un noir légèrement adouci plutôt qu’un noir pur.
- Une couleur de texte secondaire, plus claire, pour les légendes et informations moins prioritaires.
- Une ou deux couleurs de fond, pour distinguer les sections claires des sections plus sombres.
Cinq à sept entrées suffisent dans la grande majorité des projets de site vitrine. Chaque couleur globale mérite un nom explicite plutôt qu’une description de sa teinte : « Bouton principal » se comprend d’un coup d’œil dans six mois, alors que « Bleu 1 » oblige à rouvrir le site pour se rappeler où elle est utilisée.
Structurer une hiérarchie typographique réutilisable
Le même principe s’applique aux polices. Global Fonts permet de définir des styles de texte complets : famille de police, graisse, taille, interligne et espacement des lettres, regroupés sous un seul nom réutilisable partout dans le site. L’objectif est de couvrir les usages réels d’une page avec un nombre limité de styles :
- Un style pour les titres principaux de section (h2 dans la structure de page).
- Un style pour les sous-titres (h3).
- Un style pour le corps de texte courant.
- Un style pour les éléments d’interface, comme les boutons ou les étiquettes de formulaire, souvent plus compact.
Une erreur fréquente consiste à créer un style global par page plutôt qu’un style global par fonction. Si la page « À propos » a besoin d’un titre légèrement plus grand que la page d’accueil, la solution n’est pas de dupliquer le style global : elle consiste à ajuster ponctuellement la taille dans le widget concerné, tout en conservant la police et la graisse héritées du style global. Le style global porte l’identité, le réglage local porte l’exception.
Éviter les couleurs et polices « en dur »
Une fois la palette et la typographie posées, la discipline la plus importante consiste à ne plus jamais choisir une couleur ou une police en dehors des valeurs globales. Elementor rend cette tentation facile : chaque contrôle de couleur propose un sélecteur de teinte libre, à côté de la liste des couleurs globales. Rien n’empêche techniquement de piocher une nuance personnalisée pour un seul bouton.
Le problème apparaît plus tard, quand la charte évolue : un changement de couleur de marque, décidé en réunion, doit alors se répercuter dans toutes les entrées globales concernées pour se propager automatiquement à tout le site. Si certains widgets utilisent une couleur en dur au lieu de la couleur globale, ils resteront figés dans l’ancienne teinte, invisibles lors d’une vérification rapide, jusqu’à ce qu’un client s’en aperçoive.
Avant de valider un projet, parcourez systématiquement les pages principales avec le panneau de style ouvert sur chaque widget de texte et chaque bouton. Un contrôle de couleur qui n’affiche pas le nom d’une couleur globale, mais un simple code hexadécimal, signale presque toujours un oubli.
Impliquer toute l’équipe dans la discipline
Sur un projet mené à plusieurs, la valeur des réglages globaux dépend entièrement de leur respect par chaque intervenant. Un rédacteur qui construit une page avec Elementor sans connaître les couleurs globales définies risque de recréer, sans le vouloir, une teinte approchante mais légèrement différente. Documenter la palette et la typographie dans un support simple, partagé avec toute l’équipe, évite ce genre de dérive.
Un tableau récapitulatif, même sommaire, affiché à côté de l’éditeur ou glissé dans la documentation interne du site, aide à garder cette cohérence dans la durée. Il suffit d’y indiquer le nom de chaque couleur globale, sa fonction prévue, et un exemple d’usage type, pour que chaque nouvel intervenant sache immédiatement où piocher.
En résumé
Global Colors et Global Fonts ne sont pas de simples raccourcis de confort : ce sont les fondations d’un design cohérent qui tient dans le temps. Poser une palette resserrée, une hiérarchie typographique claire, et bannir systématiquement les valeurs en dur transforme la manière dont un site évolue. Un changement de charte graphique, qui prendrait autrement des heures de reprise page par page, se résume alors à modifier quelques entrées globales, avec la certitude que tout le site suivra.
