Tu veux attirer l’attention sur tes promos, tes nouveautés ou tes actualités importantes ?
Le bandeau défilant est la solution pour capter le regard de tes visiteurs dès leur arrivée sur ton site avec un effet moderne et dynamique.
La bonne nouvelle ? Tu n’as besoin ni de plugin premium, ni de compétences en code pour le créer avec Elementor.
Dans ce tutoriel, tu vas apprendre à :
✅ Créer un bandeau défilant au scroll en moins de 5 minutes
✅ Le personnaliser entièrement (couleurs, vitesse, style)
✅ L’intégrer n’importe où sur ton site WordPress
Niveau requis : Débutant |Temps :5 minutes | Outil : Elementor (version gratuite suffisante)
Et si tu préfères le format vidéo, tu peux retrouver le tuto complet ici 👇
SOMMAIRE
Pourquoi ajouter un bandeau défilant sur ton site ?
Le bandeau défilant n’est pas qu’un simple effet visuel. C’est un outil de communication puissant pour :
- Communiquer efficacement
- Annoncer une promotion flash sans popup intrusive
- Partager tes dernières actualités
- Afficher tes labels et certifications
- Augmenter tes conversions
- Créer un sentiment d’urgence (« Plus que 24h ! »)
- Mettre en avant tes livraisons gratuites
- Promouvoir tes best-sellers
Si tu as un site e-commerce, les sites qui utilisent un bandeau défilant pour leurs promos constatent en moyenne une augmentation de 15% du taux de clic.
Un bandeau défilant au scroll, c’est un élément (souvent un texte ou une image) qui se déplace à une vitesse différente du reste de la page lorsque l’utilisateur scrolle.
Cet effet, qu’on appelle aussi “parallax horizontal”, crée une sensation de mouvement fluide et moderne.
C’est parfait pour ajouter une touche graphique subtile : un slogan qui glisse à l’écran, une accroche visuelle, ou même une ligne de logos partenaires encore.
Étape 1 : Créer la structure du bandeau
Ce dont tu as besoin :
- 1 section Elementor.
- 1 colonne
- 1 widget Texte ou liste d’icônes
Souvent, cet effet fonctionne très bien entre deux blocs de contenu, pour créer une transition fluide ou attirer le regard avant une partie importante.
Procédure :
Clique sur “+” pour ajouter une section.
Dans les réglages de la section, définis une hauteur minimum, par exemple 80 px (tu pourras l’ajuster ensuite selon ton design).
Dans l’onglet Style, ajoute un fond uni (ou une texture légère) pour bien distinguer ton bandeau du reste de la page.
Étape 2 : Ajouter ton texte défilant
Dans ta nouvelle section :
Clique sur “+” et ajoute un widget Titre (ou “Liste d’icônes” si tu veux plusieurs éléments alignés).
Écris ton texte principal, par exemple :
« Une cuisine moderne et authentique concoctée avec passion »
Pour créer un vrai effet de bandeau continu, répète ta phrase plusieurs fois sur la même ligne :
« Une cuisine moderne et authentique concoctée avec passion — Une cuisine moderne et authentique concoctée avec passion — Une cuisine moderne et authentique concoctée avec passion »
Astuce : garde la même longueur de phrase pour éviter les décalages lors du défilement.
Étape 3 : Styliser ton texte
Rends-toi dans l’onglet Style de ton widget Titre pour personnaliser ton texte :
Choisis une typographie lisible et impactante (sans-serif pour un look moderne, par exemple).
Ajuste la taille selon la hauteur de ton bandeau.
Mets une couleur contrastée avec le fond pour assurer une bonne visibilité.
Tu peux aussi ajouter une espacement de lettres pour renforcer l’effet graphique.
Étape 4 : Ajuster la mise en page
Avant de publier, quelques petits réglages de finition :
Dans Avancé → Marges, décoche “Lier les valeurs” et mets une marge négative à gauche et à droite (ex.
-1000 px) pour que ton texte dépasse un peu du cadre.Assure-toi que ton conteneur est centré verticalement dans la section.
Vérifie que ton texte reste lisible et fluide sur tous les écrans.
Sur mobile, pense à réduire la taille de la typo ou la hauteur de la section pour éviter que le texte soit coupé.
Étape 5 : Créer le mouvement défilant
C’est ici que la magie opère
Sélectionne ton widget Titre (et non la section complète).
Va dans l’onglet Avancé → Effets de mouvement.
Active l’option Effet de défilement.
Clique sur le stylo à côté de “Effet de défilement horizontal”.
Choisis le sens du défilement (vers la gauche ou vers la droite).
Ajuste la vitesse selon ton rendu préféré (une vitesse trop élevée peut donner le tournis, alors vas-y mollo 😅).
Tu peux aussi choisir sur quels appareils appliquer l’effet (ordinateur, tablette, mobile).
Pour un site fluide, je te conseille de le désactiver sur mobile si ton texte est trop long.
Étape 6 : Teste et publie ton bandeau défilant !
Tu peux maintenant scroller ta page : ton bandeau défile doucement à mesure que tu descends.
Teste différentes vitesses, couleurs et messages pour trouver ce qui convertit le mieux sur ton site.
Quand tout te convient, clique sur Publier.
Et surtout, pense à vérifier que les modifications ne perturbent pas ton design sur tablette et desktop.
En moins de 5 minutes, tu obtiens un effet moderne, fluide et impactant sans une seule ligne de code.
Prêt(e) à lancer ton site pro sans te ruiner ni attendre 3 mois ?
Je propose des templates WordPress Elementor spécialement conçus pour les petites entreprises. Des designs pensés pour convertir, pas juste pour être jolis.
Voici comment ça marche :
- Tu choisis ton template parmi mes créations
- Tu me fournis ton contenu (textes, photos, infos)
- Je m’occupe de toute l’intégration et la personnalisation
- En 1 à 2 semaines, ton site est en ligne
Résultat : Un site professionnel, rapide, optimisé, et qui te ressemble. Sans stress.
