18. Le système de design : Variables, Classes et États

Jusqu’ici, chaque réglage de style ne valait que pour l’élément sélectionné. Ce chapitre change d’échelle : on définit une valeur une fois, on la nomme, on la partage, et tout le site suit. C’est le chapitre le plus important de cette partie, parce qu’il décide si votre site restera facile à faire évoluer dans deux ans.

18.1 — Le problème : quarante boutons, une couleur

Imaginez le site de la Menuiserie Roche terminé : cinq pages, une quarantaine de boutons, une vingtaine de cartes. Camille Roche trouve le bois de sa palette trop orangé et veut un ton plus profond. Avec la méthode des chapitres précédents, il faudrait ouvrir chaque page, sélectionner chaque bouton, changer la couleur, puis recommencer pour le survol : une après-midi de travail, et la certitude d’en oublier un.

La solution existe dans tous les métiers du design : on ne répète pas une décision, on la nomme. « Couleur bois » devient un nom qui pointe vers une valeur ; « bouton principal », un nom qui pointe vers un ensemble de réglages. Changer ce qui se trouve derrière le nom met à jour tout ce qui l’utilise. C’est ce qu’Elementor appelle, depuis la version 4.1, le Système de conception (Design System), accessible depuis la barre supérieure, avec deux onglets, Variables et Classes.

18.2 — Les variables : un surnom pour une valeur

Le Centre d’aide Elementor définit une variable comme « un surnom pour une certaine valeur ». Trois types existent : Couleur (Color), Police (Font, une famille de caractères) et Taille (Size, une valeur avec son unité). Sur ce dernier type, la documentation n’est pas parfaitement claire : la page consacrée aux variables réserve les variables de taille aux utilisateurs Pro, tandis que celle du Gestionnaire de variables présente les trois types sans distinction. Si votre installation ne propose pas le type Taille, saisissez ces quelques valeurs directement dans vos classes ; le système restera cohérent.

Le nom d’une variable s’affiche dans les champs à la place de la valeur ; il doit rester clair dans six mois. Préférez des noms courts, en minuscules, sans accent ni espace, préfixés par le type : couleur-bois, police-titres, taille-rayon. Évitez les noms liés à un usage (couleur-bouton-accueil) : le jour où la couleur sert ailleurs, le nom ment.

1. Ouvrez un champ de couleur d’un élément atomique, par exemple Style › Arrière-plan d’une carte. À côté du sélecteur, une petite icône de variable est affichée.
2. Cliquez sur l’icône, puis sur Créer une variable (Create a variable).
3. Donnez un nom et une valeur : couleur-bois et #A8663C, puis enregistrez. La variable est créée immédiatement, disponible dans tout le site sans publier la page, et le champ affiche désormais son nom.
4. Réutilisez-la. Sur tout autre élément atomique, la même icône ouvre la liste des variables existantes : choisissez couleur-bois. Aucune valeur à retaper, aucune faute de frappe possible.

Pour voir toutes vos variables d’un coup, ouvrez le Gestionnaire de variables (Variables Manager) : icône Système de conception de la barre supérieure, onglet Variables. On y crée des variables sans passer par un champ, on modifie une valeur par double-clic, on duplique et on supprime ; avant de supprimer, assurez-vous qu’aucun élément n’utilise encore la variable.

18.3 — Les classes : un style partagé

« Une classe est un ensemble de caractéristiques de style partagées », dit le Centre d’aide. Chaque élément atomique possède d’office une classe locale (local), celle que vous avez modifiée sans le savoir dans tous les chapitres précédents ; elle ne concerne que cet élément et apparaît en rose en haut de l’onglet Style. Une classe globale, affichée en vert, est partagée par tous les éléments qui la portent : modifier la classe, c’est les modifier tous à la fois.

Deux façons de créer une classe globale. Taper un nom dans le champ Classes, en haut de l’onglet Style, puis choisir Créer une nouvelle classe (Create a new class) : la classe naît vide et se style ensuite. Ou, plus naturel pour un débutant, styler d’abord un élément localement, puis convertir sa classe locale en classe globale ; la traduction officielle de cette commande est « Convertir en classe mondiale » (Convert to global class), lisez « globale ».

1. Stylez un bouton localement. Sur la page d’accueil, sélectionnez « Demander un devis ». Onglet Style : fond couleur-bois, texte couleur-blanc-casse, police police-texte en graisse 600, marge interne 14 px haut et bas et 28 px sur les côtés, rayon 999 px, transition 250 ms.
2. Ouvrez les trois points de la classe locale (en rose, en haut de l’onglet Style) et choisissez « Convertir en classe mondiale ». Nommez-la btn-primaire et validez : la pastille passe au vert.
3. Appliquez-la à un autre bouton. Sur la page « Prestations », sélectionnez le bouton, cliquez dans le champ Classes, tapez btn et choisissez btn-primaire. Le bouton prend instantanément le même style.
4. Modifiez la classe pour vérifier. La pastille verte étant sélectionnée, passez la marge interne horizontale à 32 px : les deux boutons changent ensemble. Remettez 28.

Plusieurs classes, et laquelle gagne

Un élément peut porter plusieurs classes globales en plus de sa classe locale : une carte peut être carte et, pour celle que l’on veut mettre en avant, carte-accent qui n’ajoute qu’une bordure de couleur. Quand deux classes règlent la même propriété, la classe locale l’emporte toujours, ce qui permet une exception ponctuelle sans casser le système. Entre classes globales, c’est l’ordre du Gestionnaire de classe qui décide ; on le modifie par glisser-déposer et l’on vérifie sur la toile laquelle prend le dessus.

Le Gestionnaire de classe (Class Manager) s’ouvre depuis le Système de conception (onglet Classes) ou depuis une icône de l’onglet Style. Il liste les classes globales du site et permet de les renommer, supprimer, réordonner, rechercher et, par une icône en forme de cible, de localiser les éléments qui les utilisent ; des filtres (Unused, Empty, On this page : inutilisées, vides, sur cette page) aident au ménage. Depuis la version 4.1, un site peut compter jusqu’à 1 000 classes ; un site vitrine bien tenu en utilise moins de vingt. Les utilisateurs non administrateurs ont des droits restreints. Avant de supprimer une classe, localisez ses éléments, qui perdraient le style qu’elle leur donne ; préférez renommer, le renommage se propage partout.

18.4 — Les états : au survol, au focus, actif

Un bouton a une apparence au repos, une autre quand la souris le survole, une autre quand il a le focus (sélectionné au clavier avec la touche Tabulation) et une autre pendant le clic. Elementor appelle ces variantes des états (element states) : Au survol (Hover), Focus et Actif (Active) ; l’élément Onglets dispose en plus de l’état Sélectionné (Selected) pour l’onglet ouvert. Un état s’ajoute à une classe, locale ou globale, depuis le même menu à trois points. Ajouté à une classe globale, il vaut pour tous les éléments qui la portent : quarante boutons réagissent au survol sans avoir été réglés un par un.

1. Sélectionnez un bouton portant btn-primaire et vérifiez que la pastille verte de la classe est sélectionnée.
2. Ouvrez les trois points de la classe et choisissez Au survol. Vous éditez maintenant l’état de survol de cette classe.
3. Réglez uniquement ce qui change : fond couleur-bois-sombre et, dans Effets, une échelle de 1.03. Tout ce qui n’est pas redéfini dans l’état est hérité de l’état normal.
4. Revenez à l’état normal : c’est là, rappel du chapitre 17, que la transition de 250 ms doit être définie pour que le passage soit fluide.
5. Ajoutez l’état Focus, par exemple une bordure de 2 px en couleur-anthracite : un visiteur qui navigue au clavier doit voir où il se trouve, exigence d’accessibilité (chapitre 34). Enregistrez et testez dans l’Aperçu à la souris, puis au clavier avec Tab.

18.5 — La méthode : construire le système avant les pages

L’ordre de travail que nous recommandons, et que nous appliquons en atelier Num Compagny, tient en une ligne : variables, puis classes, puis pages. On enregistre la palette et les polices ; on construit sur une page « bac à sable » un exemplaire de chaque composant, que l’on convertit en classes globales ; on construit enfin les pages en appliquant ces classes. Le tableau 18.1 résume le système de la Menuiserie Roche : dix variables et six classes suffisent à un site vitrine de cinq pages.

Tableau 18.1 — Le système de design de la Menuiserie Roche, repris en fiche F7. Les classes sont responsives : une valeur réglée en vue mobile ne vaut que pour cette vue (chapitre 12).

À cinq pages, ce système fait gagner une après-midi à chaque changement de palette et garantit que le bouton de la page Contact ressemble à celui de l’Accueil. À cinquante pages, ou dès qu’une deuxième personne intervient, il devient la seule chose qui empêche la dérive : chaque nouvelle page se construit avec les six mêmes classes. Il voyage aussi : classes et variables sont exportées et importées avec les modèles et les Modèles de sites (chapitre 21), pour réutiliser le même socle d’un site à l’autre.

Un site sans système de design n’est pas terminé : il est seulement arrêté.