Comment créer un effet scroll animé avec Elementor ?

Tutoriel : créer l’effet d’empilement animé dans Elementor

1. Créer la structure de base

Commencez par ajouter un conteneur principal dans votre page Elementor.

• Passez-le en disposition horizontale

• Dupliquez la section pour créer vos deux colonnes

• À l’intérieur du premier conteneur, ajoutez :

  • un bouton

  • un titre

  • une description

👉 Cela constituera la première “carte” de votre animation.

Pensez à ajouter un conteneur supplémentaire à l’intérieur : c’est dans celui-ci que vous placerez les éléments (titre, texte, bouton).

2. Créer les conteneur qui vont s’empiler

Une fois votre première carte créée :

• Dupliquez-la autant de fois que nécessaire

• Passez le second conteneur en disposition verticale

• Déplacez vos cartes dans ce conteneur vertical

Pour chaque carte :

• Définissez une hauteur fixe (ex. : 350 px)

• Personnalisez votre design : couleur de fond, bordures, rayon de bordure…

Vous pouvez ensuite ajouter un appel à l’action (bouton “Prendre rendez-vous”, par exemple).
N’hésitez pas à tester sa position : en bas, dans une carte, ou en dehors.

3. Ajouter le HTML contenant le code

Sous vos cartes, ajoutez un widget HTML dans lequel vous collez le code fourni au début de l’article.

Ce code permet justement de gérer l’effet de superposition au scroll.

4. Appliquer les classes CSS à chaque carte

Pour que l’effet fonctionne, vous devez assigner les classes CSS correctement :

• Sélectionnez votre première carte

• Dans Avancé → Classe CSS, entrez :
  work-card one

• Faites la même chose pour les autres :
  work-card two, work-card three, work-card four, etc.

En chargeant la page, vous verrez vos cartes s’empiler lors du scroll effet garanti !

5. Rendre la section sticky

Enfin, il faut fixer l’ensemble pour que les cartes puissent s’empiler dans la zone voulue.

• Sélectionnez le conteneur parent

• Dans Avancé → Classe CSS, ajoutez :
  work-content

Cela permet d’assurer le bon comportement sticky de la section, comme montré dans la vidéo.

Votre effet de scroll animé est prêt !

L’animation est désormais en place : fluide, moderne et surtout sans Elementor Pro.

Cet effet peut s’utiliser dans de nombreux cas :

• Présentation de services

• Mise en avant de fonctionnalités

• Timeline, storytelling, contenus pédagogiques

• Aperçus informatifs (textes, images, icônes…)

N’hésitez pas à expérimenter, notamment sur la position du bouton d’appel à l’action pour optimiser les conversions.

Si vous avez aimé le tutoriel, pensez à consulter la vidéo complète et à tester l’effet sur vos prochaines pages !

Pourquoi utiliser cet effet sur votre site ?

Mettre en valeur vos services de manière claire

Cet effet d’empilement permet de présenter vos services ou vos étapes de manière structurée et progressive, ce qui facilite la lecture et améliore la compréhension. Au lieu d’un simple bloc vertical, le visiteur découvre les informations au fur et à mesure du scroll, ce qui renforce l’attention et donne une impression de site plus moderne et mieux travaillé.

Améliorer l’expérience utilisateur et la conversion

Ce type d’animation rend la page plus dynamique sans la surcharger. Il encourage l’utilisateur à rester plus longtemps sur votre site et à parcourir l’intégralité de la section, ce qui peut améliorer vos performances globales. C’est également une bonne manière de préparer un appel à l’action et d’orienter le visiteur vers une prise de contact, une demande de devis ou l’un de vos services.