در جلسه ششم از دوره آموزش رایگان المنتور، به بررسی دقیق عملکرد ستون ها در المنتور میپردازیم. در این جلسه، با تب اصلی ستون، طرح بندی در ستون، تب استایل و تب پیشرفته در ستون ها آشنا خواهید شد. با دیدن این آموزش و مطالعه متن به طور دقیق، به هیچ آموزش دیگری در زمنیه عملکرد ستون ها در المنتور نیاز نخواهید داشت، پس در ادامه با ما همراه باشید.
۳ تب اصلی ستون در المنتور
در قسمت ستون ها همانند سکشن که درجلسه قبلی یعنی جلسه آموزش سکشن یا بخش ویرایشگر در المنتور توضیح داده شد، سه تب اصلی (طرح بندی، استایل، پیشرفته) وجود دارد. این بخش تفاوت کمی با قسمت سکشن دارد. در ادامه به بررسی عملکرد ستون ها در المنتور میپردازیم پس با من همراه باشید.
۱- طرح بندی در ستون
تمامی تنظیماتی اندازه که ما میخواهیم روی ستون خودمان ایجاد کنیم مربوط به این قسمت میشود.
۱-۱ عرض ستون
در این قسمت میتوانیم عرض ستون خود را به صورت درصد مشخص کنیم که بسته به تعداد ستون های ما دارد. هر چه تعداد ستون های ما داخل سکشن بیشتر شود، فضای تخصیص داده شده به هر المان کمتر خواهد شد.
در تصویر بالا مشاهده می کنید که چهار عدد ستون در سکشن وجود دارد که عرض هر کدام از ستون های ۲۵% میباشد
۲-۱ تراز عمودی
در بعضی مواقع ارتفاع ستون بغلی از ستون کنار خودش بیشتر است. اما گاهی از اوقات ما احتیاج داریم ویجتی که در ستون سمت راست قرار دارد را از نظر موقعیت ارتفاع تغییر دهیم، انجام این کار با استفاده از بخش تراز عمودی در تب اصلی امکان پذیر است.
۳-۱ تراز افقی
عملکرد ترازبندی افقی نیز همانند تراز عمودی است و ویجت های ما در ستون به صورت افقی جا به جا میشوند.
۴-۱ فاصله بین ابزارک ها
فاصله بین ابزاک های بر واحد پیکسل و به صورت پیشفرض بر روی ۲۰px تنظیم شده است و ما میتوانیم آن را به صورت دلخواه تنظیم کنیم.
۲- تب استایل
در تب استایل هر تغییری که بر روی ظاهر ستون ما اتفاق میافتد را بررسی خواهیم کرد.
۱-۲ پس زمینه
در این قسمت همان طور که از نامش پیداست میتوانیم برای سکشن خود پس زمینه ای از انواع مختلف: رنگ، تصویر قرار دهیم و تنها تفاوت این قسمت با بخش سکشن این هست که ما نمیتوانیم برای ستون خود پس زمینه ی ویدئویی قرار دهیم.
۲-۲ حاشیه
در این قسمت میتوانیم برای سکشن خود حاشیه ای از نوع : دوبل، یکپارچه و… قرار دهیم.
در ضمن انحنای مرز یا همان Radius در این قسمت قرار دارد که میتوانیم به سکشن خود انحنا دهیم.
۳-۲ تایپو گرافی
در این قسمت ما میتوانیم یک سری الگو ها برای رنگ های متن، لینک، سربرگ، و… قرار دهیم که دیگر نیازی نباشد برای هر تغییر رنگ متن سکشنمان رنگ انتخاب کنیم.
۳- پیشرفته
در قسمت پیشرفته میتوانیم برای سکشن خودمان حاشیه خارجی (Margin) و فاصله داخلی (Padding)، زد ایندکس (Z index)، شناسه CSS و کلاس های CSS قرار دهیم.
۱-۳ موشن افکت
در قسمت موشن افکت میتوانیم به سکشن خود افکت های مختلفی بدهیم. برای مثال: افکت ورود سکشن در بارگذاری صفحه و یا حتی افکت سکشن هنگام اسکرول صفحه را از این بخش در تب پیشرفته استایل میتوان تعریف کرد.
۲-۳ واکنش گرا
در قسمت واکنش گرا میتوانیم مشخص کنیم که این سکشن در کدام دستگاه ها به نمایش در بیاید و در کدام از دستگاه ها مخفی شود.
۳-۳ ویژگی ها (Attributes)
در قسمت ویژگی ها میتوانیم به المان های خودمان از ویژگی های به کار رفته در Html آن برگه استفاده کنیم و یا حتی به آن اضافه کنیم.
۴-۳ Custom Css
اگر به کد نویسی Css مسلط باشید به راحتی میتوانید سکشن خود را شخصی سازی تر کنید و بعد از شخصی سازی کد های خود را در این قسمت که در المنتور پرو قرار گرفته است، قرار دهید.
