19. Réglages du site : couleurs, polices, identité, mise en page

Le chapitre 18 a construit le système de design des éléments atomiques. Mais un site contient aussi des widgets classiques, un thème, un logo, un favicon, une largeur de contenu. Tout cela se règle dans un seul panneau, les Réglages du site, qui valent pour l’ensemble des pages. Ce chapitre le parcourt section par section et l’aligne sur les variables du chapitre précédent.

19.1 — Ouvrir les Réglages du site

Les Réglages du site (Site Settings) s’ouvrent de trois façons : depuis le menu du logo Elementor dans la barre supérieure, par le raccourci Ctrl+K (Cmd+K sur Mac), ou depuis l’administration WordPress, dans Elementor › Éditeur, par le bouton de personnalisation (Customize) affiché sous « Réglages du site ». Le panneau de gauche est alors remplacé par une liste en trois groupes : Système de conception (Design System), Styles du thème (Theme Style) et Réglages (Settings).

Deux différences avec ce que vous connaissez. Rien de ce que vous réglez ici n’appartient à la page ouverte : cela vaut pour tout le site. Et ces réglages ne s’enregistrent pas avec le bouton Publier de la page, mais avec le bouton Enregistrer les modifications (Save Changes) en bas du panneau. Oublier ce bouton est la première cause de « réglages qui ne s’appliquent pas ».

19.2 — Système de conception : Couleurs globales et Polices globales

Les Couleurs globales proposent quatre couleurs nommées, Primaire (Primary), Secondaire (Secondary), Texte (Text) et Accent, auxquelles on ajoute autant de couleurs personnalisées que nécessaire. Les Polices globales suivent la même logique avec quatre entrées ; chacune associe une famille de caractères à une taille, une graisse et les autres réglages de typographie du chapitre 13.

À quoi servent-elles, si les variables existent déjà ? À tout ce qui n’est pas atomique. Ouvrez un widget classique, une Boîte d’icône par exemple, et cliquez sur un champ de couleur : une icône en forme de globe permet de lier ce champ à une couleur globale au lieu de saisir une valeur ; il en va de même pour la typographie. Un site qui mélange éléments atomiques et widgets classiques, comme le recommande ce support, a donc besoin que les deux jeux de valeurs disent la même chose.

1. Ouvrez les Réglages du site (Ctrl+K) puis Couleurs globales.
2. Vérifiez la synchronisation. Si vos variables du chapitre 18 apparaissent dans la liste, la synchronisation annoncée avec la version 4.0 a fonctionné ; sinon, saisissez les valeurs à la main.
3. Affectez les quatre couleurs nommées. Pour la Menuiserie Roche : Primaire #A8663C (bois), Secondaire #7A9E7E (sauge), Texte #2B2B2B (anthracite), Accent #8A5230 (bois sombre). Ajoutez une couleur personnalisée « Blanc cassé » #FAF7F2.
4. Passez aux Polices globales. Primaire : Playfair Display, graisse 700 (grands titres) ; Secondaire : Playfair Display, graisse 400 (sous-titres) ; Texte : Source Sans 3, graisse 400, 17 px ; Accent : Source Sans 3, graisse 600 (boutons, étiquettes).
5. Enregistrez les modifications, puis ouvrez un widget classique : ses champs de couleur proposent désormais votre palette derrière l’icône globe.

19.3 — Styles du thème : ce qui s’applique quand rien n’est réglé

Les Styles du thème définissent l’apparence par défaut des contenus qui ne passent pas par un réglage explicite : le texte d’un article écrit dans l’éditeur de blocs, les titres H1 à H6, les liens, les boutons et les champs de formulaire. Leurs sections sont Typographie, Boutons, Images, Champs de formulaire et, avec le thème Hello Elementor, Entête et Pied de page.

Typographie règle la couleur et la police du corps de texte, l’espacement des paragraphes, les liens au repos et au survol, puis chaque niveau de titre. Boutons règle typographie, couleurs, bordure, rayon et marges internes des boutons, au repos et au survol. Images règle bordure, rayon, opacité et ombre de toutes les images. Champs de formulaire règle libellés et champs. Entête et Pied de page pilotent l’en-tête et le pied de page fournis par le thème Hello : logo ou titre du site, slogan, menu, disposition et couleurs. Ces deux dernières sections cessent d’avoir un effet dès que vous construisez un en-tête et un pied de page avec le Constructeur de thème (chapitre 24, Elementor Pro).

Le réglage qu’il faut connaître : désactiver les couleurs et polices par défaut

Par défaut, les Styles du thème ne s’appliquent qu’aux contenus hors Elementor. Les widgets classiques arrivent avec leurs propres couleurs et polices d’usine, d’où le bouton vert et le titre gris que l’on obtient en déposant un widget sur une page neuve. Pour que les widgets suivent vos Styles du thème et vos Couleurs globales, cochez deux cases dans l’administration : Elementor › Éditeur › Réglages, onglet Général, Désactiver les couleurs par défaut (Disable Default Colors) et Désactiver les polices par défaut (Disable Default Fonts). Faites-le dès l’installation, avant de construire quoi que ce soit.

19.4 — Réglages : identité, arrière-plan, mise en page et le reste

Le troisième groupe rassemble les réglages qui ne sont pas des styles. Le tableau 19.1 les passe en revue avec les valeurs retenues pour la Menuiserie Roche.

Tableau 19.1 — Les sections du groupe Réglages et les choix retenus pour le fil rouge.

Trois précisions. La largeur du contenu ne concerne que les conteneurs sans largeur propre ; vos Flexbox construits avec la classe section et un Flexbox intérieur limité à 1140 px (chapitre 9) n’en dépendent pas directement, mais garder la même valeur partout permet aux modèles importés de s’aligner sur vos pages. Le sélecteur de titre de page indique à Elementor quel élément masquer quand vous activez « Masquer le titre » dans les Réglages de page ; avec le thème Hello, la valeur par défaut convient. La mise en page par défaut évite de choisir « Elementor pleine largeur » à chaque nouvelle page.

19.5 — Variables et réglages globaux : une seule source de vérité

Résumons l’articulation entre ce chapitre et le précédent. Les variables alimentent les classes des éléments atomiques ; les Couleurs et Polices globales alimentent les widgets classiques et les Styles du thème. Depuis la version 4.0, les premières sont synchronisées vers les secondes, pas l’inverse. La méthode la plus sûre : créer la palette sous forme de variables, vérifier qu’elle apparaît dans les Couleurs globales, puis affecter les quatre rôles à partir de ces valeurs. Si la synchronisation ne se fait pas dans votre installation, saisissez les mêmes codes des deux côtés et notez-les dans la fiche F7 : deux listes qui disent la même chose valent mieux qu’une liste incomplète.

Terminez toujours par Enregistrer les modifications. Pour conserver une trace écrite de vos choix, indépendante de l’installation, la fiche F7 en fin d’ouvrage est faite pour les noter.