سبکهای تم (Theme styles)
ما همین الان یک بخش Hero ساختیم، اما به فاصلهگذاری بهتری نیاز دارد. به جای افزودن padding بهصورت دستی به هر بخش (کند و ناسازگار)، بیایید یک قانون سراسری با استفاده از Theme Styles تنظیم کنیم.
سبکهای تم سیستم طراحی سراسری سایت شما هستند. آنها ظاهر پیشفرض هر المان را کنترل میکنند. در پسزمینه، Bricks CSS را برای شما مینویسد. به جای نوشتن دستی section { padding: 80px 16px; }، یک بار آن را بهصورت بصری تنظیم میکنید و در همه جا اعمال میشود.
ساخت یک سبک تم
- روی آیکون Styles در نوار ابزار کلیک کنید (یا
Cmd/Ctrl + .را فشار دهید) - روی منوی کشویی Select: Theme Styles کلیک کنید و یک نام برای سبک تم وارد کنید
- روی آیکون «Create» کلیک کنید
این کار Style Manager را باز میکند. این مرکز اصلی Bricks برای مدیریت سیستم طراحی شماست. میبینید که چندین تب دارد: Theme Styles، Classes، Variables، Colors، Typography، Spacing، Framework و Settings. فعلاً روی Theme Styles تمرکز میکنیم و در صورت نیاز به بقیه برمیگردیم.
تنظیم فاصلهگذاری سراسری بخش
میخواهیم هر بخش padding و فاصلهگذاری ثابتی داشته باشد.
- در پنل Theme Styles، به Element > Section بروید
- Padding را تنظیم کنید:
- بالا:
80 - پایین:
80 - چپ:
16 - راست:
16 - Row gap را روی
32تنظیم کنید
بوم را ببینید: بخش Hero شما بلافاصله با padding جدید بهروز میشود! شما خود بخش را لمس نکردید؛ فقط قانون سراسری را تغییر دادید.
از این به بعد، هر بخش جدیدی که اضافه کنید بهطور خودکار این فاصلهگذاری را خواهد داشت.
اعمال برای کل وبسایت
در حال حاضر این سبک فقط در سازنده قابل مشاهده است. بیایید آن را برای کل سایت فعال کنیم.
- در Theme Styles، به Conditions بروید
- روی Add Condition کلیک کنید
- Entire Website را انتخاب کنید
- روی Save در نوار ابزار کلیک کنید
چرا این قدرتمند است
مقیاسپذیری: اگر بعداً تصمیم گرفتید که بخشها به padding 100px نیاز دارند، آن را یک بار در Theme Styles تغییر میدهید و کل سایت بهروز میشود.
سازگاری: دیگر لازم نیست به یاد بیاورید «60px بود یا 80px؟» Bricks آن را برای شما مدیریت میکند.
به این شکل فکر کنید:
- Theme Styles پیشفرضهای معقولی را برای کل سایت شما تعریف میکنند.
- Global classes (که بعداً در این سری یاد میگیرید) الگوهای قابل استفاده مجدد را به شما میدهند که میتوانید در صورت نیاز اعمال کنید.
- استایلهای تکالمانی فقط برای استثناهای نادر هستند.
بیشتر تصمیمات طراحی شما باید در Theme Styles و کلاسها باشد. اینگونه است که سایتها را قابل پیشبینی و آسان برای تغییر نگه میدارید.
بعدی: قالبها
حالا که استایلهای سراسری ما تنظیم شدند، بیایید به یکی دیگر از ویژگیهای سراسری قدرتمند نگاه کنیم: Templates. از آنها برای ساخت یک هدر که در هر صفحه نشان داده میشود استفاده میکنیم.