ساخت اولین صفحه (Start your first page)

YouTube ↗

وقت ساخت است. صفحه اصلی را با بخش Hero شروع می‌کنیم. اینجا گردش کار اصلی و منطق المان‌های چیدمان را یاد می‌گیرید. بخش‌های بیشتر (مثل شبکه آخرین پست‌ها) را بعداً در مجموعه اضافه می‌کنیم.

باز کردن صفحه Home

در مقاله قبل صفحه Home را ساختید و در سازنده باز کردید.

اگر سازنده بسته شده:

1. در پیشخوان به Pages > All Pages بروید
2. صفحه «Home» را پیدا کنید
3. روی Edit with Bricks کلیک کنید

اگر صفحه Home ندارید، یکی بسازید و با Bricks باز کنید.

تنظیم صفحه به‌عنوان صفحه اصلی

قبل از ساخت، به وردپرس بگویید Home صفحه ثابت فرانت‌اند باشد:

1. به Settings > Reading بروید
2. زیر Your homepage displays گزینه A static page را انتخاب کنید
3. Homepage را روی صفحه Home بگذارید
4. در صورت تمایل Posts page را روی صفحه «Blog» بگذارید (یا فعلاً پیش‌فرض بماند)
5. روی Save Changes کلیک کنید

ساختار معمول صفحات وب

وقتی در سایت‌ها اسکرول می‌کنید، معمولاً این الگو را می‌بینید:

• Header بالای صفحه (لوگو و منو، معمولاً سراسری)
• Hero که صفحه را معرفی می‌کند
• یک یا چند بخش محتوا (ویژگی‌ها، نظرات، پست‌ها، تماس)
• Footer پایین صفحه

بصری، صفحه پشته‌ای عمودی از نوارهای افقی است. در Bricks این نوارها با المان Section ساخته می‌شوند.

در پشت صحنه، هر Section یک جعبه HTML معنادار است. داخل آن جعبه‌های دیگر و سپس محتوا قرار می‌گیرد.

المان‌های چیدمان در Bricks

برای نوارها و ستون‌ها، Bricks چهار المان چیدمان دارد:

Section → Container → Block / Div → Elements

المان	نقش
Section	نوار ریشه؛ تمام عرض صفحه. جداکننده بخش‌های اصلی (header، hero، features، footer)
Container	داخل Section؛ محتوا را وسط‌چین و محدود نگه می‌دارد (پیش‌فرض عرض 1100px)
Block	جعبه flexbox با عرض 100٪؛ برای ستون‌ها و کارت‌ها
Div	div ساده بدون استایل پیش‌فرض؛ wrapper سبک
Elements	محتوای واقعی (Heading، Image، Button و غیره)

چه زمانی از هر المان استفاده کنیم

• Section: نوار افقی جدید — یک Section برای hero، یکی برای features و غیره
• Container: محتوای Section با عرض حداکثر ثابت و وسط — اکثر Sectionها یک Container دارند
• Block: تقسیم Container به ستون‌ها — در hero یک Block برای متن و یکی برای تصویر
• Div: گروه‌بندی سبک داخل layout — مثلاً گروه Heading و آیکون

محل اعمال استایل مهم است:

• رنگ و border روی Section → تمام عرض نوار
• استایل روی Container → ناحیه محتوای وسط‌چین
• استایل روی Block/Div → فقط همان ستون یا کارت

ساخت بخش Hero

الگوی رایج:

• متن و دکمه چپ
• تصویر راست
• هر دو عموداً وسط‌چین

۱. افزودن Section

1. در پنل چپ روی Section (زیر Layout) کلیک کنید
2. Section به‌همراه Container داخل آن به بوم اضافه می‌شود

۲. افزودن محتوای Hero

1. Container را از پنل ساختار یا بوم انتخاب کنید

2. یک Heading اضافه کنید 3. زیر آن Rich Text 4. زیر آن Button 5. زیر آن Image

فعلاً همه‌چیز در یک ستون (روی هم) است.

۳. گروه‌بندی ستون‌ها با Block

ستون چپ (متن + دکمه):

1. پنل ساختار را باز کنید
2. در Container روی Heading کلیک کنید
3. Shift را نگه دارید و Button را کلیک کنید → Heading، Rich Text و Button با هم انتخاب می‌شوند
4. راست‌کلیک → Wrap → Block

ستون راست (تصویر):

1. Image را انتخاب کنید
2. راست‌کلیک → Wrap → Block

اکنون Container دو Block دارد.

۴. چیدمان ستون‌ها

1. Container را انتخاب کنید
2. به Content > Layout بروید
3. Direction را Row بگذارید
4. Align cross axis را Center بگذارید
5. Column gap را 24 بگذارید
6. از تب Styles > Background یک رنگ پس‌زمینه انتخاب کنید

یادداشت کوتاه درباره Flexbox

در CSS، display نحوه چیدمان را تعیین می‌کند. Flexbox فرزندان یک container را در ردیف یا ستون می‌چیند. Section، Container و Block در Bricks پیش‌فرض flexbox دارند.

• Direction: محور اصلی — Row = کنار هم، Column = روی هم
• Gap: فاصله بین فرزندان
• Align items: تراز در محور عمود

برای Flexbox عمیق‌تر: راهنمای Flexbox در MDN

۵. استایل محتوا

Block ستون چپ:

1. Block را انتخاب کنید
2. Row gap را 8 بگذارید

Heading:

1. متن: «Welcome to Bricks»
2. Tag را H1 بگذارید

Image:

1. تصویر را از کتابخانه رسانه انتخاب کنید

HTML تولیدشده توسط Bricks

1. Preview را بزنید تا صفحه در فرانت‌اند باز شود
2. راست‌کلیک روی hero → Inspect
3. <section> hero را پیدا و باز کنید

باید ببینید:

• <section> برای hero
• <div> (Container) داخل آن
• داخل آن heading، text، button، image

بدون wrapper اضافی و زنجیره containerهای ناشناخته.

ایده اصلی: آنچه در سازنده اضافه می‌کنید همان چیزی است که در markup می‌آید.

مشکل فاصله‌گذاری

Section به بالا و پایین چسبیده. padding لازم است.

می‌توانید روی Section دستی 80px padding بگذارید — اما برای هر Section تکراری و سخت در نگهداری است.

راه‌حل: سبک‌های تم (Theme Styles).

به‌جای استایل تک‌تک Sectionها، یک قانون سراسری: «همه Sectionها padding 80px داشته باشند.»

در مقاله بعدی این کار را انجام می‌دهیم.

مسیر بعدی: سبک‌های تم (Theme styles)

---

بهبود این درس

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