ساخت دکمه شناور در المنتور یکی از قابلیتهای جذاب و بسیار کاربردی این صفحهساز محبوب وردپرس است که با نسخههای جدید المنتور به شکل چشمگیری ارتقا یافته است. دکمه شناور یا Floating Button دکمهای است که به صورت چسبان و همیشه در دید کاربر روی صفحه باقی میماند و امکان دسترسی سریع به عملکردهای مهم سایت را فراهم میکند.
افزودن دکمه شناور به سایت با المنتور در نسخههای قدیمی این افزونه، با اضافه کردن یک دکمه یا آیکن و با کمک css برای ایجاد حالت انیمیشنی یا با استفاده از افزونههای وردپرسی امکان پذیر بود، اما با آپدیتهای اخیر المنتور و المنتورپرو قابلیت ساخت دکمه شناور در المنتور و همچنین ساخت نوارهای شناور به این افزونه قدرتمند اضافه شده است.
در این مقاله، گامبهگام نحوه ساخت دکمه شناور در المنتور و تنظیمات آن را آموزش داده، سپس به بررسی ویژگیهای کلیدی، دلایل اهمیت و کاربردهای متنوع این نوع دکمه میپردازیم.
دکمه شناور چیست؟
همانطور که میدانید، دکمه شناور یک عنصر تعاملی در محتوای صفحه است که در یک موقعیت ثابت در دید کاربر قرار میگیرد و با اسکرول یا پیمایش صفحه حرکت نمیکند. این عنصر به گونهای طراحی میشود که همیشه در دسترس کاربر باشد و شامل یک عملیات مهم مثل تماس، چت آنلاین، خرید یا حتی بازگشت به بالای صفحه را انجام میدهد.
مراحل ساخت دکمه شناور در المنتور
- بروزرسانی المنتور و المنتورپرو
برای بهرهمندی از قابلیت جدید ساخت دکمه شناور در المنتور، ابتدا افزونه المنتور را به آخرین نسخه بهروزرسانی کنید. این ویژگی عمدتاً در نسخههای جدید المنتور پرو به صورت کامل و بدون هیچگونه خطایی در دسترس است.
- ورود به بخش عناصر شناور
از پیشخوان وردپرس، وارد مسیر قالبها»عناصرشناور شوید.
یا از همان طریق، وارد بخش قالبها شوید و روی دکمه “همه” کلیک کنید تا تمامی قالبهای المنتوری ظاهر شوند. سپس روی تب “المان شناور” کلیک کنید.
- افزودن اولین دکمه شناور
بعد از ورود به بخش عناصر شناور، با کلیک روی «افزودن عنصر شناور جدید» یک قالب شناور جدید بسازید. قالب را بهصورت «دکمههای شناور» (Floating Button) تعریف کنید.
سپس وارد کتابخانه دکمههای شناور در المنتور میشوید. باتوجه به رابط کاربری سایت، یکی از تمپلیتهای آماده را انتخاب کنید روی درج بزنید تا وارد محیط ویرایش با المنتور شوید.
طراحی دکمه شناور در المنتور
بعد از اینکه وارد صفحه ویرایشگر المنتور شدید، نوبت به استایل دهی و سفارشی کردن دکمه شناور است. تنظیمات دکمه شناور باتوجه به تمپلیتی که انتخاب میکنید کمی متفاوت است.
به طور کلی این تنظیمات شامل موارد زیر میشود:
انتخاب متن دکمه: عبارتی مثل «تماس با ما»، «پشتیبانی آنلاین»، «بازگشت به بالا» یا هر CTA دیگر.
انتخاب آیکون: اضافه کردن آیکونهای جذاب و مرتبط (مانند تلفن، پیامرسان، فلش).
تنظیم رنگ، سایز و شکل دکمه: انتخاب رنگهای کنتراست بالا برای دیده شدن بهتر، تعیین گوشههای گرد یا مربع، تنظیم اندازه دکمه.
اعمال انیمیشنها: برای جلب توجه بیشتر میتوانید از انیمیشنهای مختلف مانند تاب خوردن، لرزش یا ظاهر شدن تدریجی استفاده کنید.
تعیین موقعیت دقیق دکمه شناور
در بخش تنظیمات پیشرفته، میتوانید موقعیت دکمه را در صفحه تعیین کنید؛ مثلاً پایین سمت راست، پایین سمت چپ یا حتی وسط صفحه. این تنظیمات به صورت واکنشگرا هستند و میتوانید برای موبایل، تبلت و دسکتاپ موقعیتهای متفاوت انتخاب کنید.
تنظیم شرایط نمایش و انتشار دکمه شناور
یکی از مهمترین اقدامات هنگام ساخت دکمه شناور در المنتور، تعیین شرایط نمایش دکمه است. برای تعیین شرایط، از پایین صفحه وارد “تنظیمات ذخیره سازی” که با علامت پیکان در کنار دکمه انتشار، نمایش داده میشود شوید.
این شرایط میتواند شامل موارد زیر باشد:
- نمایش فقط در صفحه اصلی
- نمایش در صفحات خاص مثل صفحات محصول
- عدم نمایش در صفحات خاص
انتشار و مشاهده
پس از اتمام طراحی و تنظیمات، دکمه شناور را منتشر کنید و با مراجعه به صفحات مختلف سایت، عملکرد و ظاهر آن را تست کنید.
ویژگیهای کلیدی دکمه شناور در المنتور
سادگی و بدون نیاز به کدنویسی: با استفاده از رابط گرافیکی المنتور، حتی افراد مبتدی هم میتوانند دکمههای شناور حرفهای بسازند.
واکنشگرا بودن کامل: دکمه شناور به صورت خودکار در دستگاههای مختلف (موبایل، تبلت، دسکتاپ) تنظیم و بهینه میشود.
امکان افزودن انیمیشن: برای جلب توجه بیشتر و تجربه کاربری بهتر، دکمههای شناور میتوانند انیمیشنهای جذابی داشته باشند.
تنظیم دقیق موقعیت و اندازه: امکان تعیین دقیق مکان نمایش و ابعاد دکمه به شما کمک میکند بهترین تجربه را ارائه دهید.
قابلیت لینکدهی به صفحات، شماره تماس، پیامرسانها یا اسکرول صفحه: این دکمهها میتوانند برای اهداف متنوعی طراحی شوند.
مدیریت پیشرفته شرایط نمایش: کنترل کامل روی اینکه دکمه کجا و برای چه کسانی نمایش داده شود.
چرا باید از دکمه شناور استفاده کنیم؟
افزایش تعامل و دسترسی سریع
دکمه شناور همیشه در معرض دید کاربر است، به همین دلیل امکان کلیک و اقدام سریع بسیار بالا میرود. این موضوع باعث افزایش نرخ تبدیل سایت میشود.
بهبود تجربه کاربری
در دستگاههای موبایل که فضای صفحه محدود است، داشتن دکمهای شناور و قابل دسترس، کاربری سایت را بسیار راحتتر میکند.
جلب توجه هوشمندانه
با استفاده از انیمیشن و رنگهای مناسب، دکمه شناور بدون ایجاد مزاحمت، توجه کاربران را به خود جلب میکند.
تسریع فرایندهای مهم سایت
برای سایتهای فروشگاهی، خدماتی یا پشتیبانی، دکمه شناور باعث میشود کاربر سریعتر به هدف خود برسد؛ مثلاً تماس فوری، خرید سریع یا ارسال پیام.
کاربردهای رایج دکمه شناور در المنتور
- تماس فوری و پشتیبانی آنلاین
بسیاری از سایتها برای تماس تلفنی یا چت آنلاین از دکمه شناور استفاده میکنند تا کاربران در هر لحظه امکان ارتباط مستقیم داشته باشند.
- لینک به پیامرسانها
دکمه واتساپ، تلگرام یا سایر پیامرسانها که به صورت شناور روی صفحه قرار میگیرد، بسیار محبوب و کارآمد است.
- بازگشت به بالای صفحه
دکمهای ساده و کاربردی که به کاربر امکان میدهد با یک کلیک به ابتدای صفحه بازگردد.
- افزودن به سبد خرید یا دکمه خرید سریع
در فروشگاههای اینترنتی، دکمه شناور به عنوان راهکار تسریع فرایند خرید مورد استفاده قرار میگیرد.
- دعوت به اقدام (CTA)
از این دکمه برای ترغیب کاربران به ثبتنام، عضویت در خبرنامه، دانلود فایل یا شرکت در دورههای آموزشی استفاده میشود.
نکات مهم در ساخت دکمه شناور در المنتور
استفاده از رنگهای جذاب و کنتراست بالا: تا دکمه به خوبی دیده شود و توجه کاربر را جلب کند.
اندازه مناسب: دکمه باید اندازهای داشته باشد که هم قابل کلیک باشد و هم فضای صفحه را اشغال نکند.
عدم استفاده از چند دکمه شناور در یک صفحه: برای جلوگیری از شلوغی و کاهش تجربه کاربری.
آزمایش واکنشگرایی: حتما در موبایل، تبلت و دسکتاپ بررسی و تنظیم دقیق انجام دهید.
استفاده از انیمیشنهای ملایم: انیمیشنها باید توجه را جلب کنند بدون اینکه اذیتکننده باشند. این مورد را با کمک کدهای css میتوانید شخصی سازی کنید.
تست A/B برای بهینهسازی: چند نسخه از دکمه را تست کنید تا بهترین عملکرد را بیابید.
جمعبندی
ساخت دکمه شناور در المنتور به عنوان ابزاری بسیار کاربردی برای بهبود تجربه کاربری و افزایش نرخ تعامل است که با نسخههای جدید المنتور، ساخت آن بسیار ساده و بدون نیاز به دانش کدنویسی شده است. این دکمهها با قابلیتهای متنوعی از جمله تنظیم موقعیت، انیمیشن، شرایط نمایش و لینکدهی، ابزار قدرتمندی برای توسعهدهندگان و مدیران سایت محسوب میشوند.
اگر به دنبال افزایش سرعت دسترسی کاربران به بخشهای کلیدی سایت هستید، استفاده از دکمه شناور در المنتور، مخصوصاً با قابلیت جدید آن، یک انتخاب هوشمندانه و بهصرفه است.
