آیا تا به حال به صفحه محصولات اپل، داشبورد مایکروسافت یا سایت‌های مدرن سال ۲۰۲۶ دقت کرده‌اید؟ دورانی که سایت‌ها فقط از ستونهای تکراری ۲۵٪ یا ۵۰٪ تشکیل می‌شدند به پایان رسیده است. امروزه چشمان کاربران به دنبال نظم در عین ناهماهنگی است؛ سبکی که به آن Bento Grid (بنتو گرید) می‌گوییم.
سبک بنتو، الهام گرفته از جعبه‌های غذای ژاپنی است که در آن هر بخش فضای مشخص و متفاوتی دارد اما در کل، یک کلِ واحد و زیبا را تشکیل می‌دهند. این سبک نه تنها خستگی بصری را از بین می‌برد، بلکه نرخ کلیک (CTR) بخش‌های مهم سایت شما را به شدت افزایش می‌دهد.
در این مقاله فوق‌جامع از شادکس وردپرس، ما یاد می‌گیریم که چگونه با استفاده از ویژگی انقلابی Grid Container در المنتور، حرفه‌ای‌ترین چیدمان‌های بنتو را بدون نیاز به حتی یک خط کد CSS پیاده‌سازی کنیم.
اگر قصد دارید بدون دانش برنامه‌نویسی، یک صفحه مدرن و حرفه‌ای طراحی کنید، آموزش ساخت Bento Grid در المنتور می‌تواند نقطه شروع مناسبی باشد. با استفاده از قابلیت Grid Container در المنتور پرو، می‌توانید تنها با کشیدن و رها کردن المان‌ها، چیدمانی جذاب و کاملاً ریسپانسیو ایجاد کنید. همچنین اگر قصد سفارش طراحی سایت را دارید، آشنایی با این سبک طراحی به شما کمک می‌کند هنگام بررسی قیمت طراحی سایت وردپرسی، ارزش امکانات و کیفیت طراحی ارائه‌شده را بهتر ارزیابی کنید.
بنتو گرید یک ساختار چیدمان شبکه‌ای است که در آن محتوا در مستطیل‌ها و مربع‌هایی با ابعاد مختلف اما با گوشه‌های گرد و نظم مشخص قرار می‌گیرد. اپل اولین شرکتی بود که در معرفی آیفون‌های خود از این سبک برای نمایش ویژگی‌های سخت‌افزاری استفاده کرد.
چرا در سال ۲۰۲۶ همه به این سبک کوچ کرده‌اند؟
The law of proximity is a principle in Gestalt psychology—describing how humans perceive elements that are close together as more related than ones farther apart. This is so even if the elements differ in color, shape, size or otherwise. Designers use proximity to create clear, coherent layouts, guide users’ attention and reduce cognitive load.
قانون مجاورت یکی از اصول روانشناسی گشتالت است که بیان می‌کند انسان‌ها عناصری را که در فاصله نزدیک‌تری از یکدیگر قرار دارند، مرتبط‌تر از عناصری می‌دانند که فاصله بیشتری دارند؛ حتی اگر این عناصر از نظر رنگ، شکل، اندازه یا سایر ویژگی‌ها با هم تفاوت داشته باشند. طراحان از این اصل برای ایجاد چیدمان‌های منظم و منسجم، هدایت توجه کاربران و کاهش بار شناختی (Cognitive Load) استفاده می‌کنند. منبع
طبق قوانین “گشتالت”، ذهن انسان تمایل دارد اشیاء نزدیک به هم یا هم‌شکل را به عنوان یک گروه واحد درک کند. بنتو گرید از “قانون مجاورت” استفاده می‌کند تا اطلاعات زیاد را در کادرهای مجزا اما مرتبط بسته‌بندی کند. این کار “بار شناختی” (Cognitive Load) مغز کاربر را کاهش می‌دهد و باعث میشود او بدون خستگی، تمام بخش‌های سایت شما را اسکن کند.
در آموزش ساخت Bento Grid در المنتور یاد می‌گیرید چگونه با ایجاد یک چیدمان مدرن و منظم، صفحات جذاب‌تری طراحی کنید و همزمان اصول طراحی سبک و استاندارد را رعایت کنید. استفاده صحیح از این تکنیک در کنار بهینه سازی core web vitals می‌تواند به بهبود سرعت، تجربه کاربری و عملکرد صفحات سایت کمک کند.
قبل از شروع، باید بدانید که المنتور دو سیستم کانتینر دارد. بسیاری از طراحان هنوز از Flexbox استفاده می‌کنند، اما برای بنتو گرید، Grid Container برنده مطلق است.
| ویژگی | سیستم Flexbox | سیستم Grid |
|---|---|---|
| ابعاد چیدمان | یک بعدی (فقط سطر یا فقط ستون) | دو بعدی (همزمان سطر و ستون) |
| پیچیدگی بنتو | سخت (نیاز به کانتینرهای تو در تو) | بسیار آسان (با خاصیت Span) |
| سرعت لود | متوسط | عالی (به دلیل کاهش عمق DOM) |
💡 نکته فنی: استفاده از Grid Container حجم کدهای HTML سایت شما را به شدت کاهش می‌دهد که مستقیماً روی بهبود Core Web Vitals تاثیر دارد.
بیایید دست به کار شویم. فرض می‌کنیم شما المنتور پرو دارید و ویژگی کانتینر را فعال کرده‌اید.
گام اول: فعال‌سازی Grid Container
ابتدا به مسیر المنتور > تنظیمات > ویژگی‌ها بروید و مطمئن شوید Grid Container روی “Active” است.
گام دوم: ایجاد کانتینر اصلی
یک ویجت “Grid” را به صفحه بکشید. در تنظیمات اولیه، تعداد ستونها (Columns) را روی ۴ و تعداد سطرها (Rows) را روی ۲ قرار دهید. فاصله بین آیتم‌ها (Gaps) را روی ۲۰ پیکسل تنظیم کنید.
گام سوم: افزودن آیتم‌های داخلی
حالا ۸ کانتینر داخلی ساده به داخل این گرید بکشید. در ابتدا همه آن‌ها یکسان به نظر می‌رسند. جادوی اصلی در مرحله بعد اتفاق می‌افتد.
برای اینکه یک طرح بنتو داشته باشیم، بعضی از کادرها باید بزرگتر از بقیه باشند.
با بازی کردن با این اعداد، می‌توانید طرحی دقیقاً شبیه به سایت Apple بسازید.
بنتو گرید بدون استایل‌دهی فقط چند باکس ساده است. برای حرفه‌ای شدن:
طرح بنتو بدون محتوای بصری جذاب، ناقص است. ترند مکمل بنتو در سال ۲۰۲۶، استفاده از آیکون‌های سه بعدی و انتزاعی است.
سایت Formia.so یک ابزار فوق‌العاده است که به شما اجازه می‌دهد آیکون‌های ۳ بعدی متحرک و با کیفیت را متناسب با برند خود بسازید و در باکس‌های بنتو گرید المنتور قرار دهید. این ترکیب (بنتو + فرمیا) سایت شما را ۱۰ برابر لوکس‌تر نشان می‌دهد.
یکی از چالش‌های بنتو، نمایش آن در موبایل است. طرحی که در دسکتاپ ۴ ستونه است، در موبایل باید ۱ ستونه شود.
طراحی بنتو گرید فقط یکی از صدها ترندی است که ما در شادکس وردپرس برای مشتریانمان پیاده‌سازی می‌کنیم. اگر سایت شما هنوز از چیدمان‌های تکراری سال ۲۰۱۸ استفاده می‌کند، زمان آن رسیده که ظاهری مدرن، سریع و کاربرپسند به آن بدهید.
ما چه کمکی به شما می‌کنیم؟
درخواست بازطراحی و مدرن‌سازی سایت افزایش سرعت سایت
بنتو گرید یعنی نظم، زیبایی و تجربه کاربری مدرن. اگر می‌خواهید در سال ۲۰۲۶ متمایز باشید، از چیدمان‌های خطی فاصله بگیرید.
فراموش نکنید که شادکس وردپرس در تمام مراحل طراحی و بهینه‌سازی سایت، در کنار شماست.
تیم تولید محتوای شادکس وردپرس
در این بخش صوتی، دو نفر از نمایندگان شادکس وردپرس در قالب یک گفت‌وگوی حرفه‌ای و صمیمی، خلاصه‌ای جامع از محتوای مقاله را برای شما بازگو می‌کنند. اگر فرصت یا حوصله خواندن متن کامل را ندارید، با گوش دادن به این پادکست می‌توانید در زمانی کوتاه به تمام نکات مهم و کلیدی مقاله دست پیدا کنید. این مکالمه تلاش می‌کند مهم‌ترین مطالب را با لحنی رسمی و در عین حال دوستانه به شما منتقل کند تا تجربه‌ای دلنشین و کاربردی از محتوای سایت داشته باشید.
هزینه خدمات امنیت سایت بر اساس سطح ریسک، وضعیت فعلی سایت، زیرساخت، تعداد افزونه‌ها و Scope پروژه تعیین میشود. برخی ابزارها، زیرساخت‌ها و خدمات تخصصی خارج از محدوده قیمت پایه، در صورت نیاز به‌صورت جداگانه محاسبه می‌شوند.
پس از پاک‌سازی و ایمن‌سازی سایت، برای جلوگیری از بروز مجدد مشکلات و حفظ پایداری و امنیت سایت، پیشنهاد میشود سرویس پشتیبانی فنی نیز تهیه شود.
پشتیبانی فنی می‌تواند شامل بررسی و رفع مشکلات وردپرس، به‌روزرسانی‌ها، بررسی سازگاری قالب و افزونه‌ها، رسیدگی به مشکلات فنی و پایش دوره‌ای وضعیت سایت باشد.
امنیت سایت یک سرویس با نتیجه یا قیمت ثابت نیست و محدوده خدمات پیش از شروع پروژه مشخص میشود. مواردی مانند تست نفوذ، پاک‌سازی هک، امنیت سرور و مانیتورینگ مستمر، خدمات تخصصی جداگانه محسوب می‌شوند.
در صورت نیاز به ابزار، ارتقای زیرساخت یا خدمات خارج از محدوده پروژه، هزینه مربوطه پیش از انجام کار اعلام و پس از تأیید شما محاسبه خواهد شد.
قیمت‌های درج‌شده در سایت، صرفاً مربوط به هزینه طراحی و پیاده‌سازی وب‌سایت بوده و هزینه تهیه سرویس‌ها، ابزارها، افزونه‌ها و مجوزهای موردنیاز پروژه را شامل نمی‌شود.
راه‌اندازی هر وب‌سایت، بسته به نوع و امکانات آن، ممکن است به سرویس‌ها و ابزارهای مختلفی نیاز داشته باشد.
به‌عنوان یک برآورد اولیه، حداقل بودجه پیشنهادی برای تهیه زیرساخت و ابزارهای موردنیاز از حدود ۵ میلیون تومان در نظر گرفته میشود.
این مبلغ صرفاً یک بودجه پایه و تخمینی برای شروع است و با توجه به نیازهای واقعی پروژه و سرویس‌های انتخابی می‌تواند کمتر یا بیشتر شود.
تمامی پروژه‌ها به همه سرویس‌ها و ابزارها نیاز ندارند و هزینه نهایی بر اساس نیاز واقعی وب‌سایت تعیین خواهد شد.
بسته به نوع پروژه، موارد موردنیاز می‌توانند شامل موارد زیر باشند:
.ir یا .com)دریافت اینماد و سایر مجوزهای موردنیاز بر عهده کارفرماست.
همچنین شرایط و مدارک موردنیاز برای دریافت و فعال‌سازی درگاه پرداخت، بسته به شرکت ارائه‌دهنده درگاه متفاوت است.
انجام امور مربوط به احراز هویت، ارائه مدارک و دریافت مجوزهای لازم بر عهده کارفرما بوده و در صورت نیاز، راهنمایی‌های لازم برای انتخاب و راه‌اندازی درگاه ارائه خواهد شد.
در صورت نیاز به طراحی و پیاده‌سازی نسخههای چندزبانه، هزینه بر اساس نوع زبان و میزان تغییرات موردنیاز محاسبه میشود:
زبان‌های لاتین و چپ‌چین: ۵۰٪ مبلغ پروژه
زبان‌های راست‌چین: ۲۵٪ مبلغ پروژه
این هزینه مربوط به طراحی، پیاده‌سازی و هماهنگ‌سازی نسخه زبان دوم با ساختار سایت است و هزینه ترجمه محتوا را شامل نمی‌شود.
در صورتی که برای انتخاب هاست، دامنه، افزونه‌ها، درگاه پرداخت یا سایر ابزارهای موردنیاز پروژه اطلاعات کافی ندارید، می‌توانید برای انتخاب گزینه مناسب و متناسب با نیاز و بودجه پروژه، مشاوره دریافت کنید.
۲ پاسخ
من جمعه شروع کردم به استفاده از این آموزش! واقعاً کمکم کرد یه طراحی حرفه‌ای داشته باشم. کارت عالی بود! تازه چرا تو جزئیات از CSS Custom Properties استفاده نکردید؟ به نظرم می‌تونم اینو اضافه کنم.
این آموزش عاای بود. خصوصاً برای ماها که همیشه دنبال راه‌های آسان و کاربردی برای طراحی سایتم. یه پیشنهاد دارم، اگه می‌شه یه فایل PDF از آموزش‌ها هم ارائه بدید خیلی خوب می‌شه.