32. Fonctions avancées : CSS personnalisé, code, conditions d’affichage, rôles, Notes

Le panneau d’Elementor couvre l’immense majorité des besoins d’un site vitrine. Reste une marge, étroite mais utile, où quelques lignes de CSS, un extrait de code de mesure ou une condition d’affichage règlent en deux minutes ce que le panneau ne prévoit pas. Ce chapitre rassemble ces fonctions dites « avancées » avec une règle constante : peu, documenté, réversible. Il ferme la partie consacrée à Elementor Pro, juste avant la livraison du site.

32.1 — CSS personnalisé : par élément et pour tout le site

Le chapitre 03 a présenté le CSS comme l’habillage d’une page : des règles qui disent au navigateur « ce paragraphe ne dépasse pas telle largeur », « cette image remplit sa boîte ». Le panneau d’Elementor écrit ce CSS pour vous. Le CSS personnalisé (Custom CSS) permet d’en ajouter à la main, à deux endroits.

Le premier est l’élément. Sur un widget classique, l’onglet Avancé contient une section CSS personnalisé ; sur un élément atomique, la même possibilité existe dans son panneau, et la Structure signale par un marqueur les éléments qui en portent. Dans ce champ, le mot-clé selector désigne l’élément lui-même : Elementor le remplace, à l’enregistrement, par l’identifiant unique de l’élément, si bien que la règle ne s’applique qu’à lui. Le second endroit est global : Réglages du site › CSS personnalisé, pour des règles qui valent sur tout le site et visent des classes ou des balises. D’après la page tarifs, ces deux fonctions sont réservées aux plans Advanced Solo et supérieurs ; le plan Essential ne les inclut pas.

1. Sélectionnez l’élément sur la toile, par exemple le Paragraphe d’introduction de la page « À propos ».
2. Ouvrez le champ CSS personnalisé (onglet Avancé pour un widget classique ; section dédiée du panneau pour un atome).
3. Écrivez la règle en commençant par selector : selector { max-width: 65ch; }. Chaque propriété se termine par un point-virgule, l’ensemble tient entre accolades.
4. Vérifiez sur la toile, puis en vue tablette et mobile (Ctrl+Shift+M ; Cmd remplace Ctrl sur Mac) : une règle CSS s’applique à toutes les largeurs, sauf si vous l’enfermez dans une requête de média.
5. Documentez. Ajoutez une ligne de commentaire au-dessus de la règle, entre /* et */ : /* largeur de lecture — ch. 32 */. Dans six mois, vous remercierez celui qui l’a écrite.

Sans Pro, WordPress offre une solution de repli honnête : Apparence › Personnaliser › CSS additionnel accepte des règles globales. Il faut alors viser les éléments par leur classe ou par un identifiant que vous leur donnez, ce qui demande un peu plus de soin.

32.2 — Code personnalisé : scripts de mesure et balises d’en-tête

Un site a parfois besoin d’un extrait de code qui n’est pas du CSS : le script d’un outil de statistiques, la balise de vérification d’un service (console de recherche d’un moteur, fiche d’établissement), le préchargement d’une police. Ces extraits vont dans l’en-tête ou le pied du document HTML, une zone que l’éditeur ne montre pas. Elementor Pro (plans Advanced Solo et supérieurs) fournit pour cela le Code personnalisé (Custom Code), dans Elementor › Éditeur › Éléments personnalisés › Code personnalisé.

On y crée un extrait avec un nom, un emplacement — dans <head>, au début de <body> ou à sa fin —, une priorité de 1 à 10 qui règle l’ordre de chargement quand plusieurs extraits partagent le même emplacement, et le code lui-même. La publication passe par les mêmes conditions que le Constructeur de thème (chapitre 24) : Tout le site le plus souvent, ou seulement certaines pages. Un script de statistiques se place dans <head> sur tout le site ; un script lourd et facultatif, en fin de <body>, pour ne pas retarder l’affichage.

32.3 — Polices, icônes et attributs personnalisés

Le même menu Éléments personnalisés abrite deux autres outils Pro. Les Polices personnalisées (Custom Fonts) servent à héberger une police sur votre propre site : une police achetée, ou une police Google que vous préférez servir vous-même plutôt que depuis les serveurs de Google (chapitre 13). On crée une entrée, on lui donne le nom de la famille, puis on téléverse les fichiers, de préférence au format WOFF2, en précisant pour chacun sa graisse et son style ; après publication, la famille apparaît dans les listes de typographie du panneau. Les Icônes personnalisées (Custom Icons) acceptent un jeu d’icônes exporté au format zip depuis un générateur en ligne (Fontello et IcoMoon sont les deux exemples cités par le Centre d’aide), pour compléter la bibliothèque Font Awesome.

Les Attributs (Attributes), dans l’onglet Avancé des widgets classiques et des conteneurs V3 (Pro), ajoutent des informations invisibles au HTML de l’élément, une par ligne, sous la forme clé|valeur. Le cas le plus utile pour un artisan est l’accessibilité : un bouton « Appeler » dont le texte est une icône reçoit aria-label|Appeler la Menuiserie Roche, et le lecteur d’écran sait quoi annoncer. On y place aussi des attributs data- attendus par certains scripts. Rien de tout cela n’est nécessaire sur un site simple ; savoir que l’outil existe évite d’installer une extension pour une ligne.

32.4 — Conditions d’affichage sur un élément

Le Constructeur de thème décide sur quelles pages un en-tête apparaît. Les Conditions d’affichage (Display Conditions) d’Elementor Pro descendent d’un cran : elles décident si un élément précis — un conteneur, un widget, un atome — est affiché ou non, selon des critères que vous combinez. Sur un widget classique, la commande se trouve dans l’onglet Avancé ; sur un élément atomique, dans son panneau ; dans les deux cas la Structure marque l’élément conditionné.

Les critères disponibles couvrent la date et l’heure (une plage de dates, un jour de la semaine, une tranche horaire), l’utilisateur (connecté ou non, rôle), le contenu affiché (type de contenu, page précise, catégorie, auteur) et des valeurs dynamiques. Plusieurs conditions se combinent par « et » et par « ou ». L’élément non affiché n’est pas simplement caché : il n’est pas envoyé au visiteur.

1. Construisez le bandeau. Sur l’en-tête du site (chapitre 24), ajoutez au-dessus du menu un Flexbox fin, fond vert sauge, avec un Paragraphe : « L’atelier est fermé du 4 au 25 août. Les devis reprennent dès le 26 : écrivez-nous, nous répondons à notre retour. »
2. Ouvrez les Conditions d’affichage du Flexbox et ajoutez une condition.
3. Choisissez le critère de date et saisissez la plage : du 4 au 25 août de l’année en cours.
4. Enregistrez et publiez l’en-tête. Vérifiez avec l’aperçu : hors de la plage, le bandeau n’apparaît pas ; pendant la plage, il apparaît sur tout le site.
5. Notez la date de retrait : une condition de date évite l’oubli, mais un bandeau conservé d’une année sur l’autre finit par afficher des dates fausses. Mettez-le à jour chaque été, ou supprimez-le à la rentrée.

32.5 — Rôles, Notes, Mode sans échec et Contrôle de version

Le Gestionnaire de rôle

Elementor › Éditeur › Gestionnaire de rôle (Role Manager) règle ce que chaque rôle WordPress peut faire dans l’éditeur. Pour chaque rôle (Éditeur, Auteur, Contributeur…), on peut interdire tout accès à l’éditeur ; Elementor Pro ajoute l’option d’un accès au contenu uniquement : la personne modifie les textes et les images, mais ni la mise en page ni le style. Pour la salariée de la Menuiserie Roche, c’est le réglage idéal, complété par les Composants du chapitre 22.

Les Notes

Les Notes (plans Advanced Solo et supérieurs) permettent de laisser un commentaire à un endroit précis de la page, comme un papillon collé sur une maquette. Le raccourci Shift+C ou le menu du logo Elementor active l’outil ; on clique sur la toile, on écrit, on peut mentionner un autre utilisateur et marquer la note comme résolue une fois traitée. Les notes ne sont jamais visibles des visiteurs. Entre un formateur et un stagiaire, ou entre un prestataire et son client, elles évitent des dizaines d’e-mails du type « le bouton, là, en bas à gauche ».

Le Mode sans échec

Quand l’éditeur refuse de se charger, la cause est presque toujours un conflit avec une autre extension ou avec le thème. Le Mode sans échec (Safe Mode), accessible depuis Elementor › Éditeur › Outils et proposé automatiquement par Elementor quand le chargement échoue, ouvre l’éditeur avec Elementor seul et le thème Hello, en désactivant temporairement le reste — pour vous uniquement, sans toucher au site vu par les visiteurs. Si l’éditeur fonctionne en mode sans échec, le coupable est ailleurs : on réactive les extensions une par une pour le trouver (chapitre 36). N’oubliez pas de quitter le mode sans échec ensuite.

Le Contrôle de version

Une mise à jour d’Elementor peut, rarement, casser un site. Le Contrôle de version (Version Control), dans le même menu Outils, propose de réinstaller une version précédente (Rollback Version) : on choisit le numéro dans la liste, on confirme, et le site revient à l’état d’avant la mise à jour en attendant un correctif. La même fonction existe pour Elementor Pro. Elle ne dispense pas d’une sauvegarde avant chaque mise à jour, et l’option « testeur de versions bêta » du même écran n’a rien à faire sur un site en production.