با یک کلیک، برگرد بالا | ساخت دکمه بازگشت به بالا در المنتور – سلام رفیق! 😊 چطوری؟ امیدوارم روز خوبی داشته باشی! امروز میخایم بریم سراغ یه ویژگی خیلی باحال که ممکنه خیلی از ماها تو سایتهای مختلف دیده باشیم، ولی هیچ وقت فکر نکردیم که چقدر میتونه به تجربه کاربری کمک کنه! 😎 فرض کن وارد یه سایت میشی که صفحهاش خیلی طولانیه و توی موبایل داری ساعتها با انگشتت اسکرول میکنی که برسی به یه مطلب یا بخشی که دنبالشی. یک دکمه کوچیک به اسم “بازگشت به بالا” میتونه همه این دردسرها رو تموم کنه و کاربر رو با یه کلیک به بالای صفحه بفرسته! 😍
حالا شاید تو ذهنت این سوال باشه: “خب، این دکمه به چه درد میخوره؟” یا “چطور باید این دکمه جادویی رو بسازم؟” 😅 اصلاً نگران نباش! قراره بهت آموزش بدم! با استفاده از المنتور، تو کمتر از 7 دقیقه میتونی این دکمه فوقالعاده رو تو سایتت پیاده کنی. این دکمه نه تنها تجربه کاربری سایتت رو یه پله میبره بالا، بلکه تاثیر مثبتی هم روی سئو میذاره. یعنی یه تیر، دو نشون! 🎯
پس اگه میخوای سایتت رو حرفهایتر کنی و اسکرول به بالای صفحه برای کاربرات راحتتر بشه، بیا با من همراه شو و یاد بگیر چطور با یک دکمه، همه چیز رو تغییر بدی! 🚀👇
دکمه بازگشت به بالا چیه و چرا بهش نیاز داریم؟ 🧐
خب، بذار اول یه توضیح مختصر بدم که دکمه بازگشت به بالا چیه. این دکمه همونطور که از اسمش پیداست، یه دکمه کوچک و کاربردی در انتهای صفحه وبسایت هست یا هم به صورت شناور گوشه سمت چپ یا راست پایین وب سایت، که با یک کلیک ساده، کاربر رو به بالای صفحه هدایت میکنه. این دکمه معمولاً وقتی صفحه طولانی میشه و کاربر باید برای پیدا کردن محتوا یا اطلاعات بیشتر باید به بالا برگرده، خیلی مفیده.
✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD
چرا باید دکمه بازگشت به بالا رو تو سایتت بذاری؟ 🤩
- تجربه کاربری بهتر: وقتی کاربر مجبور نباشه دوباره به صورت دستی اسکرول کنه، تجربه استفاده از سایت بهتر میشه.
- سئو و رتبهبندی بهتر: وقتی کاربران مدت زمان بیشتری رو تو سایت شما میمونن، گوگل این رو به عنوان سیگنالی از رضایت کاربر میفهمه و میتونه به بهبود سئو کمک کنه.
- دسترسی راحتتر: مخصوصاً تو سایتهای موبایلی که صفحه طولانی هست، اسکرول طولانی با انگشت خسته کننده و آزار دهنده هست، دکمه بازگشت به بالا در این موارد میتونه خیلی کاربردی باشه.
حالا که این ویژگی رو بهتر شناختیم، وقتشه که ببینیم چطور میتونیم با المنتور، این دکمه رو بسازیم!
ساخت دکمه بازگشت به بالا شناور در المنتور 👌🚀
قدم اول: نصب المنتور
برای ساخت دکمه بازگشت به بالا در المنتور، اولین کاری که باید بکنی اینه که المنتور رو نصب و فعال کنی. اگه هنوز المنتور رو نصب نکردی، میتونی از مخزن وردپرس دانلود کنی. همینطور نسخه پرو المنتور رو هم میتونی از طریق کتابخانه افزونه رایا وردپرس دانلود کنی.
قدم دوم: ایجاد یک بخش (Section) جدید
خب، حالا که المنتور رو نصب کردی، باید یه سکشن یا بخش جدید برای اضافه کردن دکمه بازگشت به بالا بسازی.
- وارد پیشخوان وردپرس بشو و وارد صفحهای بشو که میخوای دکمه رو توش بذاری.
- روی دکمه “ویرایش با المنتور” کلیک کن.
- تو صفحه المنتور، از وسط صفحه نماد + رو بزن و یه بخش جدید اضافه کن.
قدم سوم: اضافه کردن ویجت دکمه (button)
الان باید ویجت دکمه رو به صفحهات اضافه کنی. برای اینکار:
- از پنل سمت راست المنتور، ویجت “دکمه” (Button) رو پیدا کن.
- این ویجت رو بکش و داخل سکشن جدیدی که ساختی رها کن.
- حالا دکمه رو به دلخواه تغییر بده؛ مثلا میتونی اسم دکمه رو بذاری “بازگشت به بالا” یا هر عبارتی که به ذهنت میاد. 😊 ( میتونی اسم هم واسش نزاری و فقط از آیکون یا نماد استفاده کنی)
قدم چهارم: تنظیمات دکمه بازگشت به بالا
حالا که دکمه رو اضافه کردی، وقتشه که تنظیمات دکمه رو انجام بدی:
روی دکمه کلیک کن و به تب محتوا برو، ابتدا متنش (اینجا کلیک کنید) رو پاک کن چون میخایم طراحی مینیمال داشته باشیم بعد یه آیکون مرتبط واسه دکمه ات (مثلا circle up) انتخاب کن یا بارگذاری کن.
حالا، میخواییم این دکمه رو کمی جذابتر کنیم! میتونی رنگ دکمه، اندازه رو تنظیم کنی. اینجوری دکمهات با بقیه اجزای صفحه هماهنگ میشه. برای اینکار به تب استایل دکمه برو و از قسمت تایپوگرافی اندازه فونت رو روی 45 پیکسل بزار تا اندازه آیکون بزرگ بشه. از قسمت رنگ متن، رنک آیکون رو میتونی به رنگ دلخواه و از قسمت رنگ میتونی رنگ پس زمینه دکمه رو تغییر بدی تا با طراحی سایتت همخوانی داشته باشه 🙂
برای اینکه گوشه های دکمه بازگشت به بالا نرم تر و دایره ای بشه به پایین همین تب استایل اسکرول کن و از بخش انحنای حاشیه، بردر ردیوس رو روی 50 پیکسل تنظیم کن. همینطور فاصله داخلی که پایین همین بخشه رو 0 پیکسل در نظر بگیر. تا شکل نهایی کار به صورت زیر بشه.
حالا به تب پیشرفته ویجت دکمه برو و جایگاه اون رو روی “ثابت” قرار بده.
این کار باعث میشه دکمه به گوشه صفحه بچسبه و دکمه ما حالت شناور داشته باشه 🙂
وقتی جایگاه دکمه رو ثابت انتخاب کردی، گزینه های جهت و افست رو میتونی ببینی! تنظیمات این گزینه ها رو به صورت زیر انجامش بده!
جهت افقی رو روی راست تنظیم کن و افست افقی رو ۱۰ پیکسل بذار، اینجوری دکمه از سمت راست صفحه یه فاصله کوچیک میگیره. حالا برای جهت عمودی، دکمه رو پایین تنظیم کن تا همیشه چسبیده به پایین صفحه باشه. افست عمودی رو هم ۱۰ پیکسل بذار تا از پایین صفحه فاصله مناسبی داشته باشه و درست توی چشم بیفته! 😎
کارمون هنوز تموم نشده! 😅 تا اینجا دکمه بازگشت به بالا رو درست کردیم که به صورت چسبان و شناور همیشه تو صفحه نمایش داده میشه. اما این اصلاً اونطور که باید حرفهای نیست! چرا؟ چون وقتی کاربر هنوز بالای صفحه است، نمایش این دکمه اصلاً جذاب نیست و به سایت لطمه میزنه. 🤷♂️
ما میخواهیم دکمه وقتی نشون داده بشه که کاربر کمی اسکرول کرده باشه و به پایین صفحه رسیده باشه. یعنی دکمه باید زمانی که نیاز داره، به صورت چسبان ظاهر بشه. خب حالا چطور باید این کارو بکنیم؟ 🤔
برای ایجاد چنین قابلیتی باید به تب پیشرفته دکمه بری و از قسمت موشن افکت، افکت اسکرول رو فعال کن و در بخش شفافیت یا transparency تنظیمات زیر رو اعمال کن:
- جهت یابی رو Fade In انتخاب کن.
- از قسمت Viewport میتونی میزان اسکرول صفحه رو تنظیم کنی تا افکت دقیقاً زمانی که کاربر به مقدار مشخصی اسکرول کرد، اعمال بشه. توی این بخش دو تا تنظیم هست که به کمک نوار لغزان قابل تغییرن. نوار لغزان سمت چپ شروع اعمال افکت رو تنظیم میکنه. یعنی هر درصدی که بذاری، افکت وقتی اعمال میشه که کاربر اونقدر از صفحه رو اسکرول کرده باشه. نوار لغزان سمت راست میزان شدت اعمال افکت رو تنظیم میکنه. هر چی این دو عدد (نوار لغزان سمت چپ و راست) به هم نزدیکتر باشن، دکمه بازگشت به بالا سریعتر ظاهر میشه.
حالا وقتشه که قدم نهایی رو برداریم! 😎 برای اینکه دکمه بازگشت به بالا درست کار کنه و کاربر رو به بالای صفحه هدایت کنه، باید یه شناسه CSS اختصاصی به بالاترین قسمت سایتت بدی (معمولاً هدر). مثلاً میتونی نام “Top” رو انتخاب کنی. این کارو از طریق تب پیشرفته میتونی انجام بدی.
بعدش میری تو تب محتوای دکمه و تو فیلد لینک، لینک رو به این صورت مینویسی: #top و تموم! 🎉
حالا دکمه بازگشت به بالای عالی و کاربردی برای سایتت داری! 🚀
آیا این مقاله برات مفید بود؟ 🤔 سوال یا مشکلی داری؟ حتما تو کامنتها بنویس! همچنین اگر تجربهای از استفاده از دکمه بازگشت به بالا داری، خوشحال میشیم به اشتراک بذاری! 😄👇
