ساخت نوار پیشرفت خواندن: تا حالا برات پیش اومده وارد یه مقاله طولانی و جذاب بشی، اما وسطای خوندن یهو سردرگم بشی که «چقدر دیگه مونده؟!» و بی‌خیال خوندنش بشی؟ 😕
خیلیا این حسو تجربه کردن! مخصوصاً وقتی مقاله یه‌کم مفصل باشه و اسکرول کردن تا پایین صفحه تموم نشه…

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

و خبر خوب اینه که اگه از المنتور استفاده می‌کنی، ساخت این نوار خفن اصلاً سخت نیست! نه نیاز به افزونه اضافی داری، نه حتی یه خط کدنویسی. فقط کافیه از ویجت آماده و قدرتمند ردیاب نوار پیشرفت (Progress Tracker) استفاده کنی 🎯

توی این آموزش قراره قدم‌به‌قدم با هم یاد بگیریم چطوری با المنتور یه نوار پیشرفت خواندن شیک و کاربردی برای مقالاتت بسازی، اونم به ساده‌ترین روش ممکن. آماده‌ای؟ 😎 بزن بریم!

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

اصلاً نوار پیشرفت خواندن چیه؟ و به چه درد می‌خوره؟ 🤔

نوار پیشرفت خواندن (Reading Progress Bar) یه نوار باریک و معمولا رنگیه که وقتی کاربر اسکرول می‌کنه، نشون می‌ده چند درصد از محتوای صفحه رو خونده. یه جور راهنمای بصریه که باعث می‌شه کاربر بهتر تمرکز کنه، حس کنه توی مسیر درسته و تا آخر مقاله باهات همراه بمونه.

✨ مهم‌ترین مزایای استفاده از نوار پیشرفت خواندن:

• افزایش درگیر شدن کاربر با محتوا
• کاهش نرخ پرش (Bounce Rate)
• افزایش مدت زمان موندن در صفحه
• تجربه کاربری بهتر

چرا از خود المنتور برای ساخت نوار پیشرفت استفاده کنیم؟ 🛠️

درسته که کلی افزونه برای ساخت نوار پیشرفت خواندن وجود داره، ولی وقتی خود المنتور یه ویجت اختصاصی و خفن به اسم Progress Tracker داره، احتیاجی نیست سمت ابزارای اضافه بری! ✌️

این ویجت دقیقاً برای همین کار طراحی شده و چند تا مزیت اساسی داره که نمی‌تونی راحت ازش بگذری:

✅ سبک و سریعه و روی عملکرد سایت تأثیر منفی نمی‌ذاره
✅ کاملاً قابل شخصی‌سازیه؛ از رنگ و ضخامت گرفته تا موقعیت نوار
✅ نیازی به نصب هیچ افزونه‌ی اضافه‌ای نداره؛ همه‌چی توی خود المنتوره!

اگه دنبال یه راه ساده، بی‌دردسر و حرفه‌ای برای اضافه کردن نوار پیشرفت خواندن هستی، این ویجت دقیقاً همون چیزیه که دنبالش بودی 😎

آشنایی با ویجت ردیاب نوار پیشرفت در المنتور

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

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

حالا وقتشه بریم سر اصل ماجرا! آماده‌ای؟ بزن بریم 🚀

مرحله ۱: وارد ادیتور المنتور شو

برو به یکی از صفحاتی که با المنتور ساختی (ترجیحا قالب یا تمپلیت پست تکی) و روی دکمه “ویرایش با المنتور” کلیک کن.

مرحله ۲: ویجت Progress Tracker رو بکش داخل صفحه

• توی پنل سمت راست المنتور، عبارت Progress Tracker یا ردیاب نوار پیشرفت رو جستجو کن.
• ویجت رو بگیر و بنداز بالاترین قسمت بدنه صفحه (معمولاً توی هدر یا قبل از محتوا).

مرحله ۳: تنظیمات ویجت رو سفارشی کن

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

🧭 نوع ردیاب (Tracker Type)

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

1️⃣ افقی (Horizontal)

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

مزایا:

• ساده و مینیمال
• برای صفحات طولانی ایده‌آله
• حس مسیر خوندن رو دقیق منتقل می‌کنه

2️⃣ دایره‌ای (Circular)

در این حالت نوار به‌جای اینکه خطی باشه، به شکل دایره‌ای نمایش داده می‌شه — مثلاً شبیه یه Progress Ring یا حلقه پیشرفت! این حالت بیشتر برای طراحی‌های خاص یا استفاده کنار دکمه‌های ثابت (مثل دکمه رفتن به بالا) کاربرد داره.

مثال کاربردی: می‌تونی یه دکمه ثابت گوشه پایین صفحه بذاری که یه نوار دایره‌ای کوچیک توش نشون بده کاربر چقدر از مطلب رو خونده!

مزایا:

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

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

📏 پیشرفت نسبت به (Progress Relative To)

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

با توجه به تصویر، سه گزینه داری:

1️⃣ کل صفحه (Entire Page)

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

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

2️⃣ محتوای نوشته (Post Content)

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

کاربردش چیه؟
وقتی صفحه‌ت المان‌های غیرمحتوایی زیاد داره و می‌خوای تمرکز نوار فقط روی متن اصلی باشه.

3️⃣ سِلِکتور (Selector)

اینجا دستت کاملاً بازه!
می‌تونی با وارد کردن یک کلاس یا آیدی CSS، دقیقاً مشخص کنی نوار نسبت به چه بخشی محاسبه بشه.

مثال: اگه یه بخش خاص از صفحه رو با کلاس .custom-section ساختی، می‌تونی همون رو به‌عنوان سِلِکتور وارد کنی.

برای کی خوبه؟
طراح‌های حرفه‌ای که با ساختار HTML/CSS آشنان و می‌خوان نوار رو روی یه قسمت خاص مثل تایم‌لاین، اسلایدر، یا فرم بلند پیاده کنن.

📌 پیشنهاد من برای بیشتر سایت‌ها:
اگه هدفت ساخت یه نوار پیشرفت خواندن عمومی برای مقاله یا صفحه‌ست، گزینه کل صفحه بهترین انتخابه 😉
اما اگه طراحی خاصی داری یا می‌خوای فقط یه ناحیه خاص دنبال بشه، برو سراغ “محتوای نوشته” یا “سِلِکتور”.

تنظیم جهت حرکت نوار (Tracker Direction) ↔️

با استفاده از گزینه «جهت‌یابی» (Direction) که آیکونش را در تصویر می‌بینی، می‌توانی مسیر حرکت نوار را تعیین کنی.

گزینه‌های اصلی اینها هستن:

• چپ به راست
• راست به چپ

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

🔢 نمایش درصد (Show Percentage)

این گزینه یه قابلیت کوچیک اما کاربردیه!
اگه فعالش کنی، درصد عددی پیشرفت کنار یا داخل نوار نمایش داده می‌شه.
مثلاً کاربر می‌فهمه ۴۷٪ مقاله رو خونده و همین حس پیشرفت، احتمال ادامه مطالعه رو بیشتر می‌کنه 😎

مرحله چهار: جذاب‌ سازی نوار پیشرفت خواندن در تب “استایل” (Style) 🎨

اینجا جاییه که می‌تونی به نوار پیشرفت خواندن سایتت هویت بصری بدی و حسابی خوشگلش کنی!

• Height (ارتفاع): ارتفاع نوار رو مشخص کن. معمولاً عددی بین ۵ تا ۱۵ پیکسل ایده‌آله. نه خیلی نازک که دیده نشه، نه خیلی ضخیم که مزاحم باشه.
• Color (رنگ): رنگ اصلی نوار پیشرفت رو انتخاب کن. سعی کن از رنگی استفاده کنی که با پالت رنگی برندت هماهنگ باشه و در عین حال به خوبی دیده بشه.
• Background Color (رنگ پس‌زمینه): این رنگِ قسمتی از نوار هست که هنوز پر نشده. استفاده از یک رنگ خنثی و کم‌رنگ (مثل خاکستری روشن) در اینجا نتیجه خوبی می‌ده.
• Border (کادر): می‌تونی برای نوار خودت کادر هم تعریف کنی تا ظاهر متمایزتری داشته باشه.

مرحله پنجم : تنظیمات تب “پیشرفته” (Advanced) نوار پیشرفت خواندن

در اکثر مواقع نیازی به تغییرات در این تب نداری. اما یک گزینه مهم وجود داره:

• Z-Index: این گزینه اولویت لایه‌ها رو مشخص می‌کنه. اگه دیدی نوار پیشرفت زیر هدر یا منوی چسبان سایتت قرار گرفته، یک عدد بزرگ (مثلاً 9999) در این فیلد وارد کن تا نوار روی تمام عناصر دیگه نمایش داده بشه.
• Position (موقعیت ثابت): مهم‌ترین بخش! اینجا انتخاب می‌کنی که نوار در بالای صفحه (Top) یا پایین صفحه (Bottom) ثابت باشه. هر دو حالت محبوب هستن، انتخابش با توئه!

تبریک می‌گم! 🎉 به همین سادگی نوار پیشرفت خواندن خودت رو ساختی. صفحه رو ذخیره کن و از نتیجه لذت ببر.

❓ سوالات متداول (FAQ)

1. آیا نوار پیشرفت خواندن فقط برای مقاله‌های طولانی کاربرد داره؟

نه، ولی توی محتواهای طولانی بیشتر به چشم میاد و مفیدتره. البته توی صفحات فرود هم می‌تونه کاربر رو تشویق کنه تا ادامه بده.

2. می‌تونم این نوار رو فقط توی موبایل نشون بدم؟

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

3. اگه قالبم هدر چسبان (Sticky Header) داره چی؟

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

4. چطوری بفهمم این نوار واقعاً باعث افزایش تعامل کاربر شده؟

میتونی از ابزارهایی مثل Hotjar یا Google Analytics استفاده کنی تا نرخ اسکرول و زمان موندن توی صفحه رو بررسی کنی.

5. آیا می‌توانم نوار پیشرفت را فقط در مقالات نمایش دهم و در صفحات دیگه نمایش داده نشه؟

بله! بهترین راه برای این کار استفاده از قالب‌ ساز المنتور (Theme Builder) است. تو می‌تونی یک قالب Single Post (پست تکی) طراحی کنی و ویجت نوار پیشرفت را فقط در آن قالب قرار بدی. به این ترتیب، نوار به صورت خودکار فقط در تمام پست‌های وبلاگ تو نمایش داده می‌شه.

6. آیا استفاده از نوار پیشرفت خواندن سرعت سایت را کم می‌کند؟

خیر. ویجت Progress Tracker المنتور بسیار بهینه و سبک طراحی شده. تأثیرش روی سرعت سایت انقدر ناچیزه که اصلاً قابل اندازه‌گیری نیست و جای هیچ نگرانی‌ای وجود نداره.

7. آیا می‌توانم ظاهر نوار پیشرفت را گرادیانتی کنم؟

بله! در تب استایل و بخش رنگ، می‌توانی به جای رنگ ثابت، از گرادیانت (Gradient) استفاده کنی تا ظاهر بسیار مدرن‌تری داشته باشی. برای افکت‌های متحرک پیچیده‌تر، نیاز به استفاده از CSS سفارشی در تب پیشرفته ویجت خواهی داشت، اما استایل‌های پیش‌فرض خود المنتور هم بسیار زیبا و کافی هستند.

سخن پایانی

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

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

🤔راستی ترجیح میدی نوار پیشرفت بالای صفحه باشه یا پایین؟ نظرت رو برامون توی کامنت‌ها بنویس!

ساخت هاور افکت ترسیم خطوط حاشیه دکمه یا باکس در المنتور

مطالعه

ساخت لندینگ‌ پیج حرفه ای در المنتور بدون کدنویسی

مطالعه

جادوی CSS: ایجاد افکت گرادینت متحرک روی متن با المنتور

مطالعه