hamid zarghami
60 lines
2.1 KiB
Markdown
60 lines
2.1 KiB
Markdown
# راهنمای طراحی بنرهای 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` نمایش داده میشوند (ممکن است قسمتهایی از تصویر کراپ شود)
|
||
- بهتر است محتوای مهم در مرکز تصاویر قرار گیرد
|
||
|