Dans le contexte de la conception Web, l’arrière-plan de parallaxe fait référence à un comportement par lequel l’arrière-plan se déplace à un rythme plus lent que le premier plan. Elementor (la version pro) est livré avec une fonctionnalité qui vous permet d’ajouter ce genre d’arrière-plan.
Nous allons en faire la couverture ici.
Vous pourriez rencontrer un petit problème pour ajouter un arrière-plan de parallaxe dans Elementor car Elementor n’utilise pas spécifiquement le terme « parallaxe ». Au lieu de cela, pour ajouter un arrière-plan de parallaxe dans Elementor, vous pouvez appliquer un effet de défilement à l’arrière-plan auquel vous souhaitez ajouter l’effet de parallaxe. L’arrière-plan que nous voulons dire ici est l’arrière-plan de la section ou l’arrière-plan de la colonne.
Dans le cas où vous êtes un nouveau sur la parallaxe, jetez un œil à l’exemple suivant et remarquez l’image d’arrière-plan. C’est un exemple de l’effet de parallaxe.
Nous avons dit que l’effet de parallaxe fait référence à l’arrière-plan et au premier plan qui ont un rythme de mouvement différent. Sur les faits, l’affaire n’est pas toujours comme ça. Au lieu du mouvement, un concepteur Web peut appliquer différents effets tels que le flou, la transparence ou l’échelle. Elementor lui-même offre 6 effets différents:
- Défilement vertical : L’arrière-plan se déplace verticalement lors du défilement de la souris
- Défilement horizontal : L’arrière-plan se déplace horizontalement lors du défilement de la souris
- Transparence : L’arrière-plan apparaît comme transparent avant le défilement de la souris
- Flou : L’arrière-plan apparaît flou avant le défilement de la souris
- Rotation : L’arrière-plan fait un mouvement de rotation sur le défilement de la souris
- Échelle : L’arrière-plan apparaît à une certaine échelle avant le défilement de la souris
Comment appliquer un effet de défilement dans Elementor
Comme nous l’avons mentionné, vous pouvez appliquer l’arrière-plan de parallaxe, que ce soit à une section ou à une colonne. Par conséquent, sélectionnez une colonne ou une section à laquelle vous souhaitez appliquer l’effet de parallaxe.
Accédez à l’onglet Style et ouvrez le bloc Arrière-plan. Définissez le type d’arrière-plan sur Classique et choisissez une image que vous souhaitez utiliser comme arrière-plan et activez l’option Effets de défilement.
Définissez la position et la taille de l’image d’arrière-plan, puis sélectionnez un effet de parallaxe que vous souhaitez appliquer en cliquant sur l’icône en forme de crayon dans l’une des options d’effet de parallaxe disponibles.
Vous pouvez activer plusieurs effets de parallaxe si vous le souhaitez.
Voilà. Vous pouvez continuer à modifier votre page ou votre modèle. Une fois cela fait, vous pouvez le publier ou le mettre à jour.
