hamid zarghami
2.3 KiB
2.3 KiB
راهنمای طراحی بنرهای Banners3
📐 چیدمان
یک بنر بزرگ سمت چپ + دو بنر کوچک در سمت راست (عمودی)
توجه: این چیدمان برای RTL است - در کد، بنرهای کوچک اول میآیند (سمت راست) و بنر بزرگ بعد (سمت چپ).
🖥️ دسکتاپ
نسبت عرض ستونها:
- ستون بنرهای کوچک (سمت راست): 60% عرض
- ستون بنر بزرگ (سمت چپ): 40% عرض
سایزها:
-
بنر 1 (Order 1) - بالا سمت راست
- نسبت عرض به ارتفاع: 3:1 (width:height)
- سایز پیشنهادی: 1200×400px
-
بنر 2 (Order 2) - پایین سمت راست
- نسبت عرض به ارتفاع: 3:1 (width:height)
- سایز پیشنهادی: 1200×400px
-
بنر 3 (Order 3) - سمت چپ (بزرگ)
- نسبت عرض به ارتفاع: 1:1 (مربع)
- سایز پیشنهادی: 800×800px
فاصلهها:
- فاصله بین ستونها: 16px
- فاصله بین دو بنر کوچک: 16px
محاسبه ارتفاع:
- ارتفاع بنر بزرگ (1:1) ≈ ارتفاع ۲ بنر کوچک (3:1) + gap
- این باعث میشود ارتفاعها تقریباً برابر باشند
📱 موبایل
همه بنرها به صورت عمودی و عرض کامل:
- بنر 1: عرض کامل، نسبت 3:1
- بنر 2: عرض کامل، نسبت 3:1
- بنر 3: عرض کامل، نسبت 1:1
💡 توصیه
برای طراحی میتوانید با این سایزها کار کنید:
- بنر 1 و 2:
1200×400px(نسبت 3:1) - بنر 3:
800×800px(نسبت 1:1)
سیستم به صورت خودکار عرضها را متناسب با صفحه تنظیم میکند و با object-cover نسبت تصاویر حفظ میشود.
نکات مهم:
- طراحی باید RTL (راست به چپ) باشد
- تصاویر با
object-coverنمایش داده میشوند (ممکن است قسمتهایی از تصویر کراپ شود) - بهتر است محتوای مهم در مرکز تصاویر قرار گیرد
- برای تست placeholder با
USE_PLACEHOLDER = trueدر فایل Banners3.tsx فعال کنید