نوار پیشرفت دایره ای در المنتور، ساخت نوار پیشرفت دایره ای در المنتور ، یکی از مواردی هست که به کاربر سایت کمک می کنه تا با اسکرول صفحه، میزان پیشروی درون صفحه رو ببینه و میل کاربر رو برای خوندن ادامه مطلب صفحه بیشتر میکنه.
در این جلسه از سری آموزش های سایت کنترل وب، یاد می گیریم که به کمک امکانات افزونه صفحه ساز المنتور به چه روشی میشه یک نوار پیشرفت دایره ای در المنتور رو ایجاد کنیم و این قابلیت رو به سایت وردپرس خودمون اضافه کنیم.
توی این جلسه با استفاده از ویجت نوار پیشرفت دایره ای در المنتور، برای صفحه موردنظرمون، قابلیت موردنظر رو ایجاد می کنیم و با تنظیمات دلخواهی که روی این ویجت انجام میدیم مطابق با سلیقه طراحی می تونیم از این قابلیت جذاب در سایتمون استفاده کنیم.
ویجت نوار پیشرفت دایره ای در المنتور، یکی از امکاناتی که افزونه المنتور در اختیارمون قرار میده تا با استفاده از این ویجت، امکان ایجاد نوار پیشرفت های مختلف رو فقط به کمک خود افزونه برای صفحات سایتمون ایجاد کنیم.
قدم صفر برای طراحی نوار پیشرفت دایره ای در المنتور:
قدم صفر، اینه که صفحه ساز المنتور رو روی سایت وردپرسی خودتون نصب کنین. اگر با صفحه ساز المنتور آشنایی ندارین پیشنهاد می کنم که در صفحه آموزش المنتور، با این صفحه ساز جذاب و کاربردی وردپرس آشنا بشین.
بعد از نصب المنتور، به پیشخوان وردپرس می ریم و از طریق سایدبار سمت راست پیشخوان ، روی گزینه برگه ها نگه میداریم و به گزینه “همه برگه ها” می ریم تا به تمام صفحات دسترسی داشته باشیم.(پیشخوان–>برگه ها –> همه برگه ها)
در صفحه ” برگه ها” روی برگه موردنظرمون کلیک می کنیم و در صفحه ویرایش برگه، گزینه ویرایش با المنتور رو می زنیم تا به محیط المنتور منتقل بشیم و بتونیم صفحه رو با المنتور ویرایش کنیم.
برای اینکه نوار پیشرفت دایره ای در المنتور طراحی کنیم، از ویجت “نوار پیشرفت”( یا “progress tracker”) استفاده می کنیم.
برای دسترسی به این ویجت، از طریق نوار جست و جو بالای صفحه می تونیم با سرچ اسم این ویجت، به ویجت مورنظر دسترسی پیدا کنیم. پس با سرچ این ویجت و عمل کشیدن و رها کردن
(drag and drop) این ویجت در قسمتی مدنظر این ویجت رو ایجاد می کنیم.
تنظیم ویجت نوار پیشرفت دایره ای در المنتور:
1.تنظیمات مربوط به نوار محتوا:
از طریق گزینه “tracker type” می تونیم نوع نوار نمایش نوار پیشرفت رو مشخص کنیم. دو گزینه “افقی” و ” دایره ای” وجود داره که از طریق این تنظیم می تونیم نوع نوار پیشرفت رو تنظیم کنیم.
برای اینکه نوار پیشرفت به صورت دایره ای طراحی بشه، گزینه “دایره ای” رو برای این قسمت تنظیم می کنیم.
نوار پیشرفتی که فعال شده، به صورت پیش فرض درصد پیشرفت رو در حالت دایره ای نمایش نمیده. برای اینکه نوار پیشرفت موردنظر به صورت درصدی طراحی بشه، گزینه ای به نام “درصد”(یا “percentage”) وجود داره که با فعال کردن این گزینه می تونیم نوار پیشرفت به همراه درصد رو داسته باشیم.
2.تنظیمات مربوط به نوار استایل:
با استفاده از قسمت استایل ویجت، می تونیم تنظیمات مربوط به استایل دهی و موارد مربوط به ظاهر مثل رنگ، فونت و موارد مشابه مربوط به استایل رو مشخص کنیم.
– توی این قسمت منویی به نام “tracker” وجود داره که از طریق این منو می تونیم تنظیمات استایل مربوط به قسمت دایره خالی که به عنوان نگهدارنده میزان پیشرفت هست رو مشخص کنیم.
گزینه اول موجود توی این قسمت، “اندازه” هست که با استفاده از می تونیم مقدار اندازه نوار پیشرفت رو بر حسب پیکسل تنظیم کنیم.
با استفاده از قسمت “progress indicator” ، تنظیمات مربوط به نوار پیشرفت رو تنظیم می کنیم. با استفاده از گزینه رنگ می تونیم رنگ نوار پیشرفت رو تعیین کنیم. گفتنیه که در این قسمت می تونیم رنگ مورد نظر رو از طریق پالت رنگی باز شده و یا از طریق کد رنگی مشخص کنیم.
از طریق گزینه “Tracker background” هم می تونیم تنظیمات مربوط به دایره نگهدارنده نوار پیشرفت رو تنظیم کنیم. تنظیمات این بخش مشابه قسمت بالا قابل انجام هست.
– از طریق منو “content” ، می تونیم تنظیمات مربوط به استایل قسمت درصد نوار پیشرفت رو مشخص کنیم . با استفاده از گزینه رنگ می تونیم رنگ قسمت درصد رو مشخص کنیم و با استفاده از قسمت “تایپوگرافی” اندازه و موارد مربوط به فونت درصد موجود در نوار پیشرفت قابل تنظیم هست.
3.تنظیمات مربوط به نوار پیشرفته:
با استفاده از این قسمت تنظیمات پیشرفته که مربوط به موارد عمومی تر ویجت ها هستن رو تنظیم میکنیم. برای اینکه نوار پیشرفتمون به صورت ثابت در بالای صفحه قرار بگیره و با اسکرول کردن به سمت پایین، به صورت ثابت همیشه در بالای صفحه قابل مشاهده باشه، باید با استفاده از تنظیمات قسمت “جایگاه”، این امکان رو تنظیم کنیم.
بنابراین با استفاده از قسمت “جایگاه” و تنظیم این قسمت بر روی گزینه ” ثابت” ویجت نوار پیشرفت دایره ای در المنتور به صورت ثابت در بالای صفحه قرار می گیره.
با استفاده از دو گزینه “افست”، می توانیم در راستای عمودی و افقی صفحه جایگاه ویجت نوار پیشرفت دایره ای در المنتور رو تنظیم کنیم. پس با تنظیم هر کدوم از این مقادیر به اندازه موردنیازمون جایگاه ویجت رو تنظیم می کنیم.
قدم نهایی:
اگر به ویجت ایجاد شده دقت کنیم وقتی صفحه رو اسکرول می کنیم و به سمت پایین می ریم، ویجتی که طراحی کردیم، به زیر بعضی از المان های صفحه میره و بر خلاف داشتن جایگاه ثابت، قابلیت مشاهده رو در طول صفحه از دست میده.
این مشکل معمولا وقتی که یک ویجت رو با جایگاه ثابت تنظیم می کنیم به وجود می آید. برای رهایی از این مشکل، باید کاری کنیم که لایه ویجت موردنظرمون نسبت به بقیه المان های صفحه بالاتر قرار بگیره.
برای اینکار قابلیتی به نام “z-index” که یکی از ویژگی های زبان سی اس اس(css)، استفاده می شه که با استفاده از این قابلیت و تعیین عدد برای ویجت می تونیم مشخص کنیم که لایه ویجت موردنظر چه مقدار بالا بیاد. هر چه عدد “z-index” بالاتر باشد، ویجت در لایه بالاتری قرار می گیرد.
پس با تنظیم این عدد از طریق گزینه “z-index” میتونیم این مقدار رو تنظیم کنیم و ویجت رو بالاتر از همه ی المان های صفحه قرار دهیم.
اگر تا اخر این مراحل با ما همراه بودین تبریک می گم! چون شما موفق شدین که همین سادگی طراحی نوار پیشرفت دایره ای در المنتور رو المنتور رو اجام بدین و این قابلیت جذاب و کاربردی روو به صفحه سایتتون اضافه کنین.
امیدوارم که از این آموزش لذت برده باشین.
