selector:hover { transform: translateY(-4px); } : une seule ligne, et l’effet de survol d’une carte est en place. C’est le genre de tâche pour laquelle le générateur de code d’Elementor AI est utile, et le genre de ligne qui, un an plus tard, pose une question à l’agence qui reprend le site : d’où vient-elle, et pourquoi la carte d’à côté ne bouge pas ? Cet article, deuxième de la série « IA et constructeurs de pages », traite uniquement du CSS généré, pas des mises en page.
Ce que le générateur fait réellement
La documentation d’Elementor décrit l’outil ainsi : dans le panneau de CSS personnalisé d’un élément, un bouton d’IA permet de décrire l’effet voulu, puis de relire le code proposé avant de l’insérer. La fonction relève de la version Pro. Elementor recommande d’employer le mot-clé selector dans la consigne : sans lui, la règle risque de ne pas viser l’élément voulu. Le blog d’Elementor précise que l’outil écrit du CSS en tenant compte de la structure de classes propre à Elementor et reste limité à la couche de présentation, pas au PHP.
Concrètement, vous obtenez des règles de survol, des transitions, des pseudo-éléments décoratifs, parfois des requêtes média. Chaque génération consomme des crédits du stock mensuel, sans que je puisse vous donner un barème fiable : les pages d’Elementor ne le présentent pas de façon cohérente (voir l’article précédent de la série).
Par prudence, enregistrez la page avant d’insérer du code généré : il peut entrer en conflit avec des styles existants. Ce réflexe dit l’essentiel : le résultat est une proposition, pas un correctif validé.
Un cas concret : la carte qui se soulève
Consigne saisie dans le panneau de CSS personnalisé d’un conteneur : « au survol, soulever légèrement la carte et renforcer l’ombre ». Une réponse typique ressemble à ceci :
selector {
transition: transform .3s ease, box-shadow .3s ease;
}
selector:hover {
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}La syntaxe est valide et l’effet fonctionne. Mais trois défauts sont fréquents sur ce type de sortie, et aucun n’est propre à l’IA : un humain pressé écrirait la même chose.
- Aucune prise en compte de la préférence de réduction des animations.
- Une ombre écrite en dur, sans lien avec la charte du site.
- Une valeur de décalage arbitraire, recopiée à la main sur les autres cartes, donc qui dérive.
Les pièges de maintenance
Les sélecteurs fragiles. Si vous demandez d’agir sur le titre à l’intérieur de la carte, le code généré cible souvent une classe interne comme .elementor-heading-title ou un enfant direct. La structure interne des widgets a évolué d’une version d’Elementor à l’autre : une mise à jour peut décaler le rendu sans aucun message d’erreur. Préférez cibler le moins de niveaux possible.
Les doublons avec le système de conception. Une couleur saisie en hexadécimal dans le CSS n’est pas liée aux couleurs globales du site. Les couleurs globales d’Elementor sont exposées sous forme de variables CSS, de la forme var(--e-global-color-primary) ; les utiliser dans la consigne (« utilise la couleur globale principale ») évite qu’un changement de charte oublie ces règles. Dans l’éditeur V4, le CSS personnalisé peut aussi s’attacher à une classe globale plutôt qu’à un élément : c’est l’endroit à privilégier dès qu’un effet doit se répéter, plutôt que de copier le même bloc sur dix éléments.
La dispersion. Le code vit dans les réglages de chaque élément, pas dans un fichier. Sur un site de trente pages, personne n’a la liste. Une exploration par ligne de commande aide ; le nom de la clé dépend de votre version d’Elementor, vérifiez-le d’abord sur un élément connu :
wp post meta get 123 _elementor_data | grep -c "custom_css"Si le résultat n’est pas nul, la page contient du CSS propre à des éléments ; ouvrez-la et inventoriez-le.
Un CSS sans commentaire est un CSS dont l’auteur est parti avec l’explication.
Une méthode de reprise en quatre gestes
- Relire chaque règle générée et supprimer ce qui n’est pas demandé.
- Remplacer les valeurs en dur par des variables du site.
- Ajouter une requête
prefers-reduced-motionpour les transitions. - Laisser un commentaire indiquant la date, l’outil et la consigne d’origine.
Version corrigée de notre carte :
/* Carte soulevée au survol - consigne IA du 2026-10-02, relue */
selector {
transition: transform .3s ease, box-shadow .3s ease;
}
selector:hover {
transform: translateY(-6px);
box-shadow: 0 12px 28px color-mix(in srgb, var(--e-global-color-primary) 25%, transparent);
}
@media (prefers-reduced-motion: reduce) {
selector, selector:hover { transition: none; transform: none; }
}La fonction color-mix() est reconnue par les navigateurs récents ; si vous devez prendre en charge des versions anciennes, gardez une valeur de repli.
Quand ne pas utiliser le générateur
N’y recourez pas pour des réglages qui relèvent du site entier (typographie, espacements, couleurs) : ils appartiennent aux styles globaux. N’y recourez pas non plus quand l’effet doit se répéter sur de nombreux éléments : créez une classe. Enfin, si vous savez déjà écrire la règle, l’écrire vous-même coûte moins que la formuler, la relire et la corriger.
Conclusion
Le générateur de CSS est un bon accélérateur pour l’effet isolé, à condition de traiter sa sortie comme un brouillon : moins de niveaux de sélecteur, variables du site, commentaire daté. Le gain de quelques minutes à la création ne doit pas devenir une dette pour celui qui reprend le projet. Le mode d’emploi officiel est décrit dans l’aide d’Elementor : ajouter du CSS personnalisé avec Elementor AI.
