امروزه بیشتر کاربران اینترنت از طریق موبایل به وب‌سایت‌ها سر می‌زنند. بنابراین طراحی واکنش‌گرا (Responsive Design) یکی از ضروری‌ترین بخش‌های طراحی سایت است. در المنتور یکی از مهم‌ترین قابلیت‌ها برای رسیدن به یک طراحی کاربرپسند، تنظیم و مخفی‌سازی ستون‌ها در موبایل و تبلت است.
چرا تنظیم ستون‌ها در موبایل اهمیت دارد؟
وقتی ستونی که برای دسکتاپ طراحی شده، بدون تغییر در موبایل نمایش داده شود، اغلب مشکلات زیر پیش می‌آید:
نامرتب و شلوغ شدن ظاهر صفحه
اسکرول طولانی و خسته‌کننده برای کاربر
کاهش سرعت بارگذاری به دلیل عناصر اضافی
از بین رفتن تجربه کاربری (UX)
اما اگر ستون‌ها به‌درستی تنظیم یا مخفی شوند:
صفحه ساده‌تر و منظم‌تر خواهد بود.
کاربر سریع‌تر به محتوای اصلی دسترسی پیدا می‌کند.
طراحی سایت حرفه‌ای‌تر به نظر می‌رسد.
نرخ پرش کاهش یافته و ماندگاری کاربران بیشتر می‌شود.
چه زمانی باید ستون‌ها را در موبایل مخفی کنیم؟
همیشه لازم نیست همه ستون‌ها در موبایل دیده شوند. برخی موارد که بهتر است ستون‌ها مخفی شوند عبارت‌اند از:
تبلیغات یا بنرهای اضافی که در موبایل فضای زیادی اشغال می‌کنند.
اسلایدرها و ویدئوهای سنگین که سرعت بارگذاری را کاهش می‌دهند.
بخش‌های تزیینی یا محتوای کم‌اهمیت که نقش کلیدی در انتقال پیام سایت ندارند.
زمانی که می‌خواهید نسخه‌ای اختصاصی از یک صفحه برای موبایل طراحی کنید.
مراحل تنظیم ستون‌ها در موبایل با المنتور
بیایید قدم‌به‌قدم تنظیمات لازم را بررسی کنیم:
۱. ایجاد نسخه‌های جداگانه برای موبایل و دسکتاپ
ابتدا بخش یا ستونی که قصد دارید تغییر دهید را کپی کنید.
به این ترتیب، دو نسخه در اختیار دارید:
نسخه مخصوص نمایش در موبایل
نسخه مخصوص نمایش در دسکتاپ و تبلت
۲. تنظیم ستون مخصوص موبایل
روی ستون موردنظر کلیک کنید.
به بخش پیشرفته (Advanced) بروید.
وارد قسمت واکنش‌گرا (Responsive) شوید.
گزینه مخفی‌سازی در دسکتاپ و مخفی‌سازی در تبلت را فعال کنید.
حالا این ستون فقط در موبایل نمایش داده خواهد شد.
۳. تنظیم ستون مخصوص دسکتاپ و تبلت
ستون نسخه دوم را انتخاب کنید.
دوباره به بخش پیشرفته > واکنش‌گرا بروید.
این بار گزینه مخفی‌سازی در موبایل را فعال کنید.
حالا ستون در موبایل مخفی می‌شود و فقط در دسکتاپ و تبلت دیده خواهد شد.
نکات کلیدی برای ستون‌بندی واکنش‌گرا
همیشه نتیجه را در حالت پیش‌نمایش بررسی کنید. المنتور امکان نمایش سایت در حالت موبایل، تبلت و دسکتاپ را دارد.
محتوا را خلاصه و هدفمند کنید. کاربران موبایل به دنبال اطلاعات سریع و مستقیم هستند.
به سرعت بارگذاری اهمیت بدهید. هرچه صفحه سبک‌تر باشد، تجربه کاربری بهتر خواهد بود.
طراحی ساده را ترجیح دهید. در موبایل، وضوح و دسترسی مهم‌تر از جلوه‌های بصری پیچیده است.
از فونت‌های خوانا و دکمه‌های بزرگ‌تر استفاده کنید. چون کاربران با لمس صفحه کار می‌کنند.
مقایسه طراحی سایت با و بدون تنظیم ستون‌ها
| ویژگی‌ها | بدون تنظیم ستون‌ها در موبایل | با تنظیم ستون‌ها در موبایل |
|---|---|---|
| ظاهر صفحه | شلوغ و به‌هم‌ریخته | منظم و کاربرپسند |
| سرعت بارگذاری | پایین‌تر | سریع‌تر |
| تجربه کاربری (UX) | ضعیف | بهینه و جذاب |
| نرخ پرش (Bounce Rate) | بالا | پایین |
| تأثیر روی سئو | منفی | مثبت |
ارتباط تنظیم ستون‌ها با سئو
از آنجا که گوگل Mobile-First Indexing را ملاک رتبه‌بندی قرار داده، نسخه موبایل سایت اهمیت بیشتری دارد.
بنابراین:
اگر سایت شما در موبایل مرتب و بهینه باشد → رتبه بهتری کسب می‌کند.
اگر شلوغ و کند باشد → کاربران سریع خارج می‌شوند و سیگنال منفی به گوگل ارسال می‌شود.
ستون‌بندی درست یکی از عوامل کلیدی در این روند است.
جمع‌بندی
تنظیم ستون‌ها در موبایل با المنتور نه‌تنها ظاهر سایت را زیباتر می‌کند، بلکه تجربه کاربری را ارتقا داده و بر سئو تأثیر مستقیم دارد.
با کمی دقت و استفاده از قابلیت مخفی‌سازی ستون‌ها در المنتور میتوانید:
نسخه‌ای اختصاصی و سبک برای موبایل طراحی کنید،
سرعت بارگذاری را افزایش دهید،
و رضایت کاربران را به دست آورید.
به یاد داشته باشید، امروزه بیش از ۷۰٪ بازدیدکنندگان سایت‌ها از طریق موبایل وارد می‌شوند. پس اگر به فکر موفقیت سایتتان هستید، ستون‌بندی موبایل را جدی بگیرید.
منبع : https://ofoghweb.com/elemntor-hide-columns-in-mobile-devices/
- ۰۴/۰۵/۲۷