در این ویدئو، تمامی تنظیمات مربوط به ستون و ردیف را در پنل تنظیمات بررسی می کنیم.

نمایش و ابعاد

در بخش «نمایش و ابعاد»، نخست با گزینه «حالت نمایش» روبه رو هستیم. این گزینه امکان مخفی کردن یک ستون یا ردیف را بدون حذف آن فراهم می کند. در این حالت، بخش مورد نظر در نسخه کاربری نمایش داده نمی شود، اما در محیط مدیریت همچنان قابل مشاهده و ویرایش خواهد بود.

لازم به یادآوری است صفحه ای که در حال مشاهده آن هستیم، محیط مدیریت صفحه محسوب می شود و تنها مدیران به آن دسترسی دارند. برای مشاهده خروجی نهایی صفحه در نسخه کاربری، می توان از پنل پایین صفحه گزینه «پیش نمایش» را انتخاب کرد.

تنظیمات مربوط به عرض در آموزش های قبلی به صورت کامل توضیح داده شده است.
در بخش «ارتفاع»، تنظیمات مشابهی در دسترس قرار دارد، با این تفاوت که واحد VH نیز وجود دارد.
VH مخفف Viewport Height است و به ارتفاع ناحیه قابل مشاهده مرورگر اشاره دارد. به عنوان مثال، زمانی که مقدار 100vh برای یک ستون تعریف شود، ارتفاع آن دقیقا برابر با کل ارتفاع مرورگر خواهد بود.

حداقل و حداکثر عرض و ارتفاع

برای درک بهتر این بخش، یک مثال را در نظر بگیرید:
فرض کنید در یک ردیف، یک ستون شامل لوگو و در کنار آن یک ستون متنی قرار دارد. عرض ستون لوگو روی «اندازه محتوا» تنظیم شده و عرض ستون متن با نسبت ۱، باقی مانده فضا را پر می کند.
در صورتی که بخواهیم ستون متن نه بیش از حد باریک و نه بیش از حد عریض شود، می توان از گزینه های «حداقل عرض» و «حداکثر عرض» استفاده کرد. در این حالت، با تغییر حجم محتوا، ستون از محدوده تعیین شده خارج نمی شود و ظاهر صفحه دچار ناهماهنگی نخواهد شد.

گزینه های «حداقل ارتفاع» و «حداکثر ارتفاع» نیز عملکرد مشابهی را برای کنترل ارتفاع عناصر ارائه می دهند.

چیدمان

چیدمان مشخص می کند عناصر داخل یک ستون، ردیف یا بلوک دقیقا در چه موقعیتی قرار گیرند.
به عنوان مثال، ستونی را در نظر بگیرید که شامل یک المان سرتیتر است و ارتفاع آن روی ۳۰۰ پیکسل تنظیم شده است. به صورت پیش فرض در زبان فارسی، چینش افقی عناصر از سمت راست و چینش عمودی از بالای ستون انجام می شود.
برای تغییر محل قرارگیری سرتیتر، می توان از تنظیمات چیدمان استفاده کرد. در چینش افقی، گزینه های راست، وسط و چپ در دسترس هستند و در چینش عمودی، می توان المان را در بالا، وسط یا پایین ستون قرار داد. ترکیب این گزینه ها امکان تعیین دقیق موقعیت المان در محدوده ستون را فراهم می کند.

حال اگر یک ردیف شامل سه ستون با عرض «هم اندازه محتوا» داشته باشیم و بخواهیم این ستون ها به صورت گروهی در ردیف چیدمان شوند، از تنظیمات ردیف و بخش چیدمان استفاده می کنیم.
در این بخش، با فعال سازی چینش افقی، گزینه های زیر در دسترس خواهند بود:

  • فاصله در میان: فاصله بین ستون ها به صورت مساوی توزیع می شود.

  • فاصله در اطراف: فاصله بین ستون ها و فاصله اطراف آن ها به صورت مساوی تنظیم می گردد.

  • فاصله یکنواخت: فاصله بین ستون ها و فاصله اطراف آن ها دقیقا برابر خواهد بود.

همین منطق برای چینش عمودی نیز کاربرد دارد؛ به ویژه زمانی که در یک بلوک چند ردیف وجود داشته باشد. این تنظیمات امکان کنترل دقیق نحوه توزیع ردیف ها از بالا تا پایین بلوک را فراهم کرده و به ایجاد ظاهری منظم و حرفه ای کمک می کند.

گزینه های «ترتیب عمق لایه» و «موقعیت» دارای کاربردهای پیشرفته تری هستند که در آموزش های بعدی، به صورت کامل و همراه با مثال بررسی خواهند شد.

پس زمینه

با فعال سازی گزینه «رنگ پس زمینه»، می توان رنگ دلخواه را از طریق پالت رنگ روی بخش مورد نظر اعمال کرد.

برای ایجاد تعامل بیشتر، امکان تعریف تغییر حالت حساس به نشانگر ماوس یا Hover وجود دارد. به عنوان مثال، با فعال سازی هاور رنگ پس زمینه، هنگام قرار گرفتن نشانگر ماوس روی عنصر، رنگ پس زمینه تغییر می کند.
برای ایجاد تغییر نرم تر، می توان از گزینه «انیمیشن هاور پس زمینه» استفاده کرد که شامل تنظیمات مدت زمان تغییر، نوع انیمیشن و میزان تاخیر است.

در صورتی که بخواهیم پس زمینه به جای یک رنگ ثابت، از ترکیب چند رنگ تشکیل شود، از گزینه «پس زمینه گرادیان» استفاده می کنیم.
نحوه انتخاب رنگ ثابت، ساخت انواع گرادیان و ذخیره سازی آن ها در آموزش مربوط به رنگ و گرادیان به طور کامل توضیح داده شده است.

بلور پس زمینه

در صورتی که شفافیت پس زمینه کمتر از ۱۰۰ باشد، می توان با استفاده از گزینه «بلور پس زمینه» جلوه هایی مانند شیشه مات ایجاد کرد. این ویژگی حتی می تواند در حالت هاور نیز فعال شود.
توجه داشته باشید که به دلیل محدودیت برخی مرورگرها، بلور پس زمینه در محیط مدیریت نمایش داده نمی شود و نتیجه نهایی تنها در نسخه کاربری قابل مشاهده است.

تصویر پس زمینه

برای استفاده از تصویر به عنوان پس زمینه، گزینه «تصویر پس زمینه» فعال می شود. پس از آن، امکان بارگذاری تصویر یا انتخاب آن از بخش رسانه فراهم خواهد شد.
تنظیمات متنوعی برای کنترل نحوه نمایش تصویر در دسترس است؛ از جمله چینش افقی و عمودی، حالت های تکرار، نحوه پر شدن فضا (خودکار، پوشش، گسترش) و نوع پیمایش تصویر (اسکرول یا ثابت).
همچنین با استفاده از گزینه «رنگ رویی»، می توان یک لایه رنگی شفاف روی تصویر قرار داد تا خوانایی متن افزایش یافته یا هماهنگی رنگی بهتری ایجاد شود.

چرخش

با فعال سازی گزینه «چرخش»، می توان میزان چرخش عنصر را بر اساس درجه، رادیان یا تعداد دور مشخص کرد.
در صورت فعال سازی «چرخش – هاور»، این چرخش تنها هنگام قرار گرفتن نشانگر ماوس روی عنصر اعمال می شود. بخش «انیمیشن هاور» نیز امکان تنظیم حرفه ای تر این تغییر را فراهم می کند.

شفافیت

بخش شفافیت برای کنترل میزان وضوح عناصر استفاده می شود. مقدار شفافیت می تواند از عدد ۱ (کاملا واضح) تا ۰ (کاملا محو) تنظیم شود.
با فعال سازی «شفافیت – هاور»، این تغییر تنها در حالت هاور اعمال شده و با استفاده از انیمیشن، جلوه ای نرم و تعاملی ایجاد می شود.

فاصله

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

حاشیه

حاشیه به فضای بیرونی عناصر اشاره دارد و فاصله عنصر از عناصر اطراف یا والد خود را مشخص می کند. تنظیمات حاشیه نیز به صورت جداگانه برای هر سمت و در حالت هاور قابل تعریف است.

خط حاشیه

در بخش «خط حاشیه» می توان برای هر سمت عنصر، خطی با ضخامت، نوع (ساده، خط چین یا نقطه چین) و رنگ دلخواه تعریف کرد.
این تنظیمات در حالت هاور نیز قابل تغییر بوده و با استفاده از انیمیشن، انتقالی نرم ایجاد می شود.

انحنای گوشه

گزینه «انحنای گوشه» برای گرد کردن گوشه های عناصر استفاده می شود. می توان برای هر گوشه مقدار جداگانه ای به پیکسل یا درصد تعیین کرد.
برای مثال، با مقدار ۵۰٪ می توان یک عنصر کاملا دایره ای ایجاد کرد. این ویژگی در حالت هاور نیز قابل تغییر و انیمیشن پذیر است.

سایه

با استفاده از «سایه»، می توان به عناصر عمق و جذابیت بصری داد. تنظیمات شامل موقعیت افقی و عمودی، میزان بلور، گسترش، رنگ و جهت سایه (داخلی یا خارجی) است.
سایه ها در حالت هاور نیز قابل تنظیم هستند و با انیمیشن، جلوه ای پویا ایجاد می کنند.

انیمیشن

انیمیشن ها امکان نمایش تغییرات و حرکت عناصر را به شکل پویا فراهم می کنند. در این بخش می توان نوع انیمیشن، تاخیر شروع و مدت زمان اجرا را مشخص کرد.
توجه داشته باشید که این انیمیشن ها تنها در نسخه کاربری وب سایت نمایش داده می شوند و در محیط مدیریت قابل مشاهده نیستند.

کلاس هاور یکتا

در شرایطی که ویژگی های هاور یک عنصر باید در یک ناحیه بزرگ تر فعال شوند، می توان از گزینه «کلاس هاور یکتا» استفاده کرد.
برای این کار، ابتدا از تنظیمات والد گزینه «کپی کردن کلاس» انتخاب می شود. سپس در تنظیمات عنصر مقصد، گزینه «کلاس هاور یکتا» فعال و گزینه «جایگذاری» انتخاب می گردد.
با این کار، تمامی ویژگی های هاور عنصر به والد آن منتقل شده و حساسیت به هاور در سطح گسترده تری اعمال می شود.

در پایان، لازم به ذکر است تمامی تنظیماتی که در این بخش بررسی شد، عینا برای ستون، ردیف و بلوک یکسان بوده و تفاوتی در نحوه عملکرد آن ها وجود ندارد.

سوالی دارید ؟ همینجا بپرسید.