Ajoutez du style et de l’interactivité à votre site Web
Effets visuels, galeries, widgets de RDV, animations…
Personnalisables • Intégration ultra-simple • Performance • SEO-friendly
Sur WordPress, tu as 2 routes simples : sur une page (bloc HTML personnalisé dans Gutenberg ou widget HTML Elementor), ou sur tout le site (injection header/footer). Pour le CSS, le plus propre reste le CSS additionnel : c’est net, réversible, et compatible mobile.
Objectif : coller au bon endroit (page ou global), éviter les doublons, et pouvoir désactiver en 10 secondes — même si WordPress décide de “mettre en cache” ton enthousiasme.
Vidéo en français : la méthode la plus simple pour coller un snippet HTML dans une page ou un article WordPress, via l’éditeur Gutenberg (bloc “HTML personnalisé”).
Vidéo en français : intégrer du HTML dans WordPress pas à pas. Pratique si vous voulez juste coller un code et vérifier le rendu rapidement.
Vidéo en français : où trouver le widget HTML, où coller votre snippet, et comment vérifier le rendu sur la page.
Vidéo en français : où modifier le Header / Footer avec Elementor Pro, et comment gérer un ajout global propre (sans doublons).
Vidéo en français : où coller du CSS additionnel dans WordPress (méthode propre), et comment vérifier les changements sans se faire piéger par le cache.
Vidéo en français : comprendre où placer le CSS, pourquoi ça ne s’applique pas toujours tout de suite, et comment éviter les conflits avec le thème.
Vidéo en français : où écrire du Custom CSS dans Elementor (par widget/section), pour styliser un snippet HTML sans toucher au thème.
Vidéo en français : comprendre les réglages globaux (styles / typographies / cohérence), et quand passer en Custom CSS ciblé.
Ces effets s’intègrent facilement dans WordPress : sur une page (bloc “HTML personnalisé” Gutenberg ou widget HTML Elementor) ou en global (header/footer). Vous collez le code au bon endroit, l’animation s’affiche là où vous le décidez — et se retire en 10 secondes.
Une animation neige fluide, parfaite pour WordPress. Elle peut s’afficher sur une page précise (accueil, article, page produit) via Gutenberg/Elementor, ou en global si vous voulez une ambiance sur tout le site — sans casser votre mise en page.
Voir la page Effet NeigeParfait pour une promo, un lancement ou une page “événement”. Sur WordPress, vous l’intégrez sur la page que vous voulez (bloc HTML / Elementor), ou vous le déclenchez globalement — l’idée, c’est de garder le contrôle et d’éviter l’effet “confettis partout”.
Voir la page Effet ConfettisUn décor saisonnier en superposition : coins festifs, cadres et éléments graphiques. Sur WordPress, le script peut être ajouté sur une page ou sur tout le site (header/footer). Le décor se superpose au-dessus du contenu, sans toucher à vos blocs existants.
Voir la page Décor NoëlSur WordPress, le test se fait en 2 minutes. Configurez l’effet dans le panneau Scripts-HTML, copiez le code, puis collez-le sur une page via le bloc “HTML personnalisé” (Gutenberg) ou le widget HTML (Elementor). L’animation s’affiche sur la page ciblée, sans toucher à votre thème, et sans modifier votre mise en page. Idéal pour valider le rendu (desktop + mobile) avant de l’activer sur d’autres pages — ou en global via header/footer.
Sur WordPress, quand “ça ne marche pas”, c’est rarement le code : c’est presque toujours un mauvais emplacement, un cache, ou un doublon. Voici les classiques.
Le code est collé dans le mauvais bloc. Sur WordPress, collez-le dans un bloc “HTML personnalisé” (Gutenberg) ou un widget HTML (Elementor) — pas dans un bloc “Paragraphe”. Vérifiez aussi que vous avez bien mis à jour / publié la page.
Le script a été ajouté en global (header/footer ou injection du thème). Pour cibler une seule page, collez le code uniquement dans la page concernée. Si vous utilisez Elementor Pro “Custom Code”, vérifiez les conditions d’affichage.
Le code est présent à deux endroits (page + global, ou deux widgets/blocs). Gardez une seule instance du script, et supprimez l’autre : WordPress adore le “copier-coller x2” quand on panique.
Un plugin de cache/minification peut servir une ancienne version. Videz le cache du site, puis faites un Ctrl+F5 (ou testez en navigation privée). Si besoin, désactivez temporairement l’optimisation pour valider le rendu.
Quand un effet HTML ou du Custom CSS ne fonctionne pas dans Elementor Pro, ce n’est presque jamais le script : c’est l’emplacement, le cache ou la logique Elementor.
Vérifiez que le code est bien collé dans un widget HTML (et pas dans un widget Texte). Rafraîchissez la page côté visiteur, pas uniquement dans l’éditeur.
Le Custom CSS est disponible uniquement avec Elementor Pro. Vérifiez aussi que le CSS est attaché au bon widget / section et que vous ciblez une classe réellement présente.
Allez dans Elementor → Outils → Régénérer les fichiers et données. Elementor génère ses propres fichiers CSS : s’ils ne sont pas à jour, le style peut disparaître.
Le code a été ajouté via Custom Code ou un template global sans condition d’affichage. Vérifiez les conditions Elementor et limitez l’affichage aux pages nécessaires.
Le script est présent à deux endroits : widget HTML + Custom Code, ou page + template global. Gardez une seule instance du script.
Videz le cache Elementor et le cache WordPress / serveur, puis rechargez la page avec Ctrl+F5. Elementor aime parfois garder ses souvenirs un peu trop longtemps.
L’éditeur Elementor n’est pas le rendu final. Testez toujours la page publiée, sans être connecté, pour valider le comportement réel.
Questions fréquentes pour intégrer du code sur WordPress (éditeur Gutenberg), ajouter du CSS proprement, et éviter les pièges classiques (cache, doublons, mauvais emplacement).