L'extension Floating Effect Elementor de Master Addons vous permet d'ajouter des animations fluides et interactives à n'importe quel élément de votre site Web. Avec des personnalisations simples comme la traduction, la rotation et la mise à l'échelle, vous pouvez créer des subtils mouvements flottants ou effets 3 D dynamiques.
Dans ce tutoriel, nous allons explorer comment utiliser ces options de personnalisation pour donner vie à vos éléments, et montrer comment l'extension de positionnement peut aider à affiner le placement pour un look parfait À la fin, vous serez prêt à créer des animations flottantes accrocheuses pour votre site.
Comment utiliser l'extension Floating Effect Elementor
Avant d'entrer dans les options des effets flottants, vous devez vous assurer que l'extension est activée.
Allez simplement dans Master Addons sur votre tableau de bord Entrez dans l'onglet extensions et basculez l'extension Floating Effects Simple !
Après l'avoir activé, vous pouvez accéder à l'onglet avancé de n'importe quel élément de votre site et faire défiler vers le bas pour trouver l'extension “floating effects” Basculez-le et vous verrez les options de personnalisation suivantes.
1. Traduire
Cela permet de déplacer un élément selon les axes X et Y. En ajustant la translation sur l'axe X, l'élément se déplacera vers la gauche et la droite De même, le réglage de l'axe Y déplace l'élément de haut en bas La combinaison des deux axes crée un effet flottant 3 D, ajoutant de la profondeur et du mouvement à vos éléments.
2. Faire pivoter
Avec cette option, vous pouvez faire pivoter les éléments le long des axes X, Y et Z. Cela donne à vos éléments un effet plus dynamique et tournant.
Vous pouvez également ajuster la durée et le délai de la rotation, permettant des transitions plus fluides ou plus spectaculaires.
3. Échelle
L'effet d'échelle vous permet d'étirer ou de rétrécir un élément le long des axes X et Y. Cela crée une animation de croissance/rétrécissement, donnant l'impression que vos éléments se dilatent ou se contractent Comme pour les autres effets, vous pouvez ajuster la durée et le délai pour contrôler le timing de l'animation.
En combinant ces trois options de personnalisation, vous pouvez créer des variations infinies d'effets flottants, des mouvements subtils aux animations plus complexes et accrocheuses.
Nous vous recommandons de vérifier Fonctionnalités d'outElementor Pro aussi bien. Vous pouvez combiner Elementor pro et Additions maîtres pour créer tout type de site Web que vous souhaitez.
Combinaison des effets
L'une des caractéristiques les plus puissantes du Effets flottants l'extension est la possibilité de combiner la traduction, la rotation et la mise à l'échelle pour des animations uniques et dynamiques En superposant ces effets, vous pouvez créer n'importe quoi, des mouvements flottants subtils aux éléments interactifs 3 D complets.
Combinez Traduire et Rotation : Associer la translation à la rotation crée un effet fluide et tournant avec un mouvement à travers l'écran Par exemple, vous pouvez avoir un élément flottant en diagonale tout en tournant en place pour une illusion 3 D plus dynamique.
Combinez Traduire et Échelle : L'utilisation à la fois de la traduction et de la mise à l'échelle permet à un élément de se déplacer et de changer de taille en même temps Cela peut créer un effet flottant en expansion ou en rétrécissement lorsque l'élément dérive sur l'écran.
Combinez les trois : Pour l'effet flottant ultime, combinez translate, rotative et scale Cela permet des animations complexes où l'élément se déplace, tourne et grandit/rétrécit d'un seul coup, lui donnant une apparence engageante et multidimensionnelle.
Les possibilités sont infinies lorsque vous expérimentez ces combinaisons Jouez avec différentes valeurs pour la durée et le délai pour ajuster la vitesse et le timing, créant ainsi une animation flottante vraiment personnalisée pour n'importe quel élément.
Créer un effet flottant sur une image
Nous espérons que vous savez désormais comment modifier les différents paramètres de l'extension Floating Effects.
En bonus, nous vous montrerons comment créer une section géniale avec quelques images, le Effets flottants et Extensions de positionnement:
Vous pouvez suivre la vidéo ci-dessous où nous vous montrons le processus complet.
Tout d'abord, choisissez et choisissons quelques images que nous utiliserons pour créer notre section.
Ensuite, nous ajoutons une Flexbox ou grille pleine largeur pour 3 colonnes et 2 lignes et arrangeons toutes les images comme la capture d'écran suivante à l'intérieur des cases appropriées.
Maintenant, concentrons-nous sur Position et Effet flottant Nous vous recommandons de commencer par le positionnement, Revoyez attentivement votre conception et positionnez toutes les images et particules précisément avant de mettre en œuvre l'effet flottant.
Nous avons utilisé l'extension de positionnement Master Addons pour positionner avec précision les images Pour commencer, sélectionnez « Relatif » dans l'extension de position Ensuite, procédez à l'alignement de vos images ou de tout autre élément selon vos besoins.
Nous avons terminé le positionnement pour toutes les images, et la capture d'écran jointe illustre la disposition actuelle.
Enfin, appliquons l'effet flottant aux images souhaitées Nous avons appliqué traduire les effets X et Y aux images des première et troisième colonnes L'effet Rotate Z a été appliqué exclusivement à l'image de profil Veuillez vous référer au fichier GIF suivant pour voir le résultat visuel actuel.
Le Effets flottants extension offre des possibilités infinies d'animation d'éléments sur votre site Web Avec des options de personnalisation simples mais puissantes pour la traduction, la rotation et la mise à l'échelle, vous pouvez créer des effets flottants dynamiques et accrocheurs qui engagent les visiteurs Lorsqu'ils sont combinés avec le Extension de positionnement1, vous avez un contrôle total sur le mouvement et le placement des éléments pour une conception véritablement personnalisée.
N'ayez pas peur d'expérimenter différents paramètres et combinaisons pour trouver l'effet flottant parfait pour votre site Avec un peu de créativité, vous pouvez élever votre conception Web et créer une expérience utilisateur plus interactive.
Si vous rencontrez un problème avec cette extension, n'hésitez pas à commenter ici ou à nous contacter via notre Formulaire de contact du site web.
