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

Container

المان Container تا نسخه 1.5 تنها المان چیدمان Bricks بود. اکنون با Section، Block و Div گسترش یافته تا ساخت چیدمان maintainable و ساده‌تر شود.

مقاله Understanding the Layout جزئیات بیشتری درباره بهترین استفاده از المان‌های چیدمان در Bricks دارد.

نحوه استفاده از Container

Container به‌طور پیش‌فرض عرض 1100px دارد، وسط‌چین است و از مدل چیدمان flexbox استفاده می‌کند. تنظیمات متنوعی برای جهت‌دهی، تراز و فاصله‌گذاری المان‌های داخل Container در دسترس است.

توصیه می‌کنیم Container را در سطح root یا داخل Section استفاده کنید.

هنگام ویرایش Container، روی آیکون چیدمان «column» روی بوم کلیک کنید تا چیدمان ستونی از پیش طراحی‌شده سریع insert شود:

در ویدیوی زیر قابلیت‌های Container و چند مثال چیدمان را مرور کنید:

YouTube
YouTube ↗

تبدیل چیدمان Bricks قبل از 1.2 به Container

اگر سایت را قبل از 1.2 با چیدمان قدیمی section، row و column ساخته‌اید، ابتدا باید داده‌ها را به چیدمان Container جدید تبدیل کنید.

Bricks container migrator داخلی دارد که با یک کلیک داده Bricks موجود را به چیدمان Container جدید migrate می‌کند؛ نیازی به ساخت مجدد کل سایت نیست.

چیدمان Container کاملاً انعطاف‌پذیر است و مفهوم از پیش‌تعریف‌شده «sections»، «rows» یا «columns» ندارد؛ پس از migrator احتمالاً تنظیمات دستی لازم است.

پس از به‌روزرسانی به Bricks 1.2، داده قدیمی‌همچنان در فرانت‌اند رندر می‌شود، اما نمایش ۱۰۰٪ دقیق چیدمان section قبلی نیست.

پس از Bricks 1.2+، هرچه زودتر داده Bricks را طبق راهنمای گام‌به‌گام زیر تبدیل کنید.

توصیه می‌کنیم صفحات را یکی‌یکی migrate کنید تا هیچ صفحه‌ای بدون بررسی نماند.

برای احتیاط، ابتدا سایت را clone کنید یا روی staging migration را انجام دهید (نه روی سایت live).

Migrator هیچ داده Bricks (section) موجود را حذف نمی‌کند. اگر Bricks 1.2 و migrator برای سایت شما آماده نیست، می‌توانید نسخه قبلی Bricks (مثل 1.1.3) از حساب Bricks دانلود کنید و فعلاً با section، row، column ادامه دهید.

YouTube
YouTube ↗

STEP #1: View your un-migrated data on the post type screen

همه پست‌ها/صفحات/قالب‌های migrate‌نشده با برچسب «(not migrated)» پشت عنوان مشخص می‌شوند. در screenshot زیر باید صفحه «Blank» را migrate کنیم:

![](../../../assets/images/bricks-container-migrator-step-1.png)
صفحه «Blank» باید migrate شود

STEP #2: Select your page and run the migrator

صفحه موردنظر را انتخاب کنید، از dropdown «Bulk actions» گزینه «Migrate Bricks Data» را بزنید و Apply را بزنید:

![](../../../assets/images/bricks-container-migrator-step-2.png)
Bulk action «Migrate Bricks Data» را انتخاب و اعمال کنید

STEP #3: Review the migration result

برای بررسی نتیجه migrator، صفحه migrate‌شده را با Bricks ویرایش کنید و تنظیمات لازم را در سازنده انجام دهید. سپس preview فرانت‌اند را هم بررسی کنید.

نکات migration:

  • margin-bottom پیش‌فرض section را در Theme Styles > General > Root Container Margin بازگردانید
  • margin-bottom پیش‌فرض المان را در Theme Styles > General > Element Margin بازگردانید

تنظیمات

  • Grid column (text) - span ستون CSS grid وقتی parent از grid استفاده می‌کند. grid-column را کنترل می‌کند.

  • Grid row (text) - span ردیف CSS grid. grid-row را کنترل می‌کند.

  • Query loop - حلقه کوئری برای محتوای پویا. برای Container، Block، Div و Section.

  • Link (link) - تنظیمات لینک وقتی از anchor استفاده می‌شود. وقتی HTML tag روی a است لازم است.

  • HTML tag (select) - تگ HTML. گزینه‌ها: div، section، a [Link]، article، nav، ol، ul، li، aside، address، figure، custom. پیش‌فرض: div.

  • Custom tag (text) - تگ HTML سفارشی وقتی «custom» انتخاب شده. بدون attribute.

  • 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) - ستون‌های template grid. از dynamic data و variables پشتیبانی می‌کند.

  • Grid template rows (text) - ردیف‌های template grid.

  • Grid auto columns (text) - اندازه auto columns.

  • Grid auto rows (text) - اندازه auto rows.

  • Grid auto flow (select) - جهت auto flow. گزینه‌ها: row، column، dense.

  • Justify items (justify-content) - تراز justify items.

  • Align items (align-items) - تراز align items.

  • Justify content (justify-content) - تراز justify content.

  • Align content (align-items) - تراز align content.

Flex Layout (وقتی Display برابر flex است)

  • Flex wrap (select) - رفتار wrap. گزینه‌ها: No wrap، Wrap، Wrap reverse.

  • Direction (direction) - جهت flexbox. flex-direction.

  • Align self (align-items) - align-self این flex item. با !important.

  • Align main axis (justify-content) - justify-content.

  • Align cross axis (align-items) - align-items.

  • Column gap (number with units) - column-gap.

  • Row gap (number with units) - 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. order. پیش‌فرض: 0. وقتی display برابر none نیست.

استایل (Style)

این کنترل‌ها در تب Style تنظیمات المان در دسترس‌اند.

Masonry

  • Masonry layout (checkbox) - چیدمان masonry برای فرزندان.
  • Columns (number) - تعداد ستون‌های masonry. پیش‌فرض: 3. --columns.
  • Spacing (number with units) - فاصله بین آیتم‌ها. پیش‌فرض: 10px. --gutter.
  • Horizontal order (checkbox) - ترتیب افقی در masonry.
  • Transition: Duration (number with units) - مدت انیمیشن. پیش‌فرض: 0.4s. «0» برای غیرفعال‌کردن.
  • Reveal animation (select) - انیمیشن آیتم‌های جدید. گزینه‌ها: Scale، Fade، Slide from left، Slide from right، Skew. پیش‌فرض: Scale.

مرجع توسعه‌دهنده

برای JSON schema کامل به Container Schema مراجعه کنید.