Faut-il écrire une règle dans le panneau Custom CSS d’un widget, ou créer une classe réutilisable dans les réglages globaux ? Cette question, anodine en apparence, détermine largement la facilité avec laquelle un projet Elementor pourra être maintenu six mois plus tard. Les deux approches fonctionnent techniquement, mais elles répondent à des besoins différents.
Ce que fait le panneau Custom CSS
Chaque widget, colonne, section ou conteneur d’Elementor dispose, dans son onglet Avancé, d’un panneau CSS personnalisé permettant d’écrire une règle qui s’applique uniquement à cet élément précis, sans avoir besoin de créer une classe ni de sortir de l’éditeur. Le sélecteur selector représente l’élément courant :
selector {
border-left: 3px solid #1d4ed8;
padding-left: 12px;
}
Cette règle ne s’applique qu’à ce widget précis, sur cette page précise. Aucun autre élément du site n’est affecté, même s’il contient un widget du même type.
Ce que fait une classe réutilisable
Une classe créée via le gestionnaire de classes d’Elementor, en revanche, peut être appliquée à plusieurs éléments répartis sur plusieurs pages, avec un style centralisé : modifier la classe une fois modifie instantanément tous les éléments qui la portent. C’est l’outil adapté dès qu’un même style visuel doit se répéter, un bouton d’appel à l’action secondaire par exemple, ou un encadré de mise en avant utilisé dans plusieurs articles.
Le critère de décision : la probabilité de répétition
La règle pratique retenue ici : dès qu’un style est susceptible d’être réutilisé sur un deuxième élément, mieux vaut créer une classe dès le départ plutôt que dupliquer du Custom CSS. Recopier une règle Custom CSS d’un widget à l’autre revient à créer une dette technique invisible : le jour où le style doit changer, il faut le modifier sur chaque widget concerné individuellement, avec le risque d’en oublier un.
| Situation | Choix recommandé |
|---|---|
| Ajustement ponctuel sur un seul widget, jamais répété ailleurs | Custom CSS local |
| Style appliqué à plusieurs boutons ou encadrés du site | Classe réutilisable |
| Correctif urgent et temporaire en attendant une refonte | Custom CSS local |
| Style fondamental de la charte graphique (couleur, espacement) | Classe réutilisable ou variable globale |
Le piège du Custom CSS qui devient permanent
Un correctif écrit rapidement en Custom CSS, pour régler un problème d’affichage urgent avant une échéance, a tendance à rester en place indéfiniment une fois le problème résolu. Sur un projet suivi sur plusieurs années, il n’est pas rare de retrouver des dizaines de blocs Custom CSS dispersés sur autant de widgets différents, portant tous une variation du même ajustement, jamais consolidés en une classe unique faute de temps au moment de leur création.
Bonne pratique : revoir les Custom CSS lors d’une refonte
Lors d’une intervention de maintenance ou d’une refonte partielle, un passage en revue des blocs Custom CSS existants permet d’identifier les règles qui se répètent d’un widget à l’autre. Celles qui apparaissent sur plus de deux éléments méritent d’être converties en classe réutilisable, ce qui simplifie la maintenance future et réduit le risque d’incohérence visuelle entre deux éléments censés se ressembler.
Un Custom CSS qui dépasse deux occurrences identiques sur le même projet devrait toujours déclencher la question suivante : ne serait-il pas temps d’en faire une classe ?
Un cas intermédiaire : la classe locale à un projet
Entre le Custom CSS ponctuel et la classe globale partagée entre plusieurs projets, un cas intermédiaire mérite d’être mentionné : la classe créée spécifiquement pour un projet donné, réutilisée uniquement sur les pages de ce projet précis, sans vocation à être exportée dans un Kit générique. Ce type de classe reste préférable au Custom CSS dès qu’un style se répète au moins deux fois sur le même site, même si elle n’a pas la portée d’une classe pensée pour être partagée entre plusieurs clients.
En résumé
Le panneau Custom CSS d’Elementor convient parfaitement à un ajustement isolé, sans risque de collision avec le reste du site. Dès qu’un style est amené à se répéter, la classe réutilisable devient le choix le plus sûr pour la maintenance à long terme. Le seuil pratique retenu ici, deux occurrences, offre un repère simple pour trancher sans y réfléchir à chaque fois.
