hamid zarghami
65 lines
2.3 KiB
Markdown
65 lines
2.3 KiB
Markdown
# راهنمای طراحی بنرهای 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 فعال کنید
|
||
|