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