یکی از مهم‌ترین بخش‌ها در یادگیری Bricks Builder، درک درست سیستم Layout آن است.

بسیاری از کاربرانی که از صفحه‌سازهایی مثل Elementor به Bricks مهاجرت می‌کنند، در ابتدا با ساختار چیدمان این ابزار کمی سردرگم می‌شوند. دلیل اصلی این است که در Elementor بیشتر با یک عنصر اصلی به نام Container کار می‌کنیم، اما Bricks چهار عنصر مختلف برای ساخت Layout در اختیار ما قرار می‌دهد:

• Section
• Container
• Block
• Div

هرکدام از این عناصر وظیفه خاصی دارند و شناخت تفاوت آن‌ها باعث می‌شود بتوانید صفحات حرفه‌ای‌تر، سریع‌تر و با کنترل بیشتری طراحی کنید.

در این مقاله بررسی می‌کنیم که هرکدام از Layout Elementهای Bricks چه کاربردی دارند و چگونه می‌توان با ترکیب آن‌ها Layoutهایی مانند صفحات وبلاگ، آرشیو محصولات، کارت‌های محتوا و صفحات فرود را طراحی کرد.

Layout Elements در Bricks Builder چیست؟

در Bricks، طراحی صفحه بر اساس یک ساختار لایه‌ای انجام می‌شود.

به‌صورت ساده می‌توان ساختار یک صفحه را این‌گونه تصور کرد:

Section
↓
Container
↓
Block
↓
Div
↓
Content Elements

هرچه به سمت لایه‌های داخلی‌تر حرکت می‌کنیم، کنترل ما روی جزئیات طراحی بیشتر می‌شود.

برای مثال:

• Section برای ایجاد بخش‌های اصلی صفحه استفاده می‌شود.
• Container عرض محتوا را کنترل می‌کند.
• Block برای گروه‌بندی بخش‌های مختلف Layout کاربرد دارد.
• Div برای کنترل دقیق‌تر عناصر داخلی استفاده می‌شود.

Section در Bricks Builder چیست؟

Section اولین و بیرونی‌ترین عنصر Layout در Bricks است.

مهم‌ترین ویژگی Section این است که همیشه تمام عرض صفحه را اشغال می‌کند.

به عبارت دیگر:

• Section = عرض کامل مرورگر
• Container = محدودکننده عرض محتوا

برای مثال، اگر بخواهید یک بخش Hero در صفحه اصلی سایت ایجاد کنید، معمولاً ابتدا یک Section اضافه می‌کنید و سپس محتوای خود را داخل Container قرار می‌دهید.

ساختار:

Section
└── Container
    └── Heading + Image + Button

کاربردهای رایج Section

از Section معمولاً برای بخش‌های اصلی سایت استفاده می‌شود:

• بخش معرفی سایت
• Hero Section
• بخش خدمات
• بخش محصولات
• Testimonials
• Footer

هر قسمت بزرگ صفحه معمولاً یک Section جداگانه دارد.

Container در Bricks Builder چیست؟

Container عنصری است که محتوای داخل صفحه را محدود و مرتب می‌کند.

برخلاف Section که Full Width است، Container معمولاً یک Maximum Width مشخص دارد.

برای مثال:

Section:

عرض کامل صفحه

Container:

حداکثر عرض 1200px یا 1366px

این باعث می‌شود محتوای سایت در صفحه‌های بزرگ بیش از حد کشیده نشود و ظاهر حرفه‌ای‌تری داشته باشد.

تنظیم عرض Container در Bricks

عرض Container را می‌توانید از دو روش تنظیم کنید:

روش اول: تنظیمات خود Bricks

از مسیر:

Theme Styles → Container

می‌توانید مقدار Maximum Width را تعیین کنید.

روش دوم: استفاده از Frameworkها

اگر از Frameworkهایی مانند ACSS یا Core Framework استفاده کنید، مدیریت Containerها به شکل یکپارچه انجام می‌شود.

تفاوت Section و Container

این دو عنصر معمولاً در کنار هم استفاده می‌شوند اما وظایف متفاوتی دارند.

عنصر	وظیفه
Section	ایجاد بخش Full Width در صفحه
Container	محدود کردن عرض محتوا

مثال:

Section
│
└── Container
    │
    ├── Heading
    ├── Text
    └── Button

Block در Bricks Builder چیست؟

Block یکی از مهم‌ترین عناصر برای ساخت Layout داخلی است.

Block معمولاً داخل Container قرار می‌گیرد و برای گروه‌بندی محتوا استفاده می‌شود.

به‌صورت پیش‌فرض:

• Block تمام عرض والد خود را اشغال می‌کند.
• می‌توان چند Block را کنار هم قرار داد.
• با Flexbox می‌توان نحوه چیدمان آن‌ها را کنترل کرد.

استفاده از Flexbox برای چیدمان Blockها

فرض کنید سه Block داخل یک Container داریم.

حالت پیش‌فرض:

Block

Block

Block

اما اگر Direction را روی Horizontal قرار دهیم:

Block | Block | Block

هر Block بخشی از عرض Container را اشغال می‌کند.

اگر سه Block داشته باشیم، هرکدام تقریباً یک‌سوم عرض را خواهند داشت.

کنترل فاصله بین Blockها با Gap

یکی از قابلیت‌های مهم Flexbox در Bricks، تنظیم فاصله بین عناصر است.

دو گزینه اصلی:

Column Gap

برای فاصله افقی استفاده می‌شود.

مثال:

Card | Card | Card

Row Gap

برای فاصله عمودی استفاده می‌شود.

مثال:

Card

↓

Card

↓

Card

استفاده از Gap معمولاً بهتر از ایجاد Marginهای جداگانه برای هر عنصر است.

Div در Bricks Builder چیست؟

Div کوچک‌ترین سطح کنترل Layout در این ساختار است.

تفاوت اصلی Div با Block این است که Div معمولاً فقط به اندازه محتوای داخل خودش رشد می‌کند.

برای مثال:

اگر یک Heading داخل Div قرار دهید، اندازه Div بر اساس همان Heading تعیین می‌شود.

ساختار:

Div

└── Heading

کاربردهای Div

Div برای موارد زیر بسیار کاربردی است:

• گروه‌بندی عناصر کوچک
• ساخت بخش‌های داخلی کارت‌ها
• کنترل دقیق فاصله‌ها
• مدیریت Position عناصر

در طراحی‌های پیچیده، Div کمک می‌کند کنترل بیشتری روی جزئیات داشته باشید.

مقایسه Section، Container، Block و Div

Element	کاربرد اصلی	رفتار اندازه
Section	بخش اصلی صفحه	Full Width
Container	محدود کردن محتوا	Maximum Width
Block	گروه‌بندی Layout	معمولاً 100٪ عرض
Div	کنترل جزئیات داخلی	بر اساس محتوا

---

ساخت کارت وبلاگ با Layout Elements در Bricks

یکی از کاربردهای واقعی این عناصر، ساخت کارت‌های وبلاگ است.

یک ساختار استاندارد می‌تواند این باشد:

Section

└── Container

    └── Block (Card)

        ├── Block (Content)

        │   ├── Image
        │   ├── Title
        │   └── Excerpt

        └── Block (Meta)

            ├── Author
            └── Date

این ساختار باعث می‌شود هر بخش مستقل کنترل شود.

استفاده از Query Loop برای نمایش نوشته‌ها

در Bricks می‌توان کارت طراحی‌شده را به یک Loop داینامیک تبدیل کرد.

برای این کار:

1. کارت اصلی را انتخاب کنید.
2. Query Loop را فعال کنید.
3. نوع محتوا را روی Posts قرار دهید.
4. تعداد نوشته‌ها را مشخص کنید.

برای مثال:

• نمایش ۶ مقاله
• مرتب‌سازی بر اساس عنوان
• نمایش اطلاعات داینامیک مانند:
  • عنوان نوشته
  • تصویر شاخص
  • خلاصه مطلب

چرا باید محتوا را داخل Blockهای جداگانه قرار دهیم؟

فرض کنید یک کارت مقاله ارتفاع مشخصی دارد.

اگر بخش محتوا و اطلاعات نویسنده در یک گروه باشند، ممکن است با تغییر طول متن، بخش پایین کارت جابه‌جا شود.

اما اگر آن‌ها را جدا کنیم:

Content Block

Meta Block

می‌توانیم با Flexbox فاصله بین آن‌ها را کنترل کنیم.

استفاده از Space Between در Flexbox

یکی از کاربردی‌ترین تنظیمات Flexbox گزینه:

Space Between

است.

با این گزینه، اولین و آخرین عنصر در دو طرف Container قرار می‌گیرند.

مثلاً:

عنوان مقاله

تصویر

توضیحات



نام نویسنده
تاریخ انتشار

این روش برای طراحی:

• کارت مقاله
• کارت محصول
• لیست خدمات

بسیار کاربردی است.

استفاده از CSS Grid در Bricks

Flexbox برای بسیاری از Layoutها مناسب است، اما زمانی که نیاز به ساخت شبکه‌های چندستونه دارید، CSS Grid گزینه قدرتمندتری است.

مثلاً ساخت آرشیو وبلاگ:

Card | Card

Card | Card

Card | Card

برای این کار:

1. Container را انتخاب کنید.
2. Display را از Flex به Grid تغییر دهید.
3. تعداد ستون‌ها را مشخص کنید.

برای مثال:

2 ستون:

1fr 1fr

نتیجه:

• دو ستون مساوی
• کنترل بهتر فاصله‌ها
• مناسب برای صفحات آرشیو

کنترل Alignment در Bricks

Bricks امکانات زیادی برای کنترل موقعیت عناصر دارد.

مهم‌ترین گزینه‌ها:

Start

قرارگیری در ابتدای محور

Center

قرارگیری در مرکز

End

قرارگیری در انتهای محور

Stretch

کشیده شدن عنصر در کل فضا

با ترکیب تنظیمات افقی و عمودی می‌توانید عناصر را دقیقاً در جای موردنظر قرار دهید.

اشتباه رایج هنگام کار با Layout در Bricks

یکی از اشتباهات رایج کاربران جدید این است که همه چیز را داخل یک Container قرار می‌دهند.

این کار باعث می‌شود:

• کنترل Layout سخت شود.
• تنظیمات Flex پیچیده شود.
• تغییرات آینده دشوار شود.

بهتر است:

• Section برای بخش‌های اصلی
• Container برای عرض
• Block برای گروه‌بندی
• Div برای جزئیات

استفاده شود.

جمع‌بندی

درک درست Layout Elements در Bricks Builder یکی از پایه‌های اصلی طراحی سایت حرفه‌ای است.

به‌صورت خلاصه:

• Section ساختار اصلی صفحه را ایجاد می‌کند.
• Container عرض محتوا را مدیریت می‌کند.
• Block برای ساخت Layoutهای داخلی استفاده می‌شود.
• Div کنترل جزئیات کوچک‌تر را برعهده دارد.

وقتی این عناصر را همراه با Flexbox و CSS Grid استفاده کنید، می‌توانید تقریباً هر نوع طراحی مدرن را در Bricks پیاده‌سازی کنید؛ از صفحات ساده گرفته تا سایت‌های پیچیده وردپرسی، فروشگاه‌های ووکامرس و صفحات داینامیک.