ساخت صفحه لودینگ با المنتور Preloader

9 دی 1401

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

صفحه لودینگ یا preloader چیست؟

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

حالا ما به عنوان مدیر یا طراح سایت باید چیکار کنیم؟

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

چگونه با المنتور یک preloader بسازیم؟

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

در مرحله اول یکی از برگه های سایت خودمون رو با ویرایشگر المنتور باز میکنیم. (اینکه چه برگه ای رو باز کنیم مهم نیست). از قسمت منوی المنتور وارد بخش تنظیمات سایت شده و سپس طبق تصویر زیر گزینه انتقال های صفحه رو انتخاب میکنیم.

انتخاب یک page transition

وارد بخش page transiron شده و طبق راهنمای زیر یک بک گراند مناسب ایجاد میکنیم.

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

ساخت preloader با انیمیشن

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

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

ساخت preloader با آیکن

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

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

ساخت preloader با تصویر

آخرین حالتی که میتونیم انتخاب کنیم از نوع تصویر هست. تو این حالت میتونیم یک تصویر به دلخواه خودمون از اینترنت دانلود و در این بخش اپلود کنیم. انواع مختلف تصویر مانند jpg ,png ,gif رو میتونیم تو این بخش قرار بدیم و بعد طبق راهنمای زیر شخصی سازیش کنیم.

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

امیدوارم که این پست براتون مفید بوده باشه 🙂

اشتراک گذاری:

نویسنده این مطلب :

نیما حاجی زاده

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