دکمههای کشویی یا آکاردئونی در وبسایتها برای نمایش اطلاعات به صورت دستهبندی و کمحجم بسیار پرکاربرد هستند. این نوع دکمهها به کاربر اجازه میدهند که با کلیک بر روی آنها، اطلاعات بیشتر را مشاهده کنند. با استفاده از افزونه المنتور، میتوانید به راحتی دکمههای کشویی طراحی کنید.
گام اول: ایجاد یک صفحه یا بخش جدید
ابتدا وارد داشبورد وردپرس خود شوید و یک صفحه یا بخش جدید ایجاد کنید. المنتور را فعال کنید و به صفحه ویرایش المنتور بروید. در اینجا قصد داریم از قابلیتهای کشیدن و رها کردن (Drag & Drop) المنتور برای ساخت دکمه کشویی استفاده کنیم.
گام دوم: افزودن ویجت آکاردئون یا دکمه کشویی
در ستون سمت چپ المنتور، ویجت آکاردئون (Accordion) یا Toggle را جستجو کنید و آن را به صفحه خود بکشید. این ویجت به شما امکان میدهد تا اطلاعاتی را که میخواهید به صورت کشویی نمایش داده شوند، قرار دهید.
گام سوم: تنظیم محتوا و عنوان دکمههای کشویی
پس از اضافه کردن ویجت، میتوانید عنوان هر دکمه کشویی و محتوای مربوط به آن را وارد کنید. برای مثال:
عنوان اول: پرسشهای متداول
محتوا: این بخش میتواند شامل پرسشهای پرکاربرد و پاسخهای آنها باشد.
عنوان دوم: اطلاعات تماس
محتوا: در این بخش میتوانید شماره تلفن و ایمیل پشتیبانی را قرار دهید.
گام چهارم: سفارشیسازی ظاهر دکمهها
در این مرحله میتوانید استایل دکمهها را سفارشی کنید. برای این کار روی هر دکمه کلیک کرده و از بخش استایل تنظیمات رنگ، فونت، فاصلهبندی و دیگر تنظیمات را تغییر دهید. المنتور به شما اجازه میدهد تا طراحی دکمهها را به گونهای تنظیم کنید که با ظاهر کلی وبسایتتان هماهنگ باشد.
گام پنجم: پیشنمایش و انتشار
پس از تکمیل طراحی و تنظیمات، میتوانید از پیشنمایش صفحه برای بررسی نهایی دکمههای کشویی استفاده کنید. در صورت رضایت، صفحه را منتشر کنید تا کاربران بتوانند از آن استفاده کنند.
کاربرد دکمه کشویی در المنتور
دکمههای کشویی (Dropdown Button) یکی از عناصر کلیدی در تجربه کاربری مدرن وبسایتها هستند. این دکمهها به کاربر اجازه میدهند تا محتوای بیشتری را در فضای محدود مشاهده کنند بدون اینکه صفحه شلوغ و بینظم شود. با استفاده از المنتور، بهویژه نسخه پرو، میتوان دکمههای کشویی را بهصورت بصری و بدون نیاز به دانش کدنویسی ایجاد کرد.
کاربردهای اصلی دکمه کشویی:
1-نمایش اطلاعات اضافی: این نوع دکمهها معمولاً برای نمایش اطلاعات مخفی یا اضافی به کاربر استفاده میشوند، مثلاً توضیحات اضافی محصولات یا سوالات متداول (FAQ).
2-کاهش شلوغی صفحه: یکی از مشکلات رایج در طراحی وب، ایجاد شلوغی و ازدحام اطلاعاتی در صفحه است. دکمههای کشویی به شما این امکان را میدهند که محتوای خود را به صورت مرتبتری سازماندهی کنید.
3-بهبود تعامل کاربران: کاربران دوست دارند که تجربه کاربری ساده و کارآمدی داشته باشند. دکمههای کشویی میتوانند به این مسئله کمک کنند و با ارائه دسترسی سریع به محتوا، تعامل بیشتری ایجاد کنند.
4-قابلیت استفاده در فرمها: در فرمهای وبسایت، دکمههای کشویی برای انتخاب چند گزینه یا نمایش گزینههای اضافی به کار میروند.
آمارهای مهم در خصوص دکمههای کشویی
- تحقیقات نشان میدهد که استفاده از دکمههای کشویی باعث افزایش نرخ کلیک (CTR) تا 30% میشود. دلیل این امر این است که کاربران به سادگی میتوانند به محتوای اضافی دسترسی پیدا کنند بدون نیاز به اسکرول یا جستجوی بیشتر.
- 45% از کاربران گزارش دادهاند که دکمههای کشویی باعث میشوند تا تجربه کاربری سایتهای پیچیده برای آنها سادهتر و جذابتر شود.
- 70% از وبسایتهای تجاری از دکمههای کشویی برای بهبود تجربه خرید آنلاین استفاده میکنند، بهویژه در صفحات محصولات و خدمات.
حقایق جالب درباره دکمههای کشویی
1-اولین دکمههای کشویی به عنوان بخشی از رابطهای کاربری گرافیکی (GUI) در دهه 90 میلادی توسعه یافتند و به سرعت در طراحی وب مدرن جایگاه خود را پیدا کردند.
2-با المنتور پرو، شما میتوانید انیمیشنهای جذابی برای باز و بسته شدن دکمههای کشویی ایجاد کنید که باعث جذابتر شدن تعامل کاربران میشود.
3-استفاده از دکمههای کشویی در صفحات لندینگ (Landing Page) میتواند به کاهش نرخ خروج (Bounce Rate) کمک کند، زیرا کاربران را بیشتر به تعامل با سایت تشویق میکند.
4-دکمههای کشویی در المنتور قابلیت تنظیمات پیشرفتهای مانند شرایط نمایش، نمایش در دستگاههای خاص و افکتهای حرکتی را دارند که تجربه کاربری را به سطح بالاتری میبرد.
ساخت دکمه کشویی با المنتور بسیار ساده و سریع است. این قابلیت به شما اجازه میدهد که اطلاعات را به صورت دستهبندیشده و قابل دسترسی در وبسایت خود نمایش دهید. دکمههای کشویی نه تنها از نظر ظاهری جذاب هستند، بلکه تجربه کاربری را نیز بهبود میبخشند.
