Il y a un moment qui revient de façon fiable dans presque tous les projets de site : le bleu doit être un peu plus foncé. Ce qui prend une minute sur un site proprement configuré tourne à la chasse au trésor sur quarante pages dans un site qui a poussé tout seul. La différence se joue tout au début.
Où se trouvent les réglages centraux
Dans l'éditeur Elementor, cliquez en haut à gauche sur le menu hamburger et choisissez Paramètres du site. Vous y trouverez notamment Couleurs globales et Polices globales.
Ce que vous y définissez apparaît ensuite comme valeur nommée dans chaque sélecteur de couleur et dans chaque réglage de typographie. Si un widget utilise cette valeur plutôt qu'une valeur fixe, il y reste durablement rattaché. Modifiez la valeur plus tard, et le widget suit.
C'est toute l'astuce. Et elle est malgré tout la plupart du temps sautée, parce qu'au début il va plus vite de taper directement un code couleur.
Combien de couleurs sont utiles
Elementor crée quatre couleurs par défaut. Dans mes projets, je travaille avec six à huit — il en faut rarement plus, et moins devient vite étriqué.
Une répartition qui a fait ses preuves :
- Primaire — votre couleur principale, pour les boutons et les mises en avant.
- Secondaire — la deuxième couleur de marque, à utiliser avec parcimonie.
- Texte — la couleur du corps de texte. Rarement du noir pur ; un gris très foncé est plus agréable à lire.
- Titre — souvent la même que le texte, parfois d'un ton plus foncé.
- Arrière-plan — le fond de la page.
- Surface — un ton légèrement détaché pour les cartes et les zones mises en avant.
- Bordure — pour les traits et les séparateurs.
- Accent — pour les remarques ou les avertissements, si besoin.
Donnez-leur des noms parlants. « Primaire » et « Surface claire » vous diront encore quelque chose dans un an ; « Couleur 5 », non.
Un mot sur le contraste
Vérifiez que la couleur de texte offre un contraste suffisant avec la couleur de fond avant de la figer. Pour du texte normal, un rapport d'au moins 4,5 pour 1 fait office de plancher. Il existe des outils de vérification gratuits qui prennent quelques secondes.
Ce n'est pas une formalité. Un texte gris clair sur fond blanc a l'air élégant sur votre écran calibré et reste tout simplement illisible sur un téléphone en plein soleil. Et comme les exigences d'accessibilité pour les sites web deviennent de plus en plus contraignantes, c'est aussi le bon côté où se placer.
Définir la typographie de façon centralisée
Sous Polices globales, vous définissez la famille, la taille, la graisse, la hauteur de ligne et l'interlettrage pour les rôles de texte récurrents — primaire, secondaire, texte, accent — et sous Style du thème, en plus, les valeurs par défaut pour H1 à H6 et le corps de texte.
Deux recommandations tirées de la pratique :
Deux familles de polices suffisent. Une pour les titres, une pour le corps de texte. Chaque famille supplémentaire coûte du temps de chargement et rend l'ensemble agité. Souvent, une seule famille en deux graisses fait même l'affaire.
Ne pas oublier la hauteur de ligne. Pour le corps de texte, une valeur autour de 1,6 convient généralement bien ; les titres en supportent nettement moins, environ 1,2. L'interligne pèse davantage sur la lisibilité que la taille de la police — le détail est ici : Bien régler l'interligne dans Elementor.
L'erreur la plus fréquente
Elle ressemble à ceci : quelqu'un crée des couleurs globales — puis saisit malgré tout le code couleur à la main dans le widget, parce que le sélecteur de couleur est justement ouvert.
La couleur est juste, le résultat semble identique, et le lien manque. Au prochain changement de couleur, c'est exactement ce widget qui restera en arrière.
Veillez à choisir dans le sélecteur la valeur globale, reconnaissable au petit symbole de globe, et non la valeur libre juste à côté. La même distinction vaut pour la typographie.
Si le site existe déjà
Basculer après coup est un travail de fourmi, mais il en vaut la peine. Ne procédez pas page par page, mais par type d'élément : d'abord tous les boutons, puis tous les titres, puis les surfaces. Le regard reste sur le même motif et vous avancez nettement plus vite.
Profitez-en pour faire du ménage. Il s'avère la plupart du temps qu'un site prétendument à quatre couleurs contient en réalité onze nuances de bleu légèrement différentes.
Elementor Pro : les couleurs et polices globales existent dans les deux versions. Pro étend cela à l'en-tête, au pied de page, aux popups et aux mises en page d'articles — les mêmes réglages s'y appliquent alors également. Découvrir Elementor Pro
Pourquoi l'effort est rentable
Une heure au début vous épargne des jours plus tard. J'ai repris des projets clients dans lesquels un changement de couleur aurait pris trois jours, parce que chaque couleur collait individuellement à chaque widget. Dans un projet proprement configuré, le même changement est une modification à un seul endroit.
Structurer un site dès le départ pour qu'il reste modifiable est l'un des axes de ma formation Elementor.
Tags