---
title: "نحوه اضافه کردن انیمیشن های متحرک به سایت با استفاده از Lottie و المنتور"
url: "https://elementorfa.ir/lottie-animations-elementor/"
type: "post"
published: "2020-05-14T02:05:37+04:30"
modified: "2023-07-26T10:59:00+03:30"
author: "المنتور فارسی"
---

5/5 - (21 امتیاز)

گاهی اوقات نیاز هست برای بخش های مختلف سایت طراحی های کوچکی اضافه کنیم تا کمی از حالت ساده خارج شده و جذابیت بیشتری برای کاربر داشته باشد.

در این آموزش قصد داریم تا در مورد اضافه کردن انیمیشن های Lottie صحبت کنیم.

اگر یک سایت فروشگاهی دارید و برگه تشکر بعد از خرید رو توسط المنتور طراحی کردید، با استفاده از این ترفند ساده برگه تشکر رو جذاب تر کنید.

## انیمیشن های متحرک با استفاده از Lottie

قبل از اینکه آموزش رو انجام بدیم کمی در مورد تکنولوژی لاتی (Lottie) صحبت کنیم.

این تکنولوژی توسط شرکت Airbnb و به صورت متن باز ساخته شده که شما بدون پرداخت هیچ هزینه ای می تونید از این انیمیشن ها استفاده کنید.



حالا شاید فکر کنید اضافه کردن این انیمیشن ها باعث کاهش سرعت سایت بشه که در مقایسه با دیگر فرمت های انیمیشن، Lottie پایین ترین حجم و مصرف منابع هاست را استفاده می کند.

سایت منبع فایل های Lottie با نام [https://lottiefiles.com](https://lottiefiles.com/) قرار دارد که از بخش جستجو می توانید فایل های با فرمت JSON را دانلود کنید.

**ایجاد حساب در این سایت رایگان می باشد.**

## استفاده از Lottie در المنتور

برای استفاده از این انیمیشن ها ابتدا باید افزونه زیر را از مخزن وردپرس نصب کنید:

- [Animentor](https://wordpress.org/plugins/animentor-lottie-bodymovin-elementor/) رایگان در مخزن وردپرس)

بعد از فعال سازی این افزونه، وارد صفحه المنتور خود شده و از بین ویجت های المنتور، ویجت Lottie را جستجو کرده و داخل صفحه قرار دهید.

![اضافه کردن انیمیشن Lottie به المنتور](https://elementorfa.ir/wp-content/uploads/2020/05/lottie-elementor.png)

بعد از قرار دادن ویجت داخل صفحه، نیاز هست که فایل های انیمیشن را با فرمت JSON آپلود کنید.

![اضافه کردن انیمیشن Lottie به المنتور](https://elementorfa.ir/wp-content/uploads/2020/05/lottie-elementor-data.png)

حالا وارد سایت https://lottiefiles.com شده و یک انیمیشن با فرمت JSON دانلود کنید.

![اضافه کردن انیمیشن Lottie به المنتور](https://elementorfa.ir/wp-content/uploads/2020/05/lottie-json.png)

سپس فایل را در ویجت آپلود کنید.

می توانید تنظمات سرعت و تعداد نمایش انیمیشن را کنترل کنید.

همچنین می توانید کنترل پخش انیمیشن با قرار گرفتن ماوس روی ویجت و دیگر تنظیمات را ویرایش کنید.

![اضافه کردن انیمیشن Lottie به المنتور](https://elementorfa.ir/wp-content/uploads/2020/05/animentor-elementor.png)

در انتها هم بعد از ذخیره کردن برگه، انیمیشن به شکل زیر نمایش داده خواهد شد.