موقعیت یابی سفارشی المان ها در المنتور

کاربرد موقعیت یابی سفارشی المان ها در المنتور

موقعیت یابی سفارشی المان ها در المنتور ( Custom Positioning ) برای شناور کردن عناصر مختلف در صفحات به طور دلخواه و قرار گیری کاملا سفارشی المان ها آنگونه که مورد نظر طراح است را میسر میکند. تاکنون با خیلی از ابزار ها و المان ها و نحوه استفاده از آنها آشنا شده ایم. ولی کمتر به نحوه استایل دهی قرار گیری و تعیین جایگاه های المان ها پرداخته ایم. موقعیت یابی سفارشی المان ها در المنتور یکی از پیشرفته ترین امکانات افزونه المنتور محسوب میگردد و به منظور تعیین جایگاه ها به طور سفارشی در فضای نمایشی سکشن و ستون کاربرد دارد که تاثیر به سزایی در نمایش بصری و همچنین ابتکار عمل در طراحی میشود و میتوان گفت کنار ویژگی موشن افکت معنا و مفهوم پیدا میکند

موقعیت یابی سفارشی المان ها در المنتور ( Custom Positioning ) امکان تعریف موقعیت عناصر را به طور مجزا و استقرار آنها به صورت ثابت و شناور در هر نقطه از صفحه نمایش را میسر میسازد و در تولید محتوای بصری جذاب کمک شایانی میکند این ویژگی در مقادیر و عناوین متعددی تعریف میگردد که در بستر المنتور به طور کامل با آن آشنا میشوید و نکته حائز اهمیت این ویژگی در المنتور سرعت تولید محتوا در عین حفظ  گستردگی توان طراح در پیاده سازی ایده های نمایشی است که به نوع خود مثال زدنی و منحصر به فرد است.

طرح بندی لایه ها، ترازبندی و عرض نمایشی عناصر

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

نکته مهم

چون با استفاده ازین ویژگی Custom Positioning تنظیمات عرضی و   قرار گیری المان ها نسبت به عناصر شاخص  تغییر میدهید باید نسبت به واکنش گرایی محتوا در دستگاه های مختلف مخصوصا تلفن های همراه دقت کافی را داشته باشید و ممکن است بعد از طراحی با پیمایش افقی در صفحه روبه رو شوید که میتوانید با استفاده از گزینه overflow از پیمایش خارج از محدوده نمایشگر جلوگیری کنید و با استفاده از واحد های نسبی vw، vh ، px و % در وکنش گرایی دستگاه های مختلف به طور مجزا یک طراحی استاندارد را انجام دهید

برای فعالسازی این ویژگی بخش خود را ویرایش دهید و از تب محتوا گزینه overflow را روی hidden اسلاید کنید.

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

آموزش طراحی با موقعیت یابی سفارشی

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

تراز بندی ستون

برای تنظیمات طرح بندی المان های  داخل ستون باید ستون را ویرایش دهید و از تب محتوا داخل بخش طرح بندی تغییرات سفارشی خود را اعمال کنید.

1. عرض ستون : عرض نمایشی ستون های موجود در بخش خود را که در راستای افقی قرار گرفته اند را تنظیم کنید این تغییرات نمایشی بر حسب درصد محاسبه میگردد
2. Colum order : تقدم نمایشی عناصر داخل یک ستون را میتوانید با درج عدد در این فیلد اعمال کنید که در حالت ریسپانسیو کاربرد موثری دارد
3. Vertical align : تنظیمات نمایشی المان ها در ترازبندی عمودی
   بالا، وسط و پایان برای تنظیم نمایشی المان ها در حالت عادی میباشد زمانی که از ویژگی Custom positioning استفاده میکنید و یا فرم نمایشی المان ها دارای عدم تناسب باشد سایر گزینه ها یعنی فاصله بینابینی، space around و space evenly به کمکتان می آیند.
4. Horizontal align : تنظیمات نمایشی المان ها در تراز بندی افقی
   پیش فرض، بالا، وسط و پایان برای تنظیم نمایشی المان ها در حالت عادی میباشد زمانی که از ویژگی Custom positioning استفاده میکنید و یا فرم نمایشی المان ها دارایعدم تناسب باشد سایر گزینه ها یعنی فاصله بینابینی، space around و space evenly به کمکتان می آیند.
5. فضای بین ابزارک ها : زمانی که المان هارا در ترازبندی عمودی داخل یک ستون تنظیم میکنید میتوانید از طریق گزینه فضای بین ابزارک ها بر حسب پیکسل فواصل میانی المان ها را سفرشی سازی کنید.

عرض و جایگاه در Custom positioning

برای استفاده از قابلیت موقعیت سفارشی در طراحی با المنتور در تب پیشرفته ابزار یا ویجت مورد نظر وارد بخش Custom positioning شوید.

عرض

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

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

جایگاه

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