Souhaitez-vous ajouter l'animation Lottie dans Elementor?
منذ الإصدار 2.10.0 ، إليمنتور برو prend en charge l'animation Lottie, vous permettant d'ajouter une animation légère à votre page. Avant la mise à jour, vous pouviez appliquer des effets d'animation à un widget à partir de l'option تأثيرات الحركة sous l'onglet متقدم.
Cependant, Lottie fonctionne d'une manière différente. Lottie est un format d'animation, un peu comme GIF donc un fichier Lottie est une condition préalable pour ajouter l'animation Lottie dans Elementor.
Dans Elementor, vous pouvez ajouter un fichier Lottie à l'aide du widget Lottie. Par conséquent, vous pouvez également appliquer des effets de mouvement à votre fichier Lottie. Par exemple, vous pouvez appliquer un effet de défilement horizontal pour faire bouger votre Lottie horizontalement — que ce soit dans la direction droite ou dans la direction gauche — lorsque la page est défilée. Voici un exemple.
Vous pouvez voir le fichier d'origine de l'animation ci-dessus هنا. Sur le fichier Lottie d'origine, le cycliste — ainsi que son vélo — restent dans la même position lorsque la page est défilée. Pour qu'il se déplace vers la droite lorsque la page est défilée vers le bas et vers la gauche lorsque la page est défilée vers le haut, vous pouvez utiliser l'effet de mouvement intégré dans Elementor.
إذا كنت جديدًا في Elementor ، فراجع دليلنا حول: كيفية تثبيت Elementor على WordPress
Qu'est-ce que Lottie et où obtenir un fichier Lottie?
Comme mentionné précédemment, Lottie est un format d'animation. Il s'agit d'un format d'animation basé sur JSON développé par des ingénieurs d'Airbnb. Vous pouvez en savoir plus sur l'histoire de Lottie sur الصفحة cette.
Le plus grand avantage de l'adoption de Lottie sur votre site Web est que votre site Web sera beaucoup plus léger car un fichier Lottie est beaucoup plus petit que les autres formats d'animation, avec une qualité visuelle nette. Vous pouvez également redimensionner votre fichier Lottie sans casser les pixels.
Adobe After Effects est l'un des outils que vous pouvez utiliser pour créer un fichier Lottie. Vous pouvez également obtenir gratuitement des fichiers Lottie ملفات لوتي.
Veuillez noter que Lottie et LottieFiles sont deux choses différentes. Lottie est à nouveau — — un format d'animation, tandis que LottieFiles est un site Web qui propose des fichiers Lottie.
كيفية إضافة الرسوم المتحركة لوتي في Elementor
Avant de commencer à ajouter une animation Lottie dans Elementor, assurez-vous d'avoir mis à niveau votre Elementor Pro. Une fois que vous êtes prêt, créez une nouvelle page et modifiez avec Elementor. Ou modifiez-en une existante.
Sur l'éditeur Elementor, faites glisser le widget Lottie vers la zone d'édition
اذهب إلى اللوحة اليسرى. على الكتلة لوتي sous l'onglet محتويات، حدد المصدر. إذا اخترت ملف وسائط, téléversez simplement votre fichier Lottie ( le fichier JSON ) en cliquant sur l'icône de téléversement.
اقرأ أيضا: كيفية تعيين حجم مخصص لأيقونة زر العنصر
Vous pouvez ensuite définir l'alignement et ajouter une URL personnalisée.
Si vous souhaitez utiliser un fichier Lottie hébergé sur une source tierce, sélectionnez l'option URL خارجي et collez l'URL du fichier Lottie que vous souhaitez utiliser dans le champ disponible.
ثم افتح الكتلة تعديلاة sous l'onglet محتويات pour contrôler le comportement d'animation. Tout d'abord, sélectionnez le type de déclencheur pour déclencher l'animation Lottie. Vous pouvez choisir parmi 4 types de déclencheurs:
- منفذ العرض: L'animation Lottie commence à jouer en fonction de la fenêtre haute ( la zone visible de l'écran de l'appareil ).
- انقر فوق: L'animation Lottie commence à jouer lorsqu'un visiteur clique dessus.
- على التحويم: L'animation Lottie commence à jouer lorsqu'un visiteur survole sa souris.
- عند التمرير: L'animation Lottie ne joue que lorsque la page est défilée.
Vous pouvez également définir activer l'option نسيج البوكليه , activer l'option يعكس، اضبط نقطة البداية / النهاية واضبط سرعة التشغيل.
هناك أيضًا خيار لتمكين Lazyload.
Pour définir la largeur de votre fichier Lottie, vous pouvez aller l'onglet الطراز. Dans cet onglet, vous pouvez définir la largeur ainsi que l'ajout d'un filtre CSS comme lorsque vous travaillez avec le widget Image.
Si vous souhaitez appliquer un mouvement horizontal comme celui de l'exemple ci-dessus, allez à l'onglet متقدم. كتلة مفتوحة تأثيرات الحركة وتنشيط تأثيرات التمرير.
Cliquez sur l'option التمرير الأفقي. اضبط الاتجاه والسرعة والنافذة.
الخاتمة
Si vous souhaitez télécharger un fichier Lottie à partir du site Web LottieFiles, assurez-vous de télécharger le fichier JSON. Tout d'abord, sélectionnez le fichier Lottie que vous souhaitez télécharger et cliquez sur le bouton تنزيل JSON .
احصل على Elementor Pro الآن !!!
الخاتمة
هذا كل شيء! هذا كل ما يتعلق بهذه المقالة التي توضح لك كيف أضف الرسوم المتحركة Lottie في Elementor. إذا كانت لديك أية مخاوف بشأن كيفية الوصول ، فأخبرنا بذلك تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...