فعال سازی Floating Button در المنتور
مقدمه
در طراحی وبسایتهای مدرن، یکی از عناصر مهمی که نقش تأثیرگذاری در تجربه کاربر و افزایش نرخ تعامل (Engagement) دارد، دکمههای شناور یا Floating Button هستند. این نوع دکمهها همیشه در صفحه قابل مشاهدهاند و با اسکرول کاربر حرکت نمیکنند. چون همیشه در دید کاربر باقی میمانند، میتوانند او را به انجام یک اقدام مهم مانند تماس، ارسال پیام، خرید محصول یا شروع گفتگو تشویق کنند. افزونه المنتور بهعنوان پرطرفدارترین صفحهساز وردپرس، قابلیت ساخت Floating Button را در نسخههای جدید خود ارائه کرده است. در این مقاله بهصورت کامل، کارکرد، کاربرد، روش ساخت و نکات تخصصی مربوط به Floating Button در المنتور را بررسی میکنیم.
Floating Button چیست؟
Floating Button یک عنصر رابط کاربری است که به صورت شناور روی صفحه قرار میگیرد. برخلاف دکمههای معمولی که در داخل ساختار صفحه و در میان محتوا قرار دارند، دکمه شناور به یک نقطه مشخص از صفحه «چسبیده» است. این نقطه میتواند گوشه پایین راست، پایین چپ، بالا راست، بالا چپ یا حتی مرکز صفحه باشد. مهمترین ویژگی این دکمهها این است که وقتی کاربر صفحه را اسکرول میکند، جای آنها تغییر نمیکند و همواره در دید باقی میمانند.
این قابلیت باعث میشود استفاده کاربر بسیار راحتتر شود. اگر هدف طراح سایت، هدایت کاربران به انجام یک اقدام مشخص (CTA) باشد، دکمه شناور نقش بسیار مؤثری در افزایش نرخ تبدیل ایفا میکند. برای مثال، دکمههای واتساپ، تماس تلفنی، چت پشتیبانی، ثبت سفارش فوری و بازگشت به بالا، نمونههایی از Floating Button هستند.
مزایای استفاده از Floating Button در وبسایت بدون افزونه
فعال سازی Floating Button در المنتور
۱. افزایش نرخ تبدیل
هنگامی که یک دکمه مهم مانند «ثبت سفارش»، «خرید»، «تماس» یا «ارسال پیام» همیشه مقابل چشم کاربر باشد، احتمال استفاده از آن بهطور چشمگیری افزایش مییابد. کاربران معمولاً حوصله اسکرول به بالا یا جستجوی فرمها را ندارند؛ بنابراین دکمه شناور راهی سریع و ساده برای دسترسی آنها فراهم میکند.
۲. بهبود تجربه کاربری (UX)
وجود یک نقطه تماس سریع و دائمی باعث میشود کاربر در هر لحظه احساس کند میتواند کمک دریافت کند یا عملیاتی را شروع کند. این موضوع بهویژه در سایتهای موبایلی که فضای صفحه محدود است، اهمیت بیشتری دارد.
۳. جلب توجه کاربر
Floating Button یکی از عناصری است که توجهبرانگیز است. با استفاده از آیکون مناسب، رنگهای برجسته و انیمیشنهای ظریف، میتوان کاربر را به تعامل بیشتر ترغیب کرد.
۴. ظاهر مدرن و حرفهای
در بسیاری از سایتهای امروزی، بهخصوص اپلیکیشنها و سرویسهای آنلاین، دکمههای شناور یک استاندارد طراحی محسوب میشوند. استفاده از این سبک طراحی به وبسایت شما جلوهای مدرنتر و حرفهایتر میدهد.
روش ساخت Floating Button در المنتور
فعال سازی Floating Button در المنتور
المنتور دو روش کلی برای ساخت دکمه شناور ارائه میدهد:
استفاده از قالب آماده Floating Button
ساخت دکمه دستی با تنظیمات Fixed و Sticky
در نسخههای جدید، روش رسمی و توصیهشده المنتور استفاده از قالبهای آماده Floating Button است.
۱. ساخت Floating Button با قالبهای آماده
در المنتور، این دکمهها بهصورت یک تمپلیت طراحی میشوند. این یعنی بهجای اینکه داخل یک صفحه آن را بسازید، در بخش Template ساخته و سپس در صفحات دلخواه نمایش داده میشود.
مراحل ساخت:
مرحله ۱: ورود به بخش Template
در داشبورد وردپرس، وارد بخش مربوط به قالبهای المنتور شوید و یک Floating Button جدید ایجاد کنید.
مرحله ۲: انتخاب قالب آماده
المنتور مجموعهای از دکمههای شناور آماده دارد که هرکدام طراحی مخصوص خود را دارند. این قالبها میتوانند شامل:
دکمه تماس
دکمه واتساپ
چت پیام
کمک و پشتیبانی
بازگشت به بالا
فرم پیام
باشند.
پس از انتخاب قالب مناسب، آن را وارد محیط ویرایشگر المنتور میکنید.
مرحله ۳: سفارشیسازی دکمه
فعال سازی Floating Button در المنتور
در محیط ویرایشگر المنتور میتوانید همه چیز را تغییر دهید:
متن
آیکون
رنگ
پسزمینه
سایه
انیمیشن
فاصله از لبه
اندازه دکمه (کوچک، متوسط، بزرگ)
مرحله ۴: تعیین عملکرد دکمه
Floating Button معمولاً برای یک اقدام سریع ساخته میشود. عملکردهای متداول عبارتند از:
تماس تلفنی
ارسال پیام واتساپ
ارسال ایمیل
شروع چت
باز کردن پاپآپ
بازگشت به بالای صفحه
رفتن به یک بخش خاص از صفحه
شما میتوانید عملکرد موردنظر را تعیین کنید.
مرحله ۵: مشخص کردن موقعیت دکمه
فعال سازی Floating Button در المنتور
دکمه شناور باید در گروه Advanced قرار بگیرد، سپس از بخش Positioning نوع موقعیت را روی Fixed تنظیم کنید. در نتیجه، دکمه همیشه در مکان مشخصی روی صفحه باقی میماند.
مقادیر X و Y نیز تعیین میکنند دکمه چقدر از لبه فاصله داشته باشد.
مرحله ۶: تعیین شرایط نمایش
میتوان مشخص کرد:
دکمه فقط در صفحات خاص باشد
فقط در موبایل نمایش داده شود
فقط در دسکتاپ فعال باشد
برای همه کاربران سایت نمایش داده شود
این ویژگی برای حفظ نظم و جلوگیری از مزاحمت برای کاربر بسیار مهم است.
۲. ساخت Floating Button بهصورت دستی
در صورتی که نسخه المنتور شما از قالبهای آماده پشتیبانی نمیکند یا میخواهید کنترل بیشتری داشته باشید، میتوانید به صورت دستی یک دکمه بسازید.
مراحل:
۱. وارد صفحه المنتور شوید.
۲. ویجت Button را اضافه کنید.
۳. به بخش Advanced بروید.
۴. وارد Positioning شوید و Position را روی Fixed قرار دهید.
۵. موقعیت دکمه را تنظیم کنید (مثلاً پایین راست).
۶. Z-index دکمه را بالا ببرید تا زیر محتوا نرود.
۷. در صورت نیاز، از Motion Effects برای ایجاد انیمیشن شناوری استفاده کنید.
با این روش، دکمه شما روی هر صفحه فقط زمانی نمایش داده میشود که آن را دستی اضافه کنید.
فعال سازی Floating Button در المنتور
نکات مهم برای طراحی Floating Button حرفهای
۱. اندازه دکمه را مناسب انتخاب کنید
در موبایل، اندازه دکمه بهتر است کوچکتر باشد تا فضای صفحه را اشغال نکند.
۲. از رنگهای متضاد استفاده کنید
Floating Button باید خودش را از محیط جدا کند تا کاربر سریع آن را تشخیص دهد.
۳. از آیکونهای واضح استفاده کنید
آیکون واتساپ، تلفن، پیامرسان و… باید کاملاً قابل تشخیص باشد.
۴. دکمه را مزاحم نکنید
اگر دکمه خیلی بزرگ باشد یا جلوی متن را بگیرد، کاربر را آزار میدهد.
۵. عملکرد کاملاً مشخص باشد
کاربر باید بداند با فشار دادن دکمه چه اتفاقی میافتد.
۶. رفتار دکمه در موبایل را جدا تنظیم کنید
گاهی باید:
مکان دکمه در موبایل تغییر کند
اندازه آن تغییر کند
یا فقط در موبایل نمایش داده شود
فعال سازی Floating Button در المنتور
جمعبندی
Floating Button یکی از قدرتمندترین ابزارهای افزایش تعامل در وبسایت است. المنتور با ارائه قالبهای آماده و قابلیتهای گسترده برای سفارشیسازی، ساخت این دکمهها را بسیار ساده کرده است. چه بخواهید یک دکمه تماس فوری، یک دکمه واتساپ، یک دکمه پشتیبانی یا یک دکمه خرید طراحی کنید، المنتور تمام امکانات لازم را در اختیار شما قرار میدهد. مهمترین نکته این است که از این دکمهها بهصورت منطقی و بهینه استفاده کنید تا بهترین تجربه ممکن برای کاربران فراهم شود.
برای فعال سازی این حالت دکمه شناور
خوب دوستان برای اینکه این قابلیت در این افزونه اضافه بشه به هیچ افزونه دیگه لازم نیست فقط باید المنتور شما نسخه پرو و اورجینال باشه دوم اینکه نسخه المنتور
باید ۳.۳۳.۴ یا آخرین نسخه باشه حتما باید پرو باشد بعد از اینکه این شرایط داشتید کافی است به بخش به مسیر زیر بیایید
المنتور/ابزارها/کنترل نسخه
بخش تست نسخه بتا و یک لیست گشویی داره که آن باید فعال سازی کرده و ذخیره کنید و تمام بعد از اتمام در افزودن قالب یک بخش ایجاد میشه به نام عناصر شناور
