hamid zarghami
2.1 KiB
2.1 KiB
راهنمای طراحی بنرهای Banners3
📐 چیدمان
دو بنر در سمت چپ (عمودی) + یک بنر بزرگ در سمت راست
🖥️ دسکتاپ
سایزها (با container padding 80px):
-
بنر 1 (Order 1) - بالا سمت چپ
- عرض: متغیر (نیمی از فضای باقیمانده)
- ارتفاع: 500px
- نسبت عرض به ارتفاع: 2:1 (width:height)
- سایز پیشنهادی: 1000×500px
-
بنر 2 (Order 2) - پایین سمت چپ
- عرض: متغیر (نیمی از فضای باقیمانده)
- ارتفاع: 500px
- نسبت عرض به ارتفاع: 2:1 (width:height)
- سایز پیشنهادی: 1000×500px
-
بنر 3 (Order 3) - سمت راست (بزرگ)
- عرض: متغیر (نیمی از فضای باقیمانده)
- ارتفاع: 1000px (دو برابر ارتفاع بنرهای سمت چپ)
- نسبت عرض به ارتفاع: 1:1 (width:height)
- سایز پیشنهادی: 1000×1000px
فاصلهها:
- فاصله بین بخش چپ و راست: 16px
- فاصله بین دو بنر سمت چپ: 8px
📱 موبایل
همه بنرها به صورت عمودی و عرض کامل:
- بنر 1: عرض کامل، ارتفاع 500px
- بنر 2: عرض کامل، ارتفاع 500px
- بنر 3: عرض کامل، ارتفاع 1000px
💡 توصیه
برای طراحی میتوانید با این سایزها کار کنید:
- بنر 1 و 2:
1000×500px(نسبت 2:1) - بنر 3:
1000×1000px(نسبت 1:1)
سیستم به صورت خودکار عرضها را متناسب با صفحه تنظیم میکند و با object-cover نسبت تصاویر حفظ میشود.
نکات مهم:
- طراحی باید RTL (راست به چپ) باشد
- تصاویر با
object-coverنمایش داده میشوند (ممکن است قسمتهایی از تصویر کراپ شود) - بهتر است محتوای مهم در مرکز تصاویر قرار گیرد