ساخت پس‌زمینه متحرک و بهینه در المنتور با Marvy

برای افزودن انیمیشن به پس زمینه در المنتور لازم نیست سراغ ویدیوهای حجیم یا کدنویسی پیچیده برید. افزونه Marvy – Background Animations for Elementor چند افکت آماده در اختیارتون می‌ذاره تا پس‌زمینه کانتینرها و سکشن‌های Elementor را متحرک کنید. البته نتیجه زمانی جذاب می‌شه که حرکت‌ها ملایم باشند، متن همچنان خوانا بمونه و عملکرد صفحه را قبل و بعد از فعال‌سازی بررسی کنید.

در این راهنما، نصب Marvy، انتخاب افکت و تنظیم آن در Elementor را قدم‌به‌قدم می‌بینید. در ادامه هم سراغ نکاتی می‌ریم که برای نمایش درست در موبایل، حفظ تجربه کاربری و کنترل معیارهای Core Web Vitals به کارتون می‌آیند.

Marvy دقیقاً چه کاری انجام می‌دهد؟

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

این افکت‌ها با CSS و JavaScript اجرا می‌شن، اما این موضوع به‌تنهایی تضمین نمی‌کنه که هر ترکیبی روی هر سایتی سبک باشه. نوع افکت، تعداد دفعات استفاده، تنظیمات صفحه، دستگاه کاربر و سایر اسکریپت‌های سایت همگی روی نتیجه اثر دارند. بهتره Marvy را ابتدا در محیط آزمایشی نصب کنید و عملکرد صفحه را قبل و بعد از فعال‌کردن انیمیشن بسنجید.

آیا انیمیشن پس‌زمینه برای سئو خوب است؟

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

برای ارزیابی فنی باید معیارهای فعلی Core Web Vitals، یعنی LCP، INP و CLS را بررسی کنید. اگر انیمیشن باعث دیرتر نمایش‌داده‌شدن محتوای اصلی، تأخیر در تعامل یا جابه‌جایی عناصر صفحه بشه، استفاده از آن به تجربه کاربری لطمه می‌زنه. به همین دلیل، بهتره نتیجه واقعی را با ابزارهایی مثل Google PageSpeed Insights بسنجید، نه اینکه صرفاً به سبک‌بودن ظاهری افکت اعتماد کنید.

راهنمای نصب افزونه Marvy قدم‌به‌قدم

Marvy مثل سایر افزونه‌های رایگان WordPress از داخل پیشخوان نصب می‌شه. چون این افزونه به Elementor وابسته است، مطمئن بشید Elementor از قبل روی سایت نصب و فعال شده باشد.

مرحله ۱: وارد پیشخوان WordPress بشید.

مرحله ۲: از منوی پیشخوان، مسیر افزونه‌ها > افزودن افزونه تازه را باز کنید.

مرحله ۳: در کادر جست‌وجو عبارت Marvy – Background Animations for Elementor را وارد کنید.

مرحله ۴: افزونه Marvy را در نتایج پیدا کنید، روی «نصب الآن» بزنید و پس از پایان نصب، گزینه «فعال‌سازی» را انتخاب کنید. پیش از نصب روی سایت اصلی، اطلاعات نسخه، تاریخ آخرین به‌روزرسانی و سازگاری اعلام‌شده در صفحه افزونه را هم ببینید.

مرحله ۵: پس از فعال‌سازی، تنظیمات مربوط به افکت‌ها را داخل ویرایشگر Elementor پیدا می‌کنید؛ بنابراین برای انتخاب انیمیشن باید صفحه موردنظرتون را با Elementor باز کنید.

نکته مهم: Marvy بدون Elementor کار نمی‌کنه. همچنین بهتره سازگاری آن با نسخه‌های فعلی WordPress، Elementor و قالب سایت خودتون را در محیط Staging آزمایش کنید؛ پشتیبانی یک قالب از Elementor لزوماً به معنی سازگاری قطعی همه افزونه‌های جانبی با تمام نسخه‌های آن نیست.

آموزش افزودن انیمیشن به پس زمینه در المنتور

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

مرحله ۱: صفحه موردنظرتون را با Elementor ویرایش کنید.

مرحله ۲: کانتینری را انتخاب کنید که قراره پس‌زمینه متحرک داشته باشد. در سایت‌های قدیمی‌تر ممکنه ساختار صفحه هنوز بر پایه Section و Column باشد؛ در سایت‌های جدید، Container ساختار اصلی Elementor است. بخش Hero می‌تونه محل مناسبی برای یک افکت محدود و آرام باشد، به‌شرط اینکه تیتر و دکمه‌ها کاملاً خوانا باقی بمانند.

مرحله ۳: تنظیمات کانتینر یا سکشن را باز کنید. محل دقیق گزینه‌های Marvy ممکنه با توجه به نسخه افزونه، نسخه Elementor و نوع ساختار صفحه تفاوت داشته باشد؛ بخش‌های Layout و Advanced را بررسی کنید.

مرحله ۴: پنل مربوط به Marvy Animation را باز کنید. اگر این گزینه را نمی‌بینید، ابتدا فعال‌بودن هر دو افزونه Elementor و Marvy را بررسی کنید و مطمئن بشید همان کانتینر یا سکشن اصلی را انتخاب کرده‌اید.

مرحله ۵: یکی از انیمیشن‌های در دسترس را انتخاب کنید. قابلیت‌های قابل‌مشاهده ممکنه با نسخه نصب‌شده تفاوت داشته باشند، اما در معرفی نسخه رایگان Marvy نام افکت‌های زیر دیده می‌شه:

• Ripple: موج‌های دایره‌ای و پیوسته.
• Rotate: عناصر یا حلقه‌های چرخان.
• Drop: ذراتی با حرکت رو به پایین.
• Flying Objects: اشکال هندسی شناور.
• Wave: خطوط موج‌مانند.
• Rings: حلقه‌های متحرک.
• Topology: خطوط شبکه‌ای و گرافیکی.
• Gradient: تغییر تدریجی و متحرک رنگ‌ها.
• Snow: ذراتی شبیه بارش برف.
• Cloud: حرکت ابرها در پس‌زمینه.

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

• سرعت حرکت: حرکت آرام معمولاً کمتر حواس کاربر را از محتوا پرت می‌کنه.
• رنگ افکت: رنگی را انتخاب کنید که با هویت بصری سایت هماهنگ باشد.
• شفافیت: افکت نباید خوانایی تیتر، متن یا دکمه را کاهش بده.
• اندازه عناصر: در افکت‌های ذره‌ای و هندسی، اندازه کوچک‌تر معمولاً پس‌زمینه خلوت‌تری می‌سازه.

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

چطور از کندشدن سایت جلوگیری کنیم؟

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

۱. افکت را محدود نگه دارید. لازم نیست همه بخش‌های صفحه حرکت داشته باشند. معمولاً یک افکت در Hero، بخش جداکننده یا کادر فراخوان کافی است. استفاده هم‌زمان در چند کانتینر می‌تونه صفحه را شلوغ کند و پردازش بیشتری بخواهد.

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

۳. عملکرد را قبل و بعد از تغییر مقایسه کنید. صفحه را یک‌بار بدون افکت و بار دیگر با افکت در PageSpeed Insights آزمایش کنید. در کنار امتیاز کلی، به LCP، INP و CLS و همچنین داده‌های واقعی کاربران توجه داشته باشید. اگر عملکرد ضعیف‌تر شد، تعداد افکت‌ها را کم کنید یا نوع ساده‌تری را امتحان کنید.

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

۵. به حساسیت کاربران نسبت به حرکت توجه کنید. حرکت‌های سریع، چشمک‌زن یا مداوم ممکنه برای بعضی کاربران آزاردهنده باشند. انیمیشن را آرام نگه دارید و اگر سایت شما امکان رعایت تنظیم prefers-reduced-motion را دارد، برای کاربرانی که کاهش حرکت را در سیستم‌عامل انتخاب کرده‌اند نسخه‌ای بدون افکت در نظر بگیرید.

کدام انیمیشن برای سایت شما مناسب‌تر است؟

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

• سایت‌های فناوری و استارتاپی: Topology یا Rings می‌تونند فضای مدرن‌تری بسازند، به‌شرط اینکه خطوط پس‌زمینه با متن رقابت نکنند.
• سایت‌های طراحی، هنر و معماری: Flying Objects یا Ripple برای ایجاد حرکت نرم مناسب‌اند.
• سایت‌های ورزشی: Gradient متحرک می‌تونه حس انرژی ایجاد کند، اما سرعت تغییر رنگ بهتره کنترل‌شده باشد.
• سایت‌های محصولات طبیعی یا آرایشی: Cloud، Snow یا گرادینت‌های روشن در صورت هماهنگی با تصاویر محصول می‌تونند فضای آرام‌تری بسازند.
• سایت‌های رسمی: معمولاً پس‌زمینه ثابت یا Gradient بسیار آرام انتخاب مطمئن‌تری است؛ چون توجه اصلی باید روی محتوا و اقدام کاربر باقی بمونه.

بررسی Marvy با Core Web Vitals

هیچ عدد ثابتی برای اثر Marvy بر سرعت همه سایت‌ها وجود نداره. یک افکت ممکنه روی صفحه‌ای ساده تأثیر ناچیزی داشته باشد، اما همان افکت در صفحه‌ای شلوغ و پر از اسکریپت نتیجه متفاوتی ایجاد کند. نوع دستگاه، مرورگر، قالب، افزونه‌های فعال و تنظیمات بهینه‌سازی هم در این تفاوت نقش دارند.

برای تصمیم‌گیری، یک نسخه آزمایشی از صفحه بسازید و آن را در شرایط یکسان، قبل و بعد از فعال‌سازی Marvy بررسی کنید. علاوه بر PageSpeed Insights، صفحه را روی یک موبایل واقعی باز کنید و روان‌بودن اسکرول، واکنش دکمه‌ها و مصرف پردازنده را زیر نظر بگیرید. برای آشنایی بیشتر با این موضوع، مقاله تأثیر سرعت سایت در سئو چقدر است را هم بخونید.

استفاده هم‌زمان از چند افزونه انیمیشن‌سازی

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

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

استفاده از Marvy در قالب اهورا و قالب‌های دیگر

Marvy برای استفاده در صفحاتی ساخته شده که با Elementor طراحی می‌شن. بااین‌حال، سازگاری نهایی فقط به پشتیبانی قالب از Elementor محدود نیست و نسخه قالب، افزونه‌ها و تنظیمات سایت هم اهمیت دارند. اگر از قالب اهورا یا هر قالب دیگری استفاده می‌کنید، ابتدا یک صفحه نمونه در محیط Staging بسازید و نمایش افکت را در دسکتاپ و موبایل آزمایش کنید.

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

جمع‌بندی

افزودن انیمیشن به پس زمینه در المنتور با Marvy مسیر نسبتاً ساده‌ای داره: افزونه را نصب می‌کنید، کانتینر یا سکشن را در Elementor انتخاب می‌کنید و افکت مناسب را از پنل Marvy تنظیم می‌کنید. بخش مهم کار، انتخاب شلوغ‌ترین انیمیشن نیست؛ باید افکتی پیدا کنید که بدون آسیب‌زدن به خوانایی، توجه کاربر را به محتوای اصلی هدایت کند.

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

تیم تولید محتوا

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