Rajouter un effet parallaxe sur son site WordPress peit renfermer de nombreux avantages. Toutefois, pour réaliser ce type d’animation, il faut parfois écrire des lignes de code. Si vous voulez éviter de faire ça, le plus simple est de faire votre effet parallax directement via le plugin et Theme Builder Elementor.
Pour intégrer un effet parallaxe sur Elementor, vous n’avez nul besoin d’avoir des compétences en webdesign et plus notamment en CSS et en React JS. Effectivement tout ce que vous aurez à faire, c’est d’effectuer du glisser disposer et de choisir l’animation souhaitée.
Les étapes pour ajouter des effets parallax avec Elementor
Pour créer des effets parallaxes avec Elementor, il faut préalablement installer le plugin. Et de préférence, si vous souhaitez accéder à plus d’options il est judicieux d’opter pour un compte Elementor Pro. Pas vraiment cher, avec l’option basique, vous aurez accès à plus de 500 widgets et plus de 1000 templates.
Ajouter un effet parallax sur un bloc de page WordPress
Généralement, dans votre page Elementor, vous avez plusieurs sections pour faciliter la navigation de cette dernière. Avant d’intégrer l’effet parallax donc, le plus simple serait de s’inspirer sur des pages déjà existantes.
Choisir le bloc de page
Pour que l’animation soit correctement intuitive, tâchez bien de choisir l’élément ou la section de page avec laquelle vous allez intégrer l’effet parallaxe. Toutefois, il convient quand même de noter qu’il est également possible de réaliser plusieurs effets sur tous les blocs de votre page.
Choisir l’effet de mouvement
Après cette étape, vous devriez ensuite choisir l’effet de mouvement souhaité. Pour ce faire, il faudrait aller dans l’option avancée du bloc.
En fonction de vos préférences, vous pourriez par la suite créer différents effets de défilements sur le bloc en lui-même ou ses divers éléments (boutons, images, formulaire…).
Ajuster l’animation
Une fois cela effectué, il vous faudra par la suite ajuster les animations. Pour ce faire, il faut prendre en compte différents paramètres comme les bordures, ma mise à l’échelle, la rotation, les alignements, la vitesse de l’animation…
N’oubliez pas également de prendre en considération la qualité des images que vous souhaitez utiliser dans votre animation.
Ajouter un effet paralax sur l’arrière-plan de la page web
Si au lieu d’une simple section ou élément, vous voulez rajouter un effet parallaxe à l’arrière-plan de votre page wordpress, il faudrait agir comme suit :
Personnaliser l’image arrière-plan
Avant tout, vous devriez tout d’abord bien choisir votre image de fond et la téléverser sur votre site Wordpress. Après cette étape, vous devriez ouvrir la page builder de Elementor.
Ajouter et configurer l’animation
Une fois l’éditeur ouvert, vous devriez vous rendre sur l’onglet « Style ». Une fois dessus, dans l’option fichier joint, il faut remplacer par défaut par « fixe » ou défilement si vous souhaitez faire une animation plus interactive. Ou pour cette dernière en particulier, vous avez la possibilité de choisir un effet de défilement par effet de mouvement ou par effet de la souris.
Une fois que vous aurez fini l’intégration de vos effets parallaxes, il serait vivement très recommandé d’effectuer des aperçus. Et si jamais vous remarquez certaines anomalies ou manque d’ergonomie, vous n’aurez juste qu’à faire quelques petits ajustements.
Ce qu’il faut savoir sur l’effet parallaxe
L’effet parallaxe consiste principalement à faire défiler des éléments de votre site web suivant un ordonnancement bien défini avec une vitesse variée. Pouvant être en 2D ou en 3D, on peut avant tout le réaliser en n’utilisant que du code CSS.
Il est possible de programmer des animations et effets parallaxes avec d’autres langages web comme React.JS et React Spring. Et comme la technologie évolue bien, sur un site WordPress, il est également possible de faire des effets parallax en utilisant des plugins comme Elementor et Divi.
Les intérêts d’intégrer de l’effet parallax sur son site
L’usage d’un effet parallax sur un site wordpress pourrait ouvrir à de nombreux avantages. Outre accroître l’engagement de l’utilisateur ou visiteur du site internet, il pourrait également influer sur le SEO.
Améliorer l’expérience utilisateur
Un effet parallax attire avant tout l’attention. À part cela, contrairement à du simple contenu textuel ou en image, il permet de véhiculer plus facilement un message marketing. C’est un très bon outil pour faciliter la navigation sur un site internet ainsi que la conversion des visiteurs en prospects ou en clients.
Avoir un site à la fois interactif et léger
Outre l’aspect marketing, l’effet parallax pourrait très bien engendrer un impact important pour le référencement de votre site internet. Avant tout, contrairement à une animation classique, l’effet parallax et très léger.
En conséquence, même si votre site est entièrement interactif, son temps de chargement serait très rapide. Grâce à cela donc, non seulement vous aurez moins de taux de rebond, mais un site léger est toujours mis en avant par les moteurs de recherche comme Google.
Les différents types d’effet parallax à connaitre
Actuellement, il existe de nombreux types d’effet parallax. Selon vos préférences, l’effet de défilement pourrait interagir sur l’arrière-plan de la page, les widgets et bloc de page.
Défilement de l’arrière-plan de la page web
Parmi les plus courants, ce type d’effet consiste à faire défiler l’image arrière plan d’une page web. Contrairement à un slider, il agit sur toute la page ou sur un bloc bien défini. Et bien évidemment, quand la page change de plan, on peut très bien faire apparaître des contenus textuels.
Défilement horizontal et vertical
Le défilement horizontal consiste principalement à ajouter sur un bloc différentes couches d’images et de textes. À chaque fois que l’utilisateur scroll avec son souris donc, la page ou le bloc change de disposition. Très interactive, on peut également réaliser cet effet de manière verticale.
Effet flou
Très intuitif, avec l’effet flou, vous pouvez accroitre de manière considérable l’eye tracking ou l’oculométrie de l’utilisateur.
Plus concrètement, quand ce dernier fait défiler la page, les contenus précédents deviennent progressivement flous. Grâce à ce type d’animation donc, il est plus facile de communiquer de manière pertinente avec les visiteurs de votre site.
Effet de transparence
Très similaire à l’effet flou, l’effet de transparence permet de faciliter le changement de sujet ou de bloc de contenu d’une page web. Et quand l’utilisateur revient au précédent bloc, il redevient tout de suite opaque.
Effet de rotation
Ce type d’effet de rotation est surtout utile si vous souhaitez communiquer avec vos visiteurs à travers une image. Assez délicat à réaliser, tout comme l’effet d’échelle, il demande beaucoup de précision.
Interaction de l’animation avec le curseur
En dehors de ces types d’animation, avec le parallax, vous pouvez également créer des effets qui n’agissent pas seulement en scrollant, mais peut aussi interagir lorsqu’on dispose la souris dessus.
À part cela, si vous voulez aller encore plus loin, vous pouvez aussi tenter les effets 3D qui commencent aujourd’hui à devenir assez tendance.
Comment intégrer un effet parallaxe sur son site WordPress ?
Sans recourir à un plugin, il est tout à fait possible d’intégrer un effet parallaxe sur son site wordpress. Toutefois, il faut obligatoirement coder préalablement l’animation.
Pour faire l’intégration, vous devriez ensuite téléverser toutes les images nécessaires à l’animation et copier le code dans l’éditeur du thème de wordpress. Si vous manquez de compétence notre agence de communication à Coutances peut vous aider à réaliser cela sur votre site internet.
Pourquoi utiliser Elementor pour l’intégration d’un effet parallax sur son site ?
Créer un effet parallax manuellement prend beaucoup de temps. À part cela, si on fait des erreurs, il pourrait rentrer en conflit avec les codes HTML et CSS de votre site wordpress. Et si jamais vous n’aurez pas fait de sauvegarde, cela pourrait entraîner un effet irréversible.
Pour éviter cela, donc, le plus simple serait d’utiliser un plugin comme Elementor. Très simple à installer, son utilisation reste aussi très facile, car cela ne demande pas de connaissance particulière en matière de langage web.
