Faites bouger les pages d'Elementor ! Les animations d'Essential Addons expliquées !

utiliser Elementor Lors de la création d'un site web, si vous estimez que la pageTrop statiqueetAbsence de sens de l'interactionCet article est fait pour vous. Par le biais de Plugin Essential AddonsVous pouvez facilement ajouterAnimation interactive(math.) genreAmélioration de l'attrait visuelLe site web peut être rendu "vivant" - et sans écrire de code !

Cet article vous explique, étape par étape, comment utiliser la fonction Plugin Essential AddonsAjouter des effets d'animation dynamiques aux sites web Elementor, y compris des moyens d'appliquer des éléments multiples tels que du texte, des images et des conteneurs.

Qu'est-ce que le plugin Essential Addons ?

Compléments essentiels plug-in (composant logiciel)laisser (à qqn) WPDeveloper Développé par l'entreprise, le plugin est un outil spécialisé dans la gestion de l'information. Elementor Page BuilderUn plugin d'extension amélioré développé pour aider les utilisateurs à créer des sites web WordPress plus riches et plus professionnels en fournissant un certain nombre d'éléments personnalisés et de fonctionnalités avancées.

Principales caractéristiques :

1. Vaste bibliothèque de widgets
   Comprend la présentation du contenu, le marketing, les données dynamiques, l'intégration des médias sociaux, l'amélioration des formulaires et bien d'autres éléments tels que les boutons avancés, les rotateurs, les infobox, les listes de prix, les barres de progression, les grilles de filtres dynamiques et bien d'autres encore.
2. Une présentation puissante du contenu
   Il permet d'afficher des articles de blog, des produits WooCommerce, des membres de l'équipe, des témoignages de clients, etc. Avec des animations et des effets de filtre, la page est plus vivante.
3. Support pour l'intégration de tiers
   intégration transparente MailchimpetWPFormsLes plug-ins les plus populaires tels que Contact Form 7, Ninja Forms, etc. facilitent la création rapide de formulaires et d'outils de marketing.

Plugin Essential Addonsprocédure

Préparation requise pour le plug-in

Avant de commencer, assurez-vous que les plugins suivants sont installés et activés sur votre site :

• Elementor
• Addons essentiels pour Elementor

Une fois installé et activé, allez dans le backend de WordPress et allez dans la section Addons essentiels > ExtensionsTrouver Animations interactivespour activer la fonction et sauvegarder les réglages.

Ajouter une animation aux éléments de la page

Ouvrez la page à modifier et cliquez sur Utilisation de l'éditeur ElementorLes éléments suivants sont ajoutés pour les différents élémentsAnimation interactiveLa méthodologie spécifique de l

1) Élément d'image : ajout d'un effet de flottement

• Sélectionnez l'élément image et cliquez sur le panneau gauche de l'écran niveau élevé Étiquettes.
• Faites défiler vers le bas pour activer Animations interactives Fonction.

• option Effets de transformationActiver Traduire Y(mouvement de l'axe Y), modifié en "-20".

• Dans les paramètres d'animation, sélectionnez assouplissement linéaire les courbes animées, et permettre Effet Yo-Yo (aller-retour).

• Ajustement de l'animationla travée(durée(a) avecremettre à plus tard(délai), et lorsque vous avez terminé, cliquez sur le coin inférieur gauche de la page mettre à jour Bouton.

• Prévisualisez l'effet d'animation, l'élément d'image flottera vers le haut et vers le bas en fonction des paramètres.

2. animation de la rotation de l'image

• Sélectionnez un autre élément d'image et répétez les étapes ci-dessus pour activer la fonction d'animation.

• existent Effets de transformation choisissez parmi Rotation(Rotation) est modifié en 360.

• Régler l'animation sur Linéaire et Activeryo-yo Aller et retour.

• adapterla travéepour"5"etRéduction du nombre de bouclespour"-1".

• Cliquez sur Mettre à jour et prévisualiser pour voir l'animation de la rotation de l'image.

3) Élément de texte : effets de glissement à gauche et à droite

• Sélectionnez l'élément de texte et cliquez à nouveau sur niveau élevé > Animations interactives.
• commencer à utiliser Effets de transformationAjustements Traduire X(mouvement de l'axe X) est "35".

• mettre en placeParamètres d'animationComprend type d'assouplissementpour "Linéaire", Activereffet yo-yo.

• habilitant Défilement ou déclenchement Options de déclenchementSi vous souhaitez que l'animation soit déclenchée, définissez-la de manière à ce qu'elle soit déclenchée lorsque vous faites défiler la page jusqu'à un élément de départ.

• Affichage efficace

4) Paramètres d'animation du conteneur

Essential Addons prend également en charge Blocs de conteneurs d'Elementor Ajouter des effets d'animation :

• Sélectionnez l'élément de conteneur à activer Animations interactives.
• existent Effets de transformation mettre en place Rotation La valeur de l'animation de la rotation est "-5'.

• configurer Transformer l'origine(rotation de l'origine) pour obtenir le changement souhaité du centre de gravité visuel en plaçant le bouton "Transformation Origine X "La valeur de l'option"Droit", "volonté"Transformation Origine YL'option " " a été remplacée par " ".Le fond".

• Activer le défilement ou le déclenchement pour définir les positions de début et de fin du défilement. Régler le paramètre "Démarrer Élément "La valeur de l'option a été changée en "TOP", remplacer "Contrôleur de démarrage"La valeur de l'option a été changée en "Centre"

• L'aperçu montre que le conteneur s'anime progressivement au fur et à mesure qu'il défile, et affiche même des marqueurs de début et de fin pour faciliter l'ajustement.

résumés

Les fonctions d'animation interactive des addons essentiels rendent les sites Web Elementor plus dynamiques et interactifs, et surtout, il n'est pas nécessaire d'écrire du code. Qu'il s'agisse d'une image, d'un texte ou d'un module de conteneur, ils peuvent être configurés à l'aide d'une simple commandeMise en œuvre d'effets d'animationL'expérience visuelle de la page web est grandement améliorée. Si vous souhaitez obtenir davantage de tutoriels et d'informations sur WordPess, veuillez consulter les pages suivantesRéseau de fluctuation des photonsIl contient les tutoriels WordPress les plus complets avec la meilleure ambiance !Communauté d'échange WordPress.