Tutoriels détaillés sur l'effet de parallaxe d'Elementor : pour une meilleure hiérarchie visuelle du site

Elementor peut créer des effets de parallaxe en arrière-plan, ce qui peut rendre un site web plus attrayant.Plus vif et ajouter des couches. Cet article vous donnera un aperçu détaillé de la manière dont vous pouvez utiliser la fonctionCréation d'arrière-plans en parallaxeLe résultat est une expérience visuelle convaincante.

Qu'est-ce que l'effet de parallaxe ?

La parallaxe est un effet qui crée une impression de profondeur et de dynamisme grâce à la différence de mouvement relatif entre l'arrière-plan et le premier plan. Lorsque vous faites défiler une page web, l'arrière-plan se déplace à une vitesse différente de celle du premier plan, ce qui crée une illusion de mouvement. La parallaxe est largement utilisée dans la conception de sites web et de jeux pour rendre l'expérience visuelle plus immersive.

Pourquoi utiliser des arrière-plans en parallaxe ?

Les effets de parallaxe permettent non seulement d'attirer l'attention des visiteurs, mais aussi de donner au contenu des pages un aspect plus tridimensionnel. En ajustant la différence de vitesse de déplacement entre l'arrière-plan et le contenu, il est possible de créer un sentiment de mouvement et de hiérarchie, ce qui améliore l'expérience visuelle de l'utilisateur et peut augmenter le temps de séjour sur la page.

Etapes pour créer un arrière-plan de parallaxe dans Elementor

inutile Elementor Pro Les effets de parallaxe peuvent être mis en œuvre dans la version gratuite d'Elementor. Voici la marche à suivre :

Étape 1 : Créer ou modifier une page

Tout d'abord, vous devez disposer de laCréer une nouvelle page(math.) genreOu modifier une page existante.

1. Connectez-vous à votre tableau de bord WordPress et cliquez sur "page web">"Ajouter une nouvelle page"ou sélectionnez la page à modifier.

2. Cliquez "Utilisation de l'éditeur Elementor"pour entrer dans l'éditeur Elementor.

Étape 2 : Ajouterconteneursrépondre en chantantélément

Dans l'éditeur ElementorAjouter un nouveau conteneurL'effet de parallaxe sera appliqué à l'arrière-plan du chapitre. Vous pouvez ajouter n'importe quel contenu au chapitre, tel que du texte, des images, des titres, des cartes, des icônes, etc.

1. Cliquez "Ajouter un nouveau conteneur"et sélectionnez la structure (par ex.Colonne simple, colonne double(etc.).

2. Faites glisser et déposez des éditeurs de texte, des boutons ou d'autres éléments dans les sections pour alimenter le contenu.

Étape 3 : Ajouter un arrière-plan

Ensuite, ajoutez une image d'arrière-plan au conteneur, qui est sur le point d'appliquer la méthodeEffet de parallaxe de la part de.

1. Cliquez sur l'icône "Editer le conteneur" et allez dans l'onglet "Styles".

2. Recherchez "Type d'arrière-plan" et sélectionnez le mode "Classique".

3. Cliquez "Sélectionner une image"et téléchargez ou sélectionnez une image d'arrière-plan appropriée dans la bibliothèque multimédia.

4. Configurer les options d'affichage de l'image telles que la position, la méthode de répétition, etc. pour s'assurer que l'image s'affiche correctement sur la page.

Étape 4 : Activer la parallaxe

Il s'agit de l'étape clé de laCorrection de l'image de fondDes effets de parallaxe sont réalisés.

1. Sous "Type d'arrière-plan", recherchez "pièce jointe (email)L'option " " est réglée sur " ".fixation".
   • Cela rendraL'image de fond est fixeet le contenu de premier plan se déplacera au fur et à mesure du défilement, créant ainsi un effet de parallaxe.

2. L'affichage de l'image d'arrière-plan peut être ajusté selon les besoins, par exemple "placement"L'option peutImage de contrôleL'alignement de la ligne "ampleur"Cette option vous permet de régler le mode de zoom de l'image.

Étape 5 : Enregistrer et prévisualiser l'effet

Après avoir effectué les réglages ci-dessus, vous pouvez prévisualiser la page pour voir l'effet réel de l'effet de parallaxe.

1. Cliquez sur le bouton "yeux"et sélectionnez "Prévisualiser les modifications".
2. Faites défiler la page dans une nouvelle fenêtre et observez le comportement de l'effet de parallaxe.

Comment optimiser davantage l'arrière-plan en parallaxe ?

Si l'effet de parallaxe par défaut ne répond pas à vos besoins, essayez les conseils d'optimisation suivants :

1. Réglage de la transparence de l'image d'arrière-planLes images d'arrière-plan sont plus faciles à mettre en évidence grâce à la transparence de l'arrière-plan.

2. Ajout d'une superposition de couleursL'ajout d'une couche de couleur transparente à l'image de fond peut améliorer la cohérence stylistique globale de la page.

3. Combiné avec des effets dynamiquesSi vous voulez quelque chose de plus flashy, vous pouvez utiliser les effets de défilement d'Elementor pour ajouter d'autres animations aux éléments de premier plan ou d'arrière-plan.

Considérations sur l'arrière-plan de la parallaxe

• Sélection d'imagesLe choix de l'image d'arrière-plan : Le choix de l'image d'arrière-plan est crucial. Il est recommandé d'utiliser des images claires et thématiques.
• Vitesse de chargementLes arrière-plans parallaxes peuvent augmenter le temps de chargement des pages. Essayez d'utiliser des images optimisées pour garantir la performance du site.
• Compatibilité des appareils mobilesCertains effets de parallaxe peuvent ne pas fonctionner correctement sur les appareils mobiles. Vous pouvez contrôler l'affichage ou non des effets de parallaxe sur les appareils mobiles en personnalisant les options d'affichage.

résumés

L'effet de parallaxe est un outil visuel très utile pour améliorer l'attractivité d'une page, et Elementor fournit un moyen facile à utiliser pour obtenir cet effet sans plugins supplémentaires. Nous espérons que les étapes détaillées et les suggestions d'optimisation de cet article vous aideront à créer facilement des arrière-plans parallaxes impressionnants dans Elementor.