Comment ajouter du CSS personnalisé dans Elementor ?

Elementor permet de tout régler avec des boutons et des curseurs : couleurs, marges, polices, bordures… Mais il arrive qu’un détail précis ne soit pas prévu : un effet au survol particulier, une ombre sur un élément qui n’en propose pas, un ajustement sur un seul écran. C’est là qu’intervient le CSS personnalisé. Pas de panique : même sans être développeur, vous pouvez vous en servir pour de petites retouches.

Comment se lit une règle CSS

Le CSS est le langage qui décrit l’apparence d’une page web. Une règle CSS se lit comme une phrase : « à cet élément, applique ce style ».

selector {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

selector : l’élément visé (on y revient juste après) ;
entre accolades, une ou plusieurs propriétés (border-radius = coins arrondis, box-shadow = ombre) ;
chaque propriété se termine par un point-virgule. Un point-virgule oublié est l’erreur la plus fréquente.

Avant de commencer

Le champ Custom CSS fait partie d’Elementor Pro.
Un principe à garder en tête : si un réglage existe dans le panneau d’Elementor, utilisez le réglage, pas le CSS. Le CSS sert pour ce qui n’est pas prévu.

Où écrire son CSS

Endroit	Où le trouver	Portée
Un élément (éditeur classique)	onglet Advanced › Custom CSS de l’élément	cet élément seulement
Un élément (Elementor v4)	onglet Style › Custom CSS	la classe, l’état (normal, survol…) et l’appareil sélectionnés
Tout le site	réglages du site Elementor (Site Settings) › Custom CSS	toutes les pages

Le mot-clé « selector »

Dans le champ Custom CSS d’un élément, inutile de connaître son nom technique : le mot selector (sans point devant) le désigne automatiquement.

Une subtilité à connaître : selector vise l’enveloppe de l’élément, pas son contenu. Faites le test :

Ajoutez un widget Image.
Dans son Custom CSS, tapez : selector { border: 5px solid red; }
La bordure rouge entoure… le cadre autour de l’image, pas l’image elle-même.
Remplacez par : selector img { border: 5px solid red; }
Cette fois, c’est l’image qui a la bordure : on a précisé « l’image (img) à l’intérieur de l’élément ».

Même principe pour un bouton : selector .elementor-button { … } vise le bouton lui-même, et non son cadre.

Exemples prêts à copier

Une image qui grossit légèrement au survol

selector img {
  transition: transform .3s ease;
}
selector:hover img {
  transform: scale(1.05);
}

Un texte limité à 3 lignes

selector p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Un style seulement sur mobile

Une requête média applique des règles seulement sous une certaine largeur d’écran :

@media (max-width: 767px) {
  selector {
    padding: 12px;
  }
}

Avec Elementor v4, vous pouvez aussi simplement choisir l’appareil (icône mobile) avant d’écrire votre CSS.

Utiliser une classe pour plusieurs éléments

Si vous voulez le même style sur dix boutons, ne copiez pas le même CSS dix fois. Donnez-leur une classe :

Sur chaque bouton, onglet Advanced › CSS Classes, tapez un nom, sans point : bouton-jaune.
Dans le CSS du site (Site Settings › Custom CSS), écrivez la règle une seule fois, avec un point devant le nom :

.bouton-jaune .elementor-button {
  background-color: #ffd400;
  color: #000;
}

Si la règle ne s’applique pas, c’est qu’un réglage d’Elementor est prioritaire. Vous pouvez forcer avec !important (background-color: #ffd400 !important;), mais avec parcimonie : à force de forcer, on ne sait plus quelle règle gagne.

Trouver le nom d’un élément

Pour viser un élément à l’intérieur d’un widget, il faut connaître son nom de classe (comme .elementor-button). Sur votre site, faites un clic droit sur l’élément › Inspecter : le code de la page s’affiche, avec les classes de l’élément survolé. Avec un peu d’habitude, on s’y retrouve très bien.

Les bonnes pratiques

Réglage d’abord, CSS ensuite : un site rempli de CSS est difficile à reprendre, pour vous comme pour un prestataire.
Centralisez les styles qui servent plusieurs fois dans le CSS du site, avec des classes.
Commentez chaque règle : /* Ombre des cartes de services, demandée le 12/03 */.
Vérifiez après chaque mise à jour d’Elementor : les noms de classes internes peuvent évoluer.
Un CSS invalide peut provoquer des problèmes ailleurs (polices, mise en page). En cas de bug d’affichage, commencez par retirer le CSS ajouté récemment.
Avec Elementor AI, vous pouvez aussi faire générer du CSS à partir d’une description : relisez-le toujours (voir Elementor AI).

Questions fréquentes

Mon CSS ne fonctionne pas

Vérifiez dans l’ordre : un point-virgule ou une accolade manquante, le bon élément visé (enveloppe ou contenu ?), une règle d’Elementor plus prioritaire, et le cache (videz-le).

Je n’ai pas Elementor Pro, où mettre mon CSS ?

WordPress propose un champ CSS additionnel pour tout le site, dans l’outil de personnalisation du thème (Apparence › Personnaliser, selon votre thème). Vous n’aurez pas le raccourci selector : il faudra viser l’élément par une classe.

Lien affilié : si vous achetez Elementor Pro via un lien de cette page, Expertor perçoit une commission, sans surcoût pour vous.

Ajouter du CSS personnalisé dans Elementor