Comment créer un effet de parallaxe dans Elementor | 3 façons

L'effet de parallaxe dans Elementor est une caractéristique de conception qui fait que l'arrière-plan se déplace à une vitesse différente de celle du contenu de premier plan pendant le défilement. Il crée une impression de profondeur et de mouvement sur la page web.

Pour créer un effet de parallaxe dans Elementor, ouvrez la page où vous souhaitez obtenir l'effet et sélectionnez l'élément. Allez à Style > Contexteajoutez votre image. Ensuite, rendez-vous sur Avancé > Effets de mouvement et allumer Effets de défilement ou Effet de souris. A partir de là, réglez les paramètres de défilement, la vitesse et personnalisez selon vos besoins.

Dans ce blog, je vais vous montrer 3 façons différentes d'ajouter un effet de parallaxe dans votre site Elementor. 

1. Effets de parallaxe pour les éléments web
2. Effets de parallaxe pour l'arrière-plan.
3. Effet de parallaxe avec personnalisation avancée

Alors, commençons.

Comment créer un effet de parallaxe avec Elementor | 3 façons

Il existe deux façons principales d'ajouter des effets de parallaxe dans Elementor. La première consiste à appliquer des effets de parallaxe aux éléments web et la seconde à utiliser des effets de parallaxe sur les sections d'arrière-plan. 

Ces deux options ne sont disponibles que dans Elementor Pro, vous aurez donc besoin de la version Pro pour les utiliser.

Voici comment créer un effet de parallaxe à l'aide de Elementor, étape par étape.

1. Créer un effet de parallaxe sur un élément Web

L'effet de parallaxe sur un élément Web se produit lorsqu'une section, une colonne ou un widget se déplace différemment du reste de la page, créant ainsi de la profondeur et du mouvement. Comme il s'agit d'une fonctionnalité pro de Elementor, nous utiliserons ici Elementor Pro.

Voyons donc comment procéder.

Étape 1 : Ajouter une page et la modifier avec Elementor

Tout d'abord, ouvrez une nouvelle page ou une page existante sur votre site. Cliquez ensuite sur "Edit with Elementor" pour utiliser la parallaxe sur les éléments de la page.

Étape 2 : Choisir un élément pour ajouter la parallaxe

Sélectionnez ensuite la section, la colonne ou le widget où vous souhaitez appliquer l'effet de parallaxe.

Étape 3 : Activer les effets de défilement

Ici, vous devez tout d'abord activer l'effet de défilement. Avancé dans le panneau de gauche et faites défiler vers le bas pour ouvrir l'onglet Effets de mouvement des paramètres. 

Vous trouverez ensuite des options pour les effets de défilement et les effets de souris. Il suffit d'activer les options Effets de défilement basculer.

Étape 4 : Personnaliser le défilement

Désormais, vous pouvez facilement personnaliser chaque effet en fonction de vos besoins. Il vous suffit de cliquer sur le bouton icône de crayonet un panneau de configuration s'ouvre avec toutes les commandes.

À partir de là, vous pouvez affiner la direction, la vitesse et la fenêtre de visualisation, en décidant exactement quand l'animation commence et quand elle se termine. 

Vous pouvez également définir l'échelle de la fenêtre de visualisation pour spécifier à quel point du défilement l'effet doit commencer et à quel point il doit s'arrêter.

Par exemple, ici, j'applique l'effet de défilement horizontal en cliquant sur l'icône du crayon dans l'option Défilement horizontal pour créer un tel effet. 

• Direction : Droite
• Vitesse : 4,8
• Fenêtre de visualisation (en haut) : 38%
• Fenêtre de visualisation (en bas) : 75%

Conseil de pro : Pour un aspect plus dynamique, vous pouvez combiner plusieurs animations sur un seul élément. Cette étape est totalement facultative et dépend principalement de la conception de votre site. Toutefois, les animations parallaxes multiples vous permettent de créer des effets en couches qui se démarquent.

Étape 5 : Activer l'effet de souris pour l'élément web

Vous devez maintenant activer la parallaxe basée sur la souris pour que l'élément bouge légèrement lorsque vous déplacez le curseur. 

Tout d'abord, activez l'effet de souris et, à l'aide de l'icône du crayon, personnalisez et réglez la trajectoire de la souris et l'inclinaison 3D.

Par exemple, pour l'effet d'inclinaison 3D, j'ai effectué les réglages ci-dessous :

• Direction : Directe
• Vitesse : 4

Étape 6 : Appliquer la parallaxe sur différents appareils

Il est maintenant temps de répondre à l'effet de parallaxe sur différents appareils, tels que l'ordinateur de bureau, la tablette et le téléphone portable. Effectuez les ajustements nécessaires pour que l'effet de parallaxe fonctionne parfaitement sur tous les appareils.

Enfin, voici le résultat final de l'effet de parallaxe de l'élément web :

2. Créer un effet de parallaxe sur l'arrière-plan du site

Une autre façon courante d'ajouter la parallaxe dans Elementor consiste à l'appliquer à l'arrière-plan d'une section. Cela rend votre page plus dynamique, car l'arrière-plan bouge différemment par rapport au contenu de premier plan. Il s'agit d'un moyen simple mais efficace de donner vie à votre design. Suivez les étapes suivantes pour l'installer :

Étape 1 : Sélection de la section d'arrière-plan

Tout d'abord, vous devez choisir la section dans laquelle vous souhaitez que l'effet de parallaxe apparaisse. Il peut s'agir de la bannière du héros, d'une zone vedette ou de toute autre section que vous souhaitez mettre en évidence.

Étape 2 : Ouvrir les paramètres des effets de mouvement ou des effets de souris

Ensuite, allez à la page Avancé et trouver l'onglet Effets de mouvement panneau. Vous pouvez y activer l'une ou l'autre des options suivantes effets de défilement ou des effets de souris, selon le style que vous souhaitez.

Étape 3 : Ajuster le style d'animation de la parallaxe

Vous devez maintenant ajuster le style d'animation. Commencez par ouvrir l'onglet Style. Téléchargez votre image d'arrière-plan, puis personnalisez son mouvement en ajustant la direction, la vitesse et l'intensité de l'effet jusqu'à ce qu'il s'intègre parfaitement à votre dessin.

Ici, vous pouvez choisir entre 2 effets différents que vous pouvez appliquer à votre couche d'arrière-plan, comme l'effet de défilement avec l'effet de souris.

Étape 4 : Activer les effets de souris pour l'arrière-plan

Après avoir réglé l'effet de défilement, activez la parallaxe basée sur la souris pour que l'arrière-plan réagisse aux mouvements du curseur. Cela donne une impression d'interactivité aux visiteurs. Utilisez donc l'icône du crayon pour personnaliser et affiner le tracé de la souris.

Par exemple, j'ai configuré ici l'effet de flou,

• Direction : Réglé sur Fondu sortant, l'élément s'estompe progressivement lorsqu'il quitte la fenêtre de visualisation.
• Niveau : 15
• Plage de visualisation : Entre 49% et 84%, nous définissons le moment où l'effet commence et se termine en fonction de la position de défilement de l'utilisateur.

Étape 5 : Test sur plusieurs appareils

Il est maintenant temps de vérifier comment l'effet de parallaxe se comporte sur les différents appareils, ordinateur de bureau, tablette et mobile. Effectuez les ajustements nécessaires pour vous assurer que l'animation fonctionne sans problème et qu'elle est belle partout.

Et voici le résultat final de l'effet de parallaxe de l'arrière-plan :

Note : Vous souhaitez styliser davantage l'effet de parallaxe pour qu'il corresponde à votre marque ?

Il s'agit des deux méthodes les plus courantes pour ajouter des effets de parallaxe dans Elementor. Toutefois, si vous souhaitez obtenir des effets plus avancés, tels que les effets sections parallaxeseffets d'inclinaison ou parallaxe 3D avancéeCependant, le Elementor lui-même ne fournit pas ces fonctionnalités par défaut. Pour ce faire, vous devrez utiliser un fichier Effet de parallaxe Elementor plugin.

Ici, vous devez acheter Element pro pour ajouter un effet de parallaxe sur votre site. Et si vous pouviez ajouter un effet de parallaxe plus avancé même à moindre coût ?

C'est ce à quoi nous aboutissons Element Pack Pro comme l'un des meilleurs addons Elementor. En plus de 4 widgets différents pour l'effet de parallaxe, ce plugin est livré avec d'autres éléments suivants 300+ widgets Elementor.

Ainsi, même si vous n'êtes pas un expert ou si vous ne savez pas quel style de parallaxe convient le mieux à votre site web, vous pouvez simplement explorer les modèles de démonstration et choisir celui qui convient parfaitement à votre site.

Créer un effet de parallaxe avancé Elementor avec Element Pack

Elementor Pro offre des effets de parallaxe de base, comme Motion Effects, Transformer et mettre à l'échelleet Sticky Elements. 

Si vous souhaitez aller au-delà des options de parallaxe de base de Elementor, le plugin Element Pack est un excellent choix. Il vous donne accès à des options plus avancées arrière-plans en parallaxeIl comprend des effets d'inclinaison, des effets de parallaxe 3D avancés et des blocs prédéfinis, ce qui vous permet de créer des designs professionnels.

Commençons donc par la création d'un effet de parallaxe avancé dans Elementor avec Element Pack, étape par étape :

Étape 1 : Installer et activer Element Pack

Tout d'abord, installez le logiciel Element Pack sur votre site WordPress, puis activez-le.

Remarque : Tout d'abord, installez le Elementor free sur votre site puis installez Element pack.

Étape 2 : Activez les widgets de Parallaxe

Ensuite, rendez-vous à l'adresse suivante Element Pack Dashboard > Extensions > Active Extension liée à l'effet de parallaxe si nécessaire, comme

• Image d'arrière-plan Parallaxe
• Effets de parallaxe/de défilement
• Section Image Parallaxe
• Effet de remplissage par défilement
• Dégradé animé BG
• Effets du curseur

Il existe de nombreuses options, ce qui vous permet d'activer facilement d'autres fonctions personnalisées pour améliorer vos effets de parallaxe. 

Étape 3 : Ouvrir la page Elementor 

Choisissez maintenant la page où vous souhaitez ajouter l'effet de parallaxe et cliquez sur Editer avec Elementor.

Étape 4 : Choisir un élément pour ajouter la parallaxe

Pour ajouter un effet de parallaxe en arrière-plan, activez d'abord l'effet de parallaxe en arrière-plan, sélectionnez la section et allez à Style > Contexteet allumez le Effet de parallaxe BG.

Ajustez ensuite le mouvement de défilement à l'aide de Parallaxe X et Parallaxe Y si nécessaire.

Choisissez maintenant une autre sous-section, colonne ou widget où vous souhaitez appliquer l'effet de parallaxe, puis allez sur Avancé.

Étape 5 : Personnaliser les paramètres de parallaxe

Aujourd'hui, dans le Avancé Dans l'onglet, vous trouverez de nombreuses sections de personnalisation telles que 

• Effets de confettis
• Effets du curseur
• Effets de révélation
• Effets d'entraînement
• Collant
• Texte dégradé en arrière-plan
• Ombre de l'image réaliste
• Info-bulle
• Contrôles de visibilité
• Effet sonore.

À partir de sections, réglez la vitesse, la direction, les options de déclenchement et le style d'animation. Avec Element Pack, vous pouvez même superposer plusieurs éléments pour créer des effets 3D ou d'inclinaison avancés.

Par exemple, j'ajoute ici l'option "Ombre réaliste de l'image", qui ajoute une ombre réaliste sous l'image d'une fusée de dessin animé stylisée. Cet effet donne au graphique une impression de dimensionnalité et le fait ressortir de la page.

Ensuite, j'ajuste le mouvement de défilement à l'aide de Parallaxe X et Parallaxe Y si nécessaire.

Étape 6 : Utiliser des blocs Parallaxe prêts à l'emploi (méthode rapide)

Si vous ne voulez pas partir de zéro, choisissez parmi les effets de parallaxe préconçus. blocs prêts inclus dans Element Pack. Il suffit de se rendre sur le site Bibliothèque de modèles Element Pack dans votre éditeur Elementor.

Maintenant, regardez les sections parallaxes pré-conçues disponibles jusqu'à ce que vous en trouviez une qui corresponde à votre conception.

Ensuite, passez la souris sur le bloc souhaité et cliquez sur Copie en direct pour copier la mise en page et les effets.

Allez maintenant dans votre canevas Elementor et collez le bloc copié dans la section ou le conteneur souhaité.

Remplacez ensuite le texte, les images et les liens par votre propre contenu pour qu'il corresponde à votre marque.

Maintenant, à partir du style, modifiez les couleurs, la typographie et les paramètres de parallaxe pour les aligner sur l'esthétique de votre site.

Étape 7 : Optimiser pour différents appareils

Maintenant, testez votre effet de parallaxe sur ordinateur de bureau, tablette et mobile à l'aide de la fonction Réactif et de s'assurer que tout se passe bien.

Et voici le résultat final de l'effet de parallaxe créé avec la fonction Element Pack:

Lorsque vous créez des effets de parallaxe directement avec Elementor Pro, vous obtenez les bases. Mais avec Element Pack, vous bénéficiez d'une flexibilité bien plus grande. 

Au lieu d'être limité au mouvement standard, vous pouvez superposer des animations, contrôler la vitesse de défilement et même mélanger des effets de parallaxe, comme les effets Confetti, les effets Curseur, les effets Révélation, les effets Ondulation et bien d'autres fonctions avancées que Elementor Pro n'offre pas. 

Cela signifie que vous ne vous contentez pas d'ajouter du "mouvement" à une section ; vous créez une expérience entièrement interactive, même si vous n'êtes pas un développeur.

Meilleures pratiques pour la conception d'effets de parallaxe à l'aide de Elementor 

Les effets de parallaxe peuvent donner à votre site web un aspect moderne, engageant et visuellement attrayant. Mais pour obtenir les meilleurs résultats, vous devez les utiliser à bon escient. Voici quelques bonnes pratiques à garder à l'esprit :

1. Protéger la lisibilité

Votre contenu doit toujours passer en premier. Si le texte est superposé à un arrière-plan en parallaxe, vérifiez le contraste. Si l'arrière-plan est trop chargé, utilisez des superpositions ou des effets de flou.

Exemple : Les effets de parallaxe rendent parfois le texte flou. Par conséquent, lorsque vous utilisez un contenu sur un écran parallaxe, veillez à ce qu'il soit clairement visible.

2. Correspondre à la personnalité de la marque

Le style de parallaxe doit être cohérent avec votre marque. Un spa de bien-être peut utiliser un effet de défilement lent et apaisant, tandis qu'un site de jeu peut utiliser des mouvements plus rapides et plus dynamiques.

Exemple : Supposons que, sur le site web d'un hôtel de luxe, des vagues se déplaçant lentement en arrière-plan fassent écho à l'ambiance relaxante du bord de mer, en parfaite adéquation avec l'histoire de la marque.

3. Éviter la surcharge d'animation

Si votre site est rempli d'éléments qui glissent, s'estompent et zooment, l'ajout de plusieurs effets de parallaxe ne fait qu'ajouter du bruit. Limitez-vous à un ou deux moments où la parallaxe a du sens, comme une bannière de héros ou une vitrine de produit.

Exemple : Vous remarquerez que les pages produits d'Apple utilisent souvent très peu de parallaxe, mettant généralement en évidence une seule caractéristique du produit lors du défilement. C'est tout ce qu'il faut pour maintenir l'intérêt des visiteurs.

4. Observer les performances

Animations + grandes images = temps de chargement plus lent. Testez toujours les performances après avoir ajouté un effet de parallaxe. Si votre site semble lent, comprimez les images, utilisez le chargement paresseux ou réduisez l'effet.

Conseil de pro : Lancez votre site dans PageSpeed Insights ou GTmetrix après avoir ajouté le parallaxe. Si vous voyez des signaux d'alerte, optimisez votre site avant de le mettre en ligne.

Elementor L'effet de parallaxe ne fonctionne pas - Problèmes et solutions

Il arrive que l'effet de parallaxe dans Elementor ne fonctionne pas comme prévu. Cela peut être dû à des paramètres, à des conflits de thèmes ou même à des restrictions liées à l'appareil. Voici les problèmes les plus courants et comment les résoudre :

1. Effets de mouvement non activés

Si la parallaxe ne fonctionne pas, vérifiez d'abord si Effets de mouvement sont activés pour la section, la colonne ou le widget. Aller à Avancé > Effets de mouvement et s'assurer que les effets de défilement ou de souris sont activés.

3. Conflits de thèmes ou de plugins

Parfois, votre thème ou un autre plugin peut remplacer les scripts de Elementor. Essayez de désactiver les autres plugins un par un, ou passez temporairement à un thème par défaut comme Hello Elementor pour tester.

4. Limitations du navigateur ou de l'appareil

Les effets de parallaxe ne s'affichent pas toujours de la même manière sur les téléphones portables ou certains navigateurs. Vérifiez l'affichage de l'effet Paramètres réactifs dans Elementor pour confirmer que l'effet est autorisé sur les tablettes et les mobiles.

5. Questions relatives à la mise en cache et aux performances

Le cache du navigateur, le CDN ou les plugins d'optimisation peuvent bloquer l'exécution des animations. Videz votre cache, purgez le CDN et vérifiez à nouveau le site.

Questions fréquemment posées

Réflexions finales

Les effets de parallaxe peuvent ajouter de la personnalité, du réalisme et du mouvement à votre site web. Mais seulement si vous les utilisez à bon escient. Ils doivent rester subtils, préserver la lisibilité et toujours être testés sur différents appareils pour que votre design soit fluide partout.

Elementor vous donne les outils pour commencer, mais si vous voulez vraiment pousser votre créativité plus loin, Element Pack fait passer ces possibilités au niveau supérieur. Avec ses fonctions supplémentaires d'effets de parallaxe, telles que Confetti Effects, Cursor Effects, Equal Height, Image Parallax, Sticky, Tile Scroll, Visibility Controls, et bien d'autres options de mouvement avancées, vous pouvez créer des designs qui ne se contentent pas d'être beaux, mais qui sont mémorables.

En fin de compte, il ne s'agit pas d'ajouter des effets pour le plaisir. Il s'agit de créer une expérience qui semble naturelle à vos visiteurs. Et lorsque vous parvenez à trouver le bon équilibre, la parallaxe devient l'un de ces petits détails qui permettent à votre site de se démarquer.