فهرست مطالب
اگر به دنبال یک طراحی ظاهری مدرن، منظم و در عین حال چشمگیر برای نمایش مطالب وبلاگ خود هستید، حالت Bento Grid در المنتور یکی از بهترین گزینههاست. این سبک طراحی با ایجاد باکس هایی در اندازه های مختلف، چیدمانی نامتقارن و پویا به صفحه میدهد که باعث میشود کاربر احساس تنوع و جذابیت بیشتری هنگام مشاهده مطالب پیدا کند.
در این قسمت از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور یاد میگیرید چگونه با استفاده از قابلیت حلقه شبکه (Loop Grid) در المنتور، بدون نیاز به هیچ افزونه اضافی، طرحی مشابه Bento Grid بسازید و آخرین مطالب وبلاگ خود را به زیبایی به نمایش بگذارید.
Bento Grid چیست و چه کاربردی دارد؟
Bento Grid نوعی چیدمان شبکهای است که در آن باکسها یا کارتهای محتوا، اندازههای متفاوتی دارند. برای مثال، کارت بالایی ممکن است بزرگتر و چشمگیرتر طراحی شود، در حالی که کارتهای اطراف آن کوچکتر و مکمل هستند. این ساختار باعث میشود مهمترین مطالب بیشتر به چشم بیایند و محتوای کماهمیتتر در جای مناسب خود نمایش داده شوند.
این سبک طراحی در وبسایتهای بزرگی مثل Google News، دیجی کالا مگ و Pinterest بهکار میرود. هدف اصلی آن، ایجاد تنوع بصری و تمرکز بیشتر کاربر بر محتوای مهمتر است.
چطور با المنتور Bento Grid بسازیم؟
برای انجام اینکار نیاز داریم تا از ویجت Loop Grid المنتور استفاده کنیم . این ابزار به ما اجازه میدهد محتوای داینامیک مثل نوشتههای وبلاگ، محصولات فروشگاه، نمونهکارها و … را در قالب کارت های شبکه ای طراحی و نمایش دهیم.
برای ساخت یک Bento Grid در المنتور، مراحل زیر را دنبال کنید:
- ابتدا یک Loop Grid جدید ایجاد کنید.
- سپس درون آن، یک قالب حلقه شبکه ای طراحی کنید که شامل تصویر شاخص، عنوان نوشته و چکیده مطلب باشد.
- حالا کافیست در بخش کدهای سفارشی ، کدهای CSS که در ادامه برای شما قرار داده ایم را وارد کنید تا حالت نامتقارن و چشمنواز Bento شکل بگیرد.
- در نهایت، منبع داده را روی آخرین نوشته های وبلاگ تنظیم کنید تا به صورت خودکار جدیدترین مطالب شما نمایش داده شوند.
مزایای استفاده از Bento Grid در المنتور
استفاده از چیدمان Bento برای نمایش محتوا در صفحات وب، مخصوصاً بخشهای وبلاگ یا نمونهکار، چندین مزیت فوقالعاده دارد:
- جذابیت بصری بالا: طراحی نامتقارن Bento باعث میشود صفحه از یکنواختی خارج شود و نگاه کاربر را به نقاط خاصی از محتوا جلب کند.
- بدون نیاز به افزونه اضافی: تمام طراحی تنها با المنتور انجام میشود؛ بنابراین سبک، سریع و بدون بار اضافی روی سایت خواهد بود.
- نمایش خودکار مطالب جدید: بهصورت داینامیک آخرین پستها یا محصولات شما در قالب شبکه Bento نمایش داده میشوند، بدون اینکه نیاز به بروزرسانی دستی باشد.
- سفارشیسازی کامل: هر باکس را میتوانید جداگانه طراحی کنید؛ از رنگها و تایپوگرافی گرفته تا افکتهای حرکتی جذاب.
- سازگاری با موبایل و تبلت: این طرح به راحتی قابل واکنشگرا (Responsive) شدن است و در تمام دستگاهها حرفهای و مرتب نمایش داده میشود.
جمعبندی
اگر میخواهید بدون نصب هیچ افزونهای، نمایش مطالب وبلاگ خود را مدرن و منحصر به فرد کنید، طراحی Bento Grid در المنتور بهترین انتخاب است. با ترکیب قابلیت Loop Grid و کمی خلاقیت در تنظیم اندازه و موقعیت باکسها، میتوانید ظاهری حرفهای، خاص و متمایز برای بخشهای مختلف سایت خود بسازید.
این روش نهتنها سبک و بهینه است، بلکه آزادی عمل زیادی برای شخصیسازی ظاهر سایت مطابق با سلیقه و برند شما فراهم میکند.
کاربران گرامی:
برای مشاهده آموزش کامل این ویدیو ، ابتدا باید عضو دوره جامع طراحی فروشگاه اینترنتی مشابه دیجی کالا باشید ، پس از عضویت ، براحتی دسترسی کامل به محتوای آموزشی کامل ویدیو و همچنین فایل ها و کدهای آماده دوره را خواهید داشت.
