افزودن افکت های متحرک در المنتور | افزایش جذابیت سایت با انیمیشن

طراحی سایت دیگر فقط به چیدمان تصاویر و متن محدود نمی‌شود؛ امروزه، کاربران انتظار تجربه‌ای پویا و تعاملی دارند که آن‌ها را درگیر کند. افزونه المنتور به‌ عنوان بهترین افزونه صفحه ساز، با قابلیت افزودن افکت‌ های متحرک، به طراحان این امکان را می‌دهد تا بدون دانش برنامه‌نویسی، صفحات وب را به اثری زنده و جذاب تبدیل کنند. از انیمیشن‌های ساده هنگام اسکرول کردن تا جلوه‌های پیچیده برای جلب‌توجه، موشن افکت‌ها می‌توانند نرخ تعامل کاربران را افزایش دهند و وب‌سایت شما را متمایز کنند. در این مقاله از سری مقالات آموزش افزونه المنتور، با زبانی ساده و کاربردی، شما را با افزودن افکت های متحرک در المنتور آشنا می‌کنیم تا بتوانید سایتی حرفه‌ای و چشم‌نواز خلق کنید.

موشن افکت در المنتور چیست؟

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

نحوه افزودن افکت های متحرک در المنتور

برای استفاده از این قابلیت باید ابتدا افزونه المنتور پرو را نصب داشته باشید چرا که این قابلیت در نسخه رایگان وجود ندارد، پس از نصب افزونه المنتور گام به گام موارد زیر را طی کنید:

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

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

افکت‌های پیمایش در المنتور

در اولین بخش از افزودن افکت متحرک به المنتور، باید افکت‌های پیمایش و زمان اسکرول کردن صفحه و تنظیمات زیر را انجام دهید.

• اسکرول عمودی: با تنظیم این بخش هنگام اسکرول صفحه، المان موردنظر به صورت عمومی (بالا و پایین) تحرک دارد.
• اسکرول افقی: با تنظیم این بخش، با اسکرول کردن صفحه المان موردنظرتان به صورت افقی (چپ و راست) تحرک دارد.
• شفافیت: در این بخش میزان شفافیت المان موردنظر را هنگام اسکرول کردن تعیین می‌کنید؛ از این طریق جهت محو شدن و میزان آن را مشخص کنید.
• محو شدگی: اگر می‌خواهید المان با اسکرول کردن صفحه محو شود، باید جهت و میزان آن را با کمک این بخش تنظیم کنید.
• چرخش: اگر نیاز به چرخش المان موردنظر با اسکرول کردن صفحه دارید، از طریق این بخش جهت چرخش و سرعت آن را تنظیم کنید.
• تغییر اندازه: با کمک این بخش تعیین می‌کنید که اندازه المان موردنظر با اسکرول کردن صفحه تغییر کند.
• اعمال افکت روی: در این بخش تعیین کنید که تنظیمات انجام شده برای افکت متحرک در المنتور هنگام نمایش روی کدام دستگاه‌ها (موبایل، تبلت و دسکتاپ) اعمال شود.
• تاثیر مرتبط با: در این بخش مشخص می‌کنید که تنظیمات برای کل صفحه انجام شود یا فقط همان بخشی که مشاهده می‌کنید.
• نقطه لنگرگاه در X و Y: در این قسمت می‌توانید نحوه حرکت المان موردنظرتان را بر اساس نقطه مشخصی تنظیم کنید. مثلاً از وسط شروع به چرخش کند یا از سمت راست و چپ.

افکت‌های ماوس در المنتور

در دومین بخش از افزودن افکت به المنتور، نوبت به افکت‌های موس خواهد رسید؛ با فعال کردن این گزینه، بخش‌های زیر در اختیار شما قرار می‌گیرد:

• مسیر موس: در این بخش می‌توانید مسیر حرکت ماوس را مشخص کنید؛ همچنین قابلیت تنظیم جهت و سرعت آن هم وجود دارد.
• Title سه بعدی: اگر می‌خواهید المان موردنظرتان به صورت سه بعدی چرخش داشته باشد، در این بخش جهت و سرعت آن را تنظیم کنید.
• شناور: یکی دیگر از بخش‌های افکت ماوس که برای کل صفحه قابل تنظیم بوده، بخش شناور است. اگر می‌خواهید المان‌های سایتتان به صورت شناور در صفحه حرکت کند، این بخش را تنظیم کنید.
• انمیشن هنگام ورود: در این قسمت می‌توانید با وارد شدن کاربر به صفحه موردنظر با یک انیمیشن خاص المان‌ها را نمایش دهید. کافی است المان موردنظرتان را انتخاب و سرعت آن را مشخص کنید

و در پایان

افزودن افکت‌ های متحرک در المنتور راهی ساده و مؤثر برای ارتقای جذابیت بصری و تعامل کاربران با سایت شماست. این ابزار به شما امکان می‌دهد بدون نیاز به دانش کدنویسی، صفحاتی پویا و حرفه‌ای خلق کنید که نه تنها چشم‌نواز هستند، بلکه تجربه کاربری را بهبود می‌بخشند.

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

سوالات متداول

• آیا استفاده از موشن افکت‌ها در المنتور به افزونه اضافی نیاز دارد؟

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

• آیا افکت‌ های متحرک روی سرعت سایت تأثیر منفی می‌گذارند؟

اگر افکت‌ها به‌صورت بهینه و متعادل استفاده شوند، تأثیر کمی روی سرعت سایت دارند. برای جلوگیری از کندی، تعداد انیمیشن‌ها را محدود کنید و از ابزارهای بهینه‌سازی مانند WP Rocket استفاده کنید.

• چگونه می‌توانم افکت‌ها را فقط برای دسکتاپ یا موبایل اعمال کنم؟

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

• آیا می‌توانم افکت‌ های سفارشی با CSS به المنتور اضافه کنم؟

بله، در تب پیشرفته المنتور، می‌توانید کدهای CSS سفارشی به افزونه المنتور اضافه کنید.

• چگونه مطمئن شوم افکت‌ها در همه مرورگرها به‌درستی کار می‌کنند؟

پس از اعمال افکت‌ها، صفحه را در مرورگرهای مختلف مانند کروم، فایرفاکس و سافاری تست کنید. همچنین، از ابزارهای تست مرورگر مانند BrowserStack برای بررسی سازگاری استفاده کنید.