Section
المان Section به شما اجازه میدهد صفحهتان را به ناحیههای مستقل ساختار/تقسیم کنید (هر بخش یک موضوع).
مقاله درک چیدمان جزئیات بیشتری در مورد بهترین روش استفاده از المانهای layout در Bricks ارائه میدهد.
المان Section بیرونیترین بلوک ساختاری برای ساختاردهی و تقسیم صفحه شماست. از بخشها برای جداسازی و فاصلهدهی بین اجزای مختلف صفحهتان—مثل بخشهای hero، ناحیههای محتوا یا footerها—استفاده کنید.
المان Section عرض پیشفرض ۱۰۰%، از تگ section و flexbox استفاده میکند. بخشها ۱۰۰% عرض موجود را اشغال میکنند و ارتفاعشان بر اساس محتوا تنظیم میشود. آنها بهصورت عمودی روی هم قرار میگیرند.
باید در سطح root استفاده شود تا صفحهتان را به ناحیههای مستقل ساختار دهد. هنگام اضافه کردن یک Section به canvas، یک المان Container بهطور خودکار داخل Section اضافه میشود. در صورت نیاز نداشتن میتوانید این Container را حذف کنید—این فقط رفتار پیشفرض است تا روند ساخت سایت شما سریعتر شود.
نکته: از بخشها بهعنوان المانهای سطح root در ساختار صفحهتان استفاده کنید. برای ایجاد بخشهای متمایز صفحه با پسزمینه، فاصلهگذاری و چیدمانهای مختلف عالی هستند.
تنظیمات
-
Grid column (text) — span ستون grid CSS هنگامیکه parent از چیدمان grid استفاده میکند. خاصیت
grid-columnرا کنترل میکند. -
Grid row (text) — span ردیف grid CSS هنگامیکه parent از چیدمان grid استفاده میکند. خاصیت
grid-rowرا کنترل میکند. -
Query loop — قابلیت query loop را برای محتوای پویا فعال کنید. برای المانهای Container، Block، Div و Section در دسترس است.
-
Link (link) — تنظیمات لینک هنگام استفاده از تگ anchor. هنگامیکه HTML tag روی 'a' تنظیم شده الزامیاست.
-
HTML tag (select) — تگ HTML برای المان section. گزینهها: div، section، a [Link]، article، nav، ol، ul، li، aside، address، figure، custom. پیشفرض: section.
-
Custom tag (text) — تگ HTML سفارشی هنگامیکه «custom» انتخاب شده. بدون attribute. هنگامیکه HTML tag روی 'custom' است الزامیاست.
-
Display (select) — خاصیت CSS display. گزینهها: flex، grid، block، inline-block، inline، none. پیشفرض: flex.
Grid Layout (وقتی Display برابر grid است)
-
Gap (number with units) — فاصله بین آیتمهای grid. خاصیت
grid-gapرا کنترل میکند. -
Grid template columns (text) — ستونهای قالب grid CSS. از dynamic data و متغیرها پشتیبانی میکند.
-
Grid template rows (text) — ردیفهای قالب grid CSS. از dynamic data و متغیرها پشتیبانی میکند.
-
Grid auto columns (text) — اندازه ستونهای خودکار grid. از dynamic data و متغیرها پشتیبانی میکند.
-
Grid auto rows (text) — اندازه ردیفهای خودکار grid. از dynamic data و متغیرها پشتیبانی میکند.
-
Grid auto flow (select) — جهت جریان خودکار grid. گزینهها: row، column، dense.
-
Justify items (justify-content) — تراز justify items در grid.
-
Align items (align-items) — تراز align items در grid.
-
Justify content (justify-content) — تراز justify content در grid.
-
Align content (align-items) — تراز align content در grid.
Flex Layout (وقتی Display برابر flex است)
-
Flex wrap (select) — رفتار wrapping در flexbox. گزینهها: No wrap، Wrap، Wrap reverse.
-
Direction (direction) — جهت flexbox (row/column). خاصیت
flex-directionرا کنترل میکند. -
Align self (align-items) — align self برای این آیتم flex. خاصیت
align-selfرا با!importantکنترل میکند. -
Align main axis (justify-content) — تراز justify content. خاصیت
justify-contentرا کنترل میکند. -
Align cross axis (align-items) — تراز align items. خاصیت
align-itemsرا کنترل میکند. -
Column gap (number with units) — فاصله بین ستونهای flex. خاصیت
column-gapرا کنترل میکند. -
Row gap (number with units) — فاصله بین ردیفهای flex. خاصیت
row-gapرا کنترل میکند. -
Flex grow (number) — ضریب flex grow. حداقل: 0. پیشفرض: 0.
-
Flex shrink (number) — ضریب flex shrink. حداقل: 0. پیشفرض: 1.
-
Flex basis (text) — مقدار flex basis. از dynamic data و متغیرها پشتیبانی میکند. پیشفرض: auto.
ترتیب (Order)
- Order (number) — ترتیب flexbox. حداقل: -999. پیشفرض: 0. وقتی display برابر 'none' نیست در دسترس است.
استایل (Style)
این کنترلها در تب Style در تنظیمات المان در دسترساند.
Masonry
- Masonry layout (checkbox) — چیدمان masonry را برای المانهای فرزند فعال کنید.
- Columns (number) — تعداد ستونهای masonry. پیشفرض: 3. خاصیت CSS
--columnsرا کنترل میکند. - Spacing (number with units) — فاصلهگذاری بین آیتمهای masonry. پیشفرض: 10px. خاصیت CSS
--gutterرا کنترل میکند. - Horizontal order (checkbox) — ترتیبدهی افقی در چیدمان masonry را فعال کنید.
- Transition: Duration (number with units) — مدت انیمیشن برای transitionهای masonry. پیشفرض: 0.4s. برای غیرفعال کردن انیمیشنهای پیشفرض روی «0» تنظیم کنید.
- Reveal animation (select) — نوع انیمیشن برای آیتمهای masonry. گزینهها: Scale، Fade، Slide from left، Slide from right، Skew. پیشفرض: Scale. فقط روی آیتمهای جدیدی که به DOM اضافه میشوند اعمال میشود.
استایل تم: المان – Section
میتوانید width، min-width، max-width، margin و padding بخش را در theme styles خود زیر گروه «Elements > Section» تغییر دهید.
مرجع توسعهدهنده
برای JSON schema کامل به Section Schema مراجعه کنید.