نحوه اضافه کردن دکمه دانلود متحرک در المنتور + 🎬 ویدئوی آموزشی

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

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

کمی درباره ویجت جدید المنتور پرو با نام Lottie

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

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

1 –  استفاده از ابزار Lottie

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

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

 2 – پیدا کردن انیمیشن دکمه دانلود

برای پیدا کردن انیمیشن دکمه دانلود لینک https://lottiefiles.com/4342-download-button مراجعه فرمایید.  بعد از اینکه این صفحه و لینک رو باز کردید باید با صفحه مانند تصویر زیر مواجه بشید.

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

برای این کار به پایین صفحه بیاید و در سمت راست روی دکمه Edit Layer Colors کلیک کنید تا صفحه ویرایش فایل انیمیشن برامون باز بشه.

بعد از اینکه به ویرایشگر فایل رفتید باید صفحه مانند تصویر زیر داشته باشید تا بتونید تمامی لایه ها این انیمیشن رو ویرایش کنید.

بعد از اینکه تمامی ویرایش های مورد نظر خودتون رو روی لایه ها و دکمه ها انجام دادید نوبت به این میرسه که ما این دکمه رو با تمامی ویرایش های که انجام دادیم توی وردپرس آپلود کنیم و باید من تو رو نشون بدیم.

برای این کار همانند تصویر زیر به سمت چپ بالای صفحه برید و متن داخل Lottie URL رو کپی کنید.

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

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

 اگر دکمه دانلود متحرک به نمایش در آمد یعنی شما تا این جای کار را به درستی پیش رفتید. 💪

3 –  لینک دهی به دکمه دانلود متحرک

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

برای این کار باز هم در بخش محتوا در تنظیمات ابزارک Lottie بیاید و پیوند رو روی آدرس سفارشی قرار بدید و در بخش url مسیر فایل یا لینک خودتون رو قرار بدید.

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

برای این کار توی تنظیمات ابزارک Lottie به بخش پیکربندی بیاید و دستگیره رو روی روی هاور قرار بدید.

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

خب دوستان تا اینجا رو ما کاملاً درست پیش رفتیم و تونستیم این مقاله رو به اتمام برسانیم و فقط یک نکته این وسط هستش که شما اگه بخواهید اندازه دکمه رو تغییر بدید به راحتی میتونید به بخش یا تب استایل بیاید و در بخش عرض، عرض دکمه مورد نظر را کم یا زیاد کنید.

ویدئوی آموزشی

نتیجه گیری

توی این مقاله ما با استفاده از ابزارک جدید المنتور پرو که ابزارک Lottie نام داره یک دکمه دانلود متحرک برای کاربران ایجاد کردیم و وقتی که موس کاربر روی این دکمه بره انیمیشن دکمه شروع به اجرا شدن میکنه و کاربر میتونه روی این دکمه کلیک کنه و فایل مورد نظر خودش رو دانلود کنه و حتی ما می‌توانیم این دکمه که ساختیم را به راحتی ویرایش بکنیم و رنگ ها و متن ها تغییر بدیم.