پرش به محتویات

درک چیدمان (Understanding The Layout)

Bricks چهار المان layout (از 1.5) برای گروه‌بندی و چیدمان محتوا دارد:

  • Section: ساختار/تقسیم صفحه (یک topic در هر section)
  • Container: محتوا در عرض 1100px (وسط‌چین)
  • Block: Flexbox با عرض 100% (مثلاً ستون)
  • Div: div ساده بدون استایل (بر اساس المان‌های داخل رشد می‌کند)

چیدمان دو ستونه داخل section

چیدمان دو ستونه داخل section

اگر تازه طراحی وب کار می‌کنید، Section، Container و Block را توصیه می‌کنیم — presetهایی دارند که out-of-the-box خوب کار می‌کنند بدون تنظیم مکرر layout.

المان‌های layout در Bricks 1.5

Section، Container و Block فقط Div با preset هستند. همه از مدل flexbox استفاده می‌کنند — جهت، align و فاصله المان‌های داخل.

Div ساده‌ترین المان برای گروه‌بندی محتواست. در Bricks Div بدون استایل predefined است — آزادی کامل markup و styling.

پیش‌فرض هر المان layout را در سبک‌های تم (Theme Styles) سفارشی کنید.

مرور propertyهای اصلی:

المان Tag Display Width کاربرد
Section section flex 100% سطح root
Container div flex 1100px داخل Section
Block div flex 100% داخل Section یا Container
Div div block - هر جا

Section

Section را به‌عنوان outermost building block استفاده کنید — جدا کردن و فاصله بخش‌های صفحه.

Section 100% عرض موجود را می‌گیرد. ارتفاع بر اساس محتوا. Sectionها روی هم stack می‌شوند.

با افزودن Section جدید، «Container» خودکار داخل section اضافه می‌شود.

اگر نیازی به «contain» ندارید Container را حذف کنید — مثل hero زیر:

مثال Hero Section

مثال: Hero Section (width: 100vh)

پیش‌فرض section را در Settings → Theme Styles → Element - Section override کنید — margin، padding، display، height.

بیشتر: المان Section

Container

Container خودکار وسط‌چین است؛ عرض پیش‌فرض 1100px — در Settings → Theme Styles → Element - Container.

Container را داخل Section بگذارید. Block / Div داخل Container برای چند ستون یا ردیف.

Container (padding 60px) داخل Section (با background-image):

Container داخل Section

بیشتر: المان Container

Block

Block همان کنترل‌های Container (flexbox، query loop و غیره) را دارد؛ تفاوت: عرض پیش‌فرض 100% نه 1100px.

Block برای ستون/ردیف برابر داخل Section یا Container.

بیشتر: المان Block

ساخت layout چند ستونه

سه ستون داخل Container:

  1. Container را انتخاب کنید
  2. «Direction» را «Horizontal» کنید
  3. سه بار «+» روی canvas برای 3 Block

Section > Container > 3 Block

Section > Container > 3 Blocks: layout سه ستونه

سریع‌ترین راه: Container را انتخاب کنید، آیکون «column» روی canvas، layout ازپیش‌تعریف‌شده:

ابزار Insert Layout

ابزار «Insert Layout»

به‌طور پیش‌فرض layout از «Block» ساخته می‌شود. برچسب «Column» فقط label است — هنوز Block. آیکون در structure panel و hover روی آیکون نام المان را نشان می‌دهد:

Layout سه ستونه Block

Div

Div genericترین المان برای گروه‌بندی محتواست.

برخلاف سایر layout elementها، Div در Bricks کاملاً بدون استایل است — آزادی 100% markup و styling.

داخل layout elementهای دیگر Div بر اساس محتوای داخل رشد و کوچک می‌شود.

بیشتر: المان Div

Insert، Wrap و Convert المان‌های layout

راست‌کلیک روی layout element → context menu → «Insert»، «Wrap»، «Convert» با یک کلیک.

تبدیل root Container به Section — راست‌کلیک «Hero» Container در structure panel → آیکون «Section» زیر «Convert»:

Context menu: تبدیل Container به Section

Context menu: تبدیل «Container» به «Section»

هنگام ویرایش layout element، روی «+» روی canvas hover — «Container»، «Block»، «Div».

CMD / CTRL را نگه دارید تا المان بعد از المان فعال insert شود.

Element action Insert

Element actions: پیش‌فرض المان

در «Bricks → Settings → Builder → Element actions» المان layout پیش‌فرض برای «Insert»، «Wrap» و «Layout» tool را عوض کنید:

تنظیم Element actions

اختیاری: تبدیل layout مبتنی بر Container

برای تبدیل سایت «Container»-based به Section و Block جدید، Converter را با 'Convert "Container" to new "Section" & "Block" elements' اجرا کنید:

Converter Container به Section و Block

مسیر: Bricks > Settings > General > Converter

چیدمان Masonry

از Bricks 1.11.1 «Masonry layout» برای همه layout elementها زیر Style > Layout > Masonry فعال است. بیشتر: چیدمان Masonry