Tu veux ajouter un effet de texte défilant à l’infini sur ton site WordPress pour capter l’attention de tes visiteurs ? Que ce soit pour annoncer une promotion, mettre en avant un service ou dynamiser la présentation de ton site, ce type d’effet visuel apporte une vraie valeur à ta création de site internet. C’est le genre de détail qui peut améliorer l’expérience utilisateur et renforcer ton référencement SEO.
Bonne nouvelle : pas besoin d’installer un plugin, tu peux l’ajouter facilement avec un peu de code HTML et CSS, idéal si tu gères la maintenance de ton site web ou la refonte de ton site WordPress.
Voici comment mettre en place un texte défilant sur ton site, que tu sois débutant ou déjà à l’aise avec la création web.
Avant de rentrer dans la technique, voici un exemple visuel de ce que tu pourras obtenir sur ton site WordPress.
Ce texte va défiler de la droite vers la gauche de manière fluide et continue. Tu pourras évidemment personnaliser le contenu, les couleurs et la vitesse du défilement selon tes besoins.
Voici l’exemple du code simple pour un texte qui défile de droite à gauche en boucle et inversement.
En suivant cette méthode, tu peux facilement capter l’attention de tes visiteurs sans compromettre la lisibilité de ton contenu. Et comme on dit : ce qui est fait n’est plus à faire
.marquee {
overflow: hidden;
display: flex;
}
.marquee div{
white-space: nowrap;
}
<script>
function Marquee(selector, speed) {
const parent = document.querySelector(selector);
const clone = parent.innerHTML;
let i = 0;
parent.innerHTML += clone;
setInterval(() => {
i += speed;
if (i >= parent.children[0].clientWidth) i = 0;
parent.children[0].style.marginLeft = `-${i}px`;
}, 0);
}
window.addEventListener('load', () => Marquee('.marquee', .5));
</script>
.marquee2 {
overflow: hidden;
display: flex;
}
.marquee2 div{
white-space: nowrap;
}
<script>
function Marquee2(selector, speed) {
const parent = document.querySelector(selector);
const clone = parent.innerHTML;
let i = parent.children[0].clientWidth;
parent.innerHTML += clone + clone;
const totalWidth = parent.children[0].clientWidth * 2;
setInterval(() => {
i -= speed;
if (i <= 0) i = totalWidth;
parent.children[0].style.marginLeft = `-${i}px`;
}, 0);
}
window.addEventListener('load', () => Marquee2('.marquee2', .5));
</script>
Le texte défilant est un excellent moyen d’éveiller la curiosité ou de mettre en avant une information sans surcharger visuellement la page. Utilisé avec parcimonie, il attire le regard tout en ajoutant une touche de dynamisme à ton interface.
Ce type d’effet est souvent utilisé pour :
Afficher des offres promotionnelles en boucle
Mettre en avant une actu ou une info urgente
Créer un bandeau dynamique en entête ou en bas de page
Attention toutefois à ne pas en abuser, au risque de nuire à l’expérience utilisateur. Un seul bandeau bien placé suffit largement.
Si tu travailles avec Elementor, tu n’as besoin que de deux widgets pour créer cet effet :
Le widget Titre (Heading) pour afficher le texte qui défile
Le widget HTML pour insérer le script qui gère l’animation
Voici la marche à suivre :
Ajoute un widget Titre sur ta page.
Dans les options de style du widget, ouvre l’onglet Avancé > CSS personnalisé (Elementor Pro requis).
Colle le code CSS correspondant à l’effet souhaité (défilement de gauche à droite ou inversement).
Ajoute un widget HTML juste en dessous du titre.
Colle dans ce widget le code JavaScript associé au défilement.
Et voilà, ton texte commence à défiler automatiquement après le chargement de la page.
Tu peux choisir entre deux directions de défilement selon l’effet souhaité :
Défilement de droite vers la gauche : effet classique de bandeau d’information.
Défilement de gauche vers la droite : moins courant, mais tout aussi visible.
Dans les deux cas, tu n’as qu’à adapter les sélecteurs CSS et les fonctions JavaScript au widget que tu utilises.
Oui, l’effet est entièrement responsive. Il fonctionne sur tous les appareils car il repose sur des bases simples : CSS pour le style, JavaScript pour le mouvement.
Quelques conseils pour une bonne intégration mobile :
Garde un texte court et lisible
Évite les polices trop petites ou les vitesses trop rapides
Teste toujours sur plusieurs tailles d’écran
Ton message doit rester compréhensible même lorsqu’il défile.
Non. Avec Elementor, tout est déjà intégré. En utilisant les widgets de base (Titre + HTML) et en collant un peu de code, tu obtiens le résultat sans alourdir ton site avec un plugin supplémentaire.
Cela garantit :
Une meilleure performance
Un chargement plus rapide
Une maintenance simplifiée
Moins tu ajoutes d’extensions, plus ton site reste stable et rapide.
Je me suis d’abord lancé comme freelance, créant mes premiers sites WordPress en 2022 et me formant progressivement au SEO et au design web. Fin 2023, j’ai fondé Agence web armor, pour accompagner les entreprises dans leur présence en ligne. Aujourd’hui, je conçois des sites simples, rapides et bien référencés, pensés pour attirer des visiteurs qualifiés et générer des résultats concrets.
