ساخت لودینگ «Preloader» برای سایت با المنتور

ساخت لودینگ «Preloader» برای سایت با المنتور: سلام به همه دوستای گلم تو این پست بهتون یاد میدم چطوری با المنتور و بدون نصب هیچ افزونه اضافی برای سایتتون حالت لودینگ یا پریلود (Preloader) بسازید. با من تا انتهای این مقاله از سری مقالات المنتور تی وی رایا وردپرس همراه باشید 😘

ساخت لودینگ (Preloader) برای سایت با المنتور: راهنمای جامع

لودینگ (Preloader) یا پیش بارگذاری چیه اصن. حتما دیدید بعضی سایت ها قبل از اینکه محتوای صفحه به طور کامل نمایش داده بشه یه حالت پیش بارگذاری دارن که به کاربر نشون بدن که عناصر و محتوای سایت داره بارگذاری میشه استفاده از لودینگ میتونه تجربه کاربری رو بهبود بده و به سایت شما ظاهری حرفه‌ای‌تر بده.

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

👈 برای دانلود المنتور پرو اینجا کلیک کنید.

×✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کنAD

روش‌ ساخت لودینگ در المنتور

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

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

در این صفحه دو بخش داریم یکی page transition و یکی Preloader.

در بخش page transition ما میتونیم رنک و انیمیشن اومدن و رفتن بکگراند رو تنظیم و سفارشی کنیم.

در بخش page transition هم میشه آیکون لودینگ رو سفارشی کرد هم میتونیم از انیمیشن های خود المنتور استفاده کنیم یا آیکون یا تصویر سفارشی بارگذاری کنیم و استفاده کنیم.

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

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

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

کلاس بکگراند لودینگ رو اینجا بنویسید { 
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
}

همچنین برای درک بهتر و نحوه انجام کار میتونید ویدیو آموزش ساخت لودینگ سفارشی با المنتور رو هم تماشا کنید 🙂

🎞 ویدیو آموزش ساخت لودینگ سایت با المنتور

جمع بندی

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