آموزش درج سکشن و ستون در المنتور
در این آموزش ایجاد سکشن (بخش) و ستون می پردازیم که با استفاده از این ابزارها بتوانید قسمت های زیادی از سایت را طراحی کنید. این کار باعث می شود که دست شما بازتر شود تا بتوانید کل سایت را با استفاده از این سطر و ستون ایجاد کنید.
نحوه ایجاد سکشن در المنتور
✓ روش اول:
برای درج سکشن (بخش) ابتدا روی آیکون مثبت در صفحه ایجاد شده کلیک کنید و سپس تعداد ستون های بخش خود را انتخاب کنید.
✓ روش دوم:
در روش دوم می توانید از ابزارک المنتور به نام بخش داخلی نیز استفاده کنید. یا می توانید به صورت دستی خودتون ستون اضافه کنید، برای انجام این کار بر روی ستون کلیک راست کرده گزینه (+ افزودن ستون جدید) کلیک نمایید تا ستون دیگر به ستون های از قبل ایجاد شده اضافه شود.
+
اگر بخواهید سایز یا اندازه ستون ها را تغیییر دهید کافیست اشاره گر ماوس رو در گوشه سمت راست یا چپ ستون قرار دهید و با حرکت ماوس اندازه ستون ها رو تغییر دهید.
تنظیمات سکشن (بخش ها) در المنتور
برای انجام این کار طبق عکس زیر عمل کنید تا بخش تنظیمات سکشن (بخش) نمایش داده شود.
با کلیک بر ویرایش بخش سکشن (بخش) تنظیمات سکشن ها که شامل (طرح بندی، استایل و پیشرفته) برای شما ظاهر می شود. در عکس فوق قابل مشاهده می باشد.
✓ تب طرح بندی در سکشن
همان طور که در تصویر بالا مشاهده می کنید این قسمت دارای 2 بخش طرح بندی و ساختار می باشد.
عرض محتوا: در این بخش می توانید عرض محتوا بر اساس جعبه ای یا تمام عرض انتخاب کنید.
فاصله بین ستون ها: شما می توانید فاصله بین ستون ها را به صورت (باریک، عریض، بدون فاصله، عریض و عریض تر و..) انتخاب نمایید.
ارتفاع: می توانید ارتفاع سکشن را بر اساس (هم اندازه صفحه نمایش یا کمترین ارتفاع) تنظیم کنید.
تراز عمودی: در این بخش می توانید انتخاب کنید که محتوای هر ستون در چه حالتی قرار بگیرد (بالا، وسط، پایین، فاصله اطراف، فاصله یک نواخت و ...)
سرریز یا Overflow: انتخاب کنید اگر محتوا در صورتی که از بخش بیرون زده باشه مخفی شود یا خیر.
✓ تب استایل در سکشن
این تب شامل 5 قسمت می باشد که هر کدام را به صورت مختصر توضیح می دهیم.
پس زمینه: برای اینکه در پس زمینه بخش خود تصویر و یا رنگ یا به صورت ویدئویی یا اسلایدی قرار دهید روی این قسمت کلیک کنید.
روکش پس زمینه: در اینجا می توانید برای پس زمینه سکشن هم رنگ یا تصویر انتخاب کنید.
حاشیه: می توانید در این بخش برای سکشن خود از کادر دور (یکپارچه، دوبل، نقطه ای، خط فاصله دار و شیاردار ) و همچنین سایه استفاده کنید.
جدا کننده: اگر دوست دارید افکتی در بالا و پایین بخش داشته باشید مثلا حالت کوه و یا زیگزاگی داشته باشید از این تنظیمات استفاده کنید به ویدئو زیر توجه کنید.
تایپوگرافی: در این بخش می توانید محتوای نوشته شده در داخل سکشن به صورت دستی (رنگ سربرگ، رنگ لینک ها، رنگ متن، رنگ هاور لینک، یا حتی جهت متن (وسط، راست، چپ، تراز شده) قابل ویرایش می باشد.
✓ تب پیشرفته
این بخش شامل 5 قسمت می باشد.
پیشرفته: کار این قسمت ایجاد حاشیه خارجی ، فاصله داخلی سکشن، و استفاده از کلاس های css (سفارشی طراحی کردن سایت با استفاده از کدهای css)
موشن افکت: در این قسمت می توانید جلو های حرکت به سکشن خود بدهید، مثلا هنگام نمایش سکشن حالت های (از راست، چپ، بالا و پایین، چرخشی، محو شدن و..) انتخاب کنید.
واکنش گرا: در این بخش می توانید حالت های ریسپانسیو کردن، مخفی کردن و نمایش دادن در دسکتاپ، تبلت، موبایل را در این بخش فعال کنید.
css سفارشی: در این قسمت css سفارشی برای این بخش وارد می شود.
تنظیمات ستون ها در المنتور
تنظیمات ستون ها و ستون بندی نیز همانند سکشن (بخش) می باشد. برای انجام این کار طبق ویدئو زیر عمل کنید تا بخش تنظیمات ستون نمایش داده شود.
✓ طرح بندی در ستون
عرض ستون (%): همانطور که در ویدئو بالا مشاهده می کنید عرض ستون رو برابر 70 قرار دادیم تا اندازه عرض ستون تغییر کند شما هم می توانید به صورت دستی هر عددی که خواستید وارد کنید.
✓ استایل در ستون
این بخش شامل 3 قسمت می باشد.
پس زمینه: برای اینکه در پس زمینه بخش خود تصویر و یا رنگ را به صورت اسلایدی قرار دهید روی این قسمت کلیک کنید. به آموزش زیر دقت کنید.
حاشیه: در این قسمت می توانید به ستون خود کادر دور ستون یا سایه قرار دهید.
تایپوگرافی: در این بخش می توانید محتوای نوشته شده در داخل ستون به صورت دستی (رنگ سربرگ، رنگ لینک ها، رنگ متن، رنگ هاور لینک، یا حتی جهت متن (وسط، راست، چپ، تراز شده)) قابل ویرایش می باشد.
✓ تب پیشرفته
این بخش شامل 5 قسمت می باشد.
پیشرفته: کار این قسمت ایجاد حاشیه خارجی ، فاصله داخلی سکشن، و استفاده از کلاس های css (سفارشی طراحی کردن سایت با استفاده از کدهای css)
موشن افکت: در این قسمت می توانید جلو های حرکت به سکشن خود بدهید، مثلا هنگام نمایش سکشن حالت های (از راست، چپ، بالا و پایین، چرخشی و..) انتخاب کنید.
واکنش گرا: در این بخش می توانید حالت های ریسپانسیو کردن، مخفی کردن و نمایش دادن در دسکتاپ، تبلت، موبایل را در این بخش فعال کنید.
css سفارشی: در این قسمت css سفارشی برای این بخش وارد می شود.
