دکمه بازگشت به بالا در المنتور

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

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

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

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

پس با تمام این توضیحات در ادامه به صورت مرحله به مرحله این دکمه کاربردی رو ایجاد می کنیم.

مرحله صفر:نصب صفحه ساز المنتور

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

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

بعد از نصب و فعال سازی المنتور، برای داشتن این ویژگی مراحل زیر رو انجام میدیم:

مرحله اول ساخت دکمه بازگشت به بالا در المنتور:

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

بعد از ساخت یک بخش ، با قرار دادن المان دکمه در اون بخش، دکمه رو تبدیل به دکمه موردنظر  می کنیم. برای این که به المان “دکمه” دسترسی باشیم از طریق بخش جست و جو، ویجت دکمه رو پیدا می کنیم.

مرحله دوم ساخت دکمه بازگشت به بالا در المنتور:

بعد از اضافه کردن دکمه، به تب ویرایش محتوا المان دکمه میریم و از این قسمت از طریق گزینه “چیدمان”، چیدمان دکمه رو روی راست قرار می دیم. با این کار دکمه در قسمت راست بخش ساخته شده در قسمت قبلی قرار می گیره.

مرحله سوم ساخت دکمه بازگشت به بالا در المنتور:

برای اینکه دکمه ی موردنظر تبدیل به یک دکمه آیکون دار بشه  در قدم اول متن دکمه رو حذف می کنیم تا دکمه فقط آیکون داشته باشه.

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

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

بعد ا اینکه آیکون موردنظر رو از بین آیکون های موجود انتخاب کردین، دکمه به صورت زیر طراحی می شه:

مرحله چهارم ساخت دکمه بازگشت به بالا در المنتور:

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

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

مرحله پنجم ساخت دکمه بازگشت به بالا در المنتور:

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

این کار باعث این میشه که حس  چسبیدن دکمه موردنظر به صفحه نمایشگر رو به کاربر میده و می تونه همیشه مقابل چشمان کاربر و در دسترس کاربر قرار داشته باشه.

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

مرحله ششم ساخت دکمه بازگشت به بالا در المنتور:

اگر به طراحی دکمه دقت کرده باشین، به دلیل اینکه در مرحله قبلی به صورت ثابت دکمه رو تنظیم کردیم، دکمه از ابتدا تا انتهای صفحه به صورت ثابت قرار می گیره و اگر کاربر در بالای صفحه باشه، باز هم این دکمه رو در کنار صفحه مشاهده می کنه.

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

برای اینکه همچین قابلیتی رو ایجاد کنیم، از طریق قسمت “موشن افکت” در تب “پیشرفته“، با فعال سازی موشن افکت و از طریق گزینه “transparency”، این قابلیت رو ایجاد می کنیم.

بعد از فعال سازی این قسمت، تنظیمات زیر رو مشاهده می کنیم که از طریق گزینه “direction” می تونیم مدل شفافیت رو تعیین کنیم که برای طراحی ما گزینه “Fade In” مناسب هست.

همچنین یک قسمت “Viewport” وجود داره که با استفاده از اون می تونیم میزان اسکرول شدن صفحه برای این افکت اعمال رو تنظیم کنیم.

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

بنابراین هر چقدر این دو عدد به یکدیگر نزدیک باشن، نمایش دکمه سریع تر اتفاق می افته.

مرحله نهایی در ساخت دکمه بازگشت به بالا در المنتور:

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

برای این منظور  بالاترین بخش صفحه رو انتخاب می کنیم و با مراجعه به تب “پیشرفته”  کلاسی برای این بخش انتخاب می کنیم.

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

با تکمیل تمام مراحل قبلی شما موفق شدین که بدون هیج کد و یا افزونه ای فقط به کمک المنتور، دکمه بازگشت به بالا در المنتور رو ایجاد کنین. امیدوارم که این مطلب براتون مفید بوده باشه.