ویرایش واکنش‌گرا

آنچه روی دسکتاپ بزرگ عالی به نظر می‌رسد معمولاً برای دستگاه‌های کوچک‌تر نیاز به اصلاح دارد. این اغلب شامل اندازه فونت، margin، padding کوچک‌تر، عرض/چیدمان ستون‌ها یا مخفی کردن برخی المان‌ها در دستگاه‌های کوچک است.

Bricks چهار breakpoint زیر را out-of-the-box ارائه می‌دهد:

Breakpoint	@media query
Desktop	Base breakpoint
Tablet portrait	< 992px
Mobile landscape	< 768px
Mobile portrait	< 478px

استایل‌های تنظیم‌شده روی base breakpoint توسط همه breakpointهای دیگر به ارث برده می‌شوند.

پس از اتمام استایل صفحه روی base breakpoint (desktop)، حتماً استایل را روی breakpointهای دیگر هم ببینید و تنظیم کنید.

برای مشاهده و ویرایش استایل یک breakpoint مشخص، روی آیکون breakpoint در وسط نوار ابزار سازنده کلیک کنید. یا از میانبر صفحه‌کلید CMD/CTRL + B استفاده کنید.

ویرایش در breakpoint «Mobile landscape»

تصویر بالا سازنده را در حال ویرایش breakpoint Mobile portrait نشان می‌دهد.

کنار آیکون‌های breakpoint، inputهای عرض («W»)، ارتفاع («H») و scale (%) قرار دارند.

Breakpointهای سفارشی

برای استفاده از breakpointهای سفارشی، ابتدا آن‌ها را در پیشخوان وردپرس زیر Bricks > Settings > General > Custom breakpoints فعال کنید:

پس از فعال‌سازی، با کلیک روی آیکون سه‌نقطه در نوار ابزار سازنده (کنار اولین آیکون breakpoint) به breakpoint manager دسترسی دارید:

Breakpoint Manager (باز کردن از آیکون سه‌نقطه در نوار ابزار)

ویرایش breakpoint

کلیک روی آیکون مداد گزینه‌های ویرایش breakpoint انتخاب‌شده را باز می‌کند:

ویرایش breakpoint پیش‌فرض «Tablet portrait»

ویژگی‌های زیر breakpoint قابل ویرایش‌اند:

ویژگی	توضیح
Label	هنگام hover روی آیکون breakpoint در نوار ابزار
Width (px)	مقدار min-width/max-width در @media query (بسته به base breakpoint)
Width (Builder)	عرض هنگام جابه‌جایی به breakpoint در سازنده
Icon	آیکون breakpoint در نوار ابزار
Base breakpoint	تنظیم breakpoint به‌عنوان base
Key	قابل سفارشی‌سازی نیست (برای ذخیره و شناسایی تنظیمات breakpoint)

رایج‌ترین کار، سفارشی کردن عرض breakpointهای پیش‌فرض (موبایل) است. تصویر زیر «Tablet portrait» با عرض سفارشی 1023px را نشان می‌دهد:

یعنی هر استایلی روی «Tablet portrait» برای دستگاه‌های با عرض کمتر از 1024px اعمال می‌شود.

ساخت breakpoint جدید

می‌توانید هر تعداد breakpoint سفارشی اضافه کنید. با این حال، قبل از breakpointهای بیشتر، توصیه می‌شود عرض breakpointهای پیش‌فرض موبایل را مطابق نیاز تنظیم کنید.

به‌ندرت به بیش از یک یا دو breakpoint اضافه علاوه بر پیش‌فرض‌ها نیاز دارید.

کلیک روی آیکون «+» در هدر breakpoint manager فرم ساخت breakpoint را باز می‌کند.

تصویر زیر ساخت breakpoint جدید «Large» با عرض 1400px را نشان می‌دهد:

ساخت breakpoint جدید

پس از «Create»، breakpoint جدید باید در breakpoint manager (همراه برچسب «CUSTOM») و نوار ابزار سازنده ظاهر شود:

Breakpoint manager با breakpoint سفارشی جدید

چون عرض این breakpoint را 1400px گذاشته‌ایم، به‌عنوان اولین breakpoint (بزرگ‌ترین) نمایش داده می‌شود. Desktop (base breakpoint) عرض پیش‌فرض 1279px دارد.

توقف موقت breakpoint سفارشی

هر breakpoint سفارشی را با toggle کردن checkbox سمت راست در breakpoint manager می‌توانید pause کنید:

توقف موقت breakpoint سفارشی «Large»

Pause کردن breakpoint سفارشی به شما امکان می‌دهد تولید استایل آن در فرانت‌اند را رد کنید، در حالی که استایل‌های تنظیم‌شده در سایت حفظ می‌شوند — بدون حذف تک‌تک آن‌ها که در سایت بزرگ می‌تواند به هزاران تنظیم برسد.

بازنشانی breakpoint پیش‌فرض

برای بازگرداندن مقادیر پیش‌فرض یک breakpoint پیش‌فرض، روی آیکون «reset» (کنار مداد) کلیک کنید.

بازنشانی همه breakpointها

کلیک روی آیکون «gear» در هدر breakpoint manager عمل «Reset: Breakpoints» را باز می‌کند. با کلیک روی این دکمه همه ویرایش‌های breakpoint (پیش‌فرض و سفارشی) از پایگاه داده حذف می‌شوند.

Note

تنظیمات وابسته به breakpoint روی المان یا Theme Styles حذف نمی‌شوند. لطفاً از همان ابتدا desktop-first یا mobile-first را انتخاب کنید.

درک base breakpoint

base breakpoint @media query ندارد. پس همه استایل‌های تنظیم‌شده روی base breakpoint برای همه عرض‌های صفحه اعمال می‌شوند.

به همین دلیل، به‌طور پیش‌فرض هر استایلی روی «Desktop» در breakpointهای دیگر هم دیده می‌شود — مگر استایل مشخصی روی breakpoint خاص تنظیم کنید؛ آن‌گاه قانون breakpoint-specific بر استایل base اولویت دارد.

هنگام ویرایش breakpoint می‌توانید آن را «Base breakpoint» کنید. سپس استایل‌های تنظیم‌شده روی base جدید در زنجیره breakpoint به بالا و پایین به ارث برده می‌شوند.

در تصویر زیر «Tablet portrait» به‌عنوان base breakpoint تنظیم شده است.

نقطه زرد، خطوط و فلش‌ها کنار آیکون‌های breakpoint وراثت استایل را visualize می‌کنند:

تغییر base breakpoint به «Tablet portrait»

طراحی mobile-first

استایل‌دهی در Bricks به‌طور پیش‌فرض از بزرگ‌ترین breakpoint به «Tablet portrait» > «Mobile landscape» و «Mobile portrait» پایین می‌آید.

با تنظیم کوچک‌ترین breakpoint به‌عنوان base، رویکرد **mobile-first** را به کار ببرید.

تصویر زیر «Mobile portrait» (کوچک‌ترین breakpoint) را به‌عنوان base نشان می‌دهد — mobile-first. برچسب «MOBILE FIRST» در هدر breakpoint manager هم همین را نشان می‌دهد:

طراحی mobile-first در Bricks

ترتیب breakpointها هم معکوس شده و از کوچک‌ترین شروع می‌شود. اکنون می‌توانید طراحی را از کوچک‌ترین breakpoint آغاز کنید.

بازتولید فایل‌های CSS (Bricks)

هر بار عرض breakpoint پیش‌فرض را سفارشی کنید، Bricks به‌طور خودکار فایل‌های CSS Bricks (مثل frontend.min.css و غیره) که media query آن breakpoint را دارند به‌روز می‌کند.

اگر عرض breakpoint در فرانت‌اند درست اعمال نمی‌شود، با کلیک روی «Regenerate CSS files» زیر Bricks > Settings > General > Custom breakpoints فایل‌های CSS را بازتولید کنید.

نشانگر کنترل واکنش‌گرا

در Bricks 1.11.1 نشانگر responsive control indicator معرفی شد تا ببینید کدام کنترل‌ها می‌توانند در breakpointهای مختلف مقدار متفاوت داشته باشند. چند گزینه برای زمان نمایش این نشانگر وجود دارد. زیر Bricks > Settings > Builder > Control panel > Responsive control indicator تنظیم کنید:

• Show if any value exists (Default): اگر کنترل در هر breakpoint مقداری داشته باشد نمایش داده می‌شود
• Show if non-base breakpoint value exists: فقط اگر مقدار با base breakpoint فرق کند
• Show on all responsive controls: روی همه کنترل‌های responsive، بدون توجه به مقدار
• Disable