4.5CSS personnalisé & attributs
L'essentiel en 30 secondes
- Le CSS personnalisé (Pro) ajoute du code sur un élément/la page, pour les cas avancés non couverts par l'interface.
- Les classes et attributs personnalisés aident à cibler et réutiliser des styles.
- Règle : un complément, pas le mode normal ; trop de CSS éparpillé nuit à la maintenabilité.
Mini-cas filé — Nadia pour une finition
Nadia veut un petit effet précis sur un bouton que l'interface ne propose pas. Plutôt que de bricoler, elle ajoute deux lignes de CSS ciblées via une classe réutilisable. Elle résiste à la tentation de tout coder : 95 % du site se fait à l'interface, le CSS reste l'exception pour les finitions.
Dernière section du niveau 4 — la touche finale, avec mesure.
1. CSS, classes, attributs
Elementor Pro permet d'ajouter du CSS personnalisé (onglet Avancé → CSS personnalisé) sur un élément ou pour toute la page : utile pour un réglage fin que l'interface ne propose pas. Les classes CSS ajoutées à des éléments permettent de les cibler en CSS et de réutiliser un style. Les attributs personnalisés (paires clé/valeur) ajoutent des attributs HTML, par exemple pour une intégration tierce.
Nadia crée une classe « btn-devis » et y applique son petit effet : réutilisable sur tous les boutons concernés.
2. Un complément, pas le mode normal
Point crucial : le CSS et les attributs sont un complément pour les cas avancés — pas la façon normale de travailler. L'immense majorité du design se fait à l'interface (Style, Avancé, charte globale).
Ne pas abuser : trop de CSS personnalisé éparpillé rend le site difficile à maintenir (on ne sait plus où est quoi). Préférer les classes réutilisables et commenter le code. Nadia garde le CSS rare, ciblé et documenté.
🔎 Exemple concret — Un effet précis, réutilisable (cas Nadia)
Classe : btn-devis
CSS personnalisé (ciblé) :
selector:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
→ Appliquer la classe « btn-devis » aux boutons concernés.
→ Réutilisable, documenté, et l'interface gère le reste.Résultat : une finition précise, propre et réutilisable.
Leçon : CSS en complément, via des classes.
Vocabulaire de la section
- CSS personnalisé (Pro)
- Ajouter du CSS sur un élément ou la page pour un réglage fin non couvert par l'interface.
Exemple simple : un effet de survol précis sur un bouton.
Ce que ce n'est pas : tout styliser en CSS alors que l'interface suffit.
Réflexe : CSS seulement quand l'interface ne suffit pas.
- Classes CSS
- Des classes ajoutées aux éléments pour les cibler et réutiliser un style.
Exemple simple : classe « btn-devis » appliquée à plusieurs boutons.
Ce que ce n'est pas : copier le même CSS sur chaque élément.
Réflexe : style réutilisé → classe, pas copier-coller.
- Attributs personnalisés
- Des paires clé/valeur ajoutant des attributs HTML (ex. pour une intégration).
Exemple simple : un attribut requis par un script tiers.
Ce que ce n'est pas : ajouter des attributs au hasard.
Réflexe : attribut si un service l'exige.
- Complément, pas mode normal
- Le CSS/les attributs servent les cas avancés ; l'essentiel se fait à l'interface.
Exemple simple : 95 % à l'interface, CSS pour la finition.
Ce que ce n'est pas : recoder en CSS ce que l'interface propose.
Réflexe : interface d'abord, CSS en dernier recours.
- Maintenabilité
- Trop de CSS éparpillé rend le site difficile à maintenir.
Exemple simple : CSS rare, regroupé par classes, commenté.
Ce que ce n'est pas : des bouts de CSS partout, sans logique.
Réflexe : documenter et centraliser le CSS.
En pratique — Ajouter une finition CSS proprement
- Identifiez un réglage précis non couvert par l'interface.
- Créez une classe réutilisable et appliquez-y un CSS ciblé.
- Appliquez la classe aux éléments concernés (plutôt que du CSS copié partout).
- Commentez le CSS et vérifiez que l'essentiel reste géré à l'interface.
Script prêt à dire — cadrer l'usage du CSS (20 s)
« Presque tout votre site est construit visuellement, ce qui le rend facile à faire évoluer. Pour deux ou trois finitions précises, j'ajoute un peu de code ciblé et documenté — sans en abuser, pour que le site reste simple à maintenir dans le temps. »
Rassurer : le CSS reste l'exception, le site reste maintenable.
Modèle copier-coller — note CSS
BESOIN AVANCÉ (non couvert par l'interface) : _______________
CLASSE RÉUTILISABLE : _______________
CSS (ciblé, commenté) : _______________
APPLIQUÉ VIA LA CLASSE (pas copié partout) : oui / non
L'ESSENTIEL RESTE À L'INTERFACE : oui / nonFinition unique
Un effet précis sur un élément : CSS ciblé, documenté.
Style réutilisé
Une classe appliquée à plusieurs éléments semblables.
Intégration tierce
Un attribut requis par un script externe.
Débutant
Rester à l'interface : le CSS viendra pour de vrais besoins avancés.
✓ Bonnes pratiques
- Utiliser le CSS en complément, pas par défaut.
- Préférer des classes réutilisables.
- Commenter et centraliser le CSS.
✗ Pièges fréquents
- Recoder en CSS ce que l'interface fait déjà.
- Du CSS éparpillé non documenté.
- Copier le même CSS au lieu d'une classe.
Points clés à retenir
- CSS personnalisé (Pro) = cas avancés.
- Classes = cibler et réutiliser.
- Attributs = exigences d'intégration.
- Complément à l'interface, documenté et rare.
Défi 48h — appliquez demain
Créez une classe réutilisable avec un petit CSS ciblé (ex. effet de survol), appliquez-la à plusieurs boutons, commentez le code, et vérifiez que le reste du design passe par l'interface. 20 minutes.
- J'utilise le CSS en complément ciblé.
- Je crée des classes réutilisables.
- Je documente et centralise mon CSS.
Questions fréquentes
Dois-je apprendre le CSS pour utiliser Elementor ?
Non pour l'essentiel : 95 % se fait à l'interface. Le CSS personnalisé est un complément pour des finitions avancées ; quelques bases aident, mais ne sont pas indispensables au départ.
À quoi servent les classes CSS ?
À cibler des éléments et réutiliser un style : on applique la même classe à plusieurs éléments plutôt que de copier le même code partout — plus propre et maintenable.
Le CSS personnalisé peut-il poser problème ?
En excès et éparpillé, oui : le site devient difficile à maintenir. Gardez-le rare, regroupé en classes et commenté ; faites l'essentiel à l'interface.
Nadia a besoin d'un petit effet qu'Elementor ne propose pas dans l'interface. Quelle est la bonne approche ?