تخفیف پکیج‌های
المنتوربی‌نهایت تا


500 تومان
از شروع پاییز
تا جشن مهرگان

15 مهرماه

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

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

آنچه در این مطلب می خوانید

.
.
5 راهکار تخصصی
برای بهبود کار با المنتور

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

موقعیت یابی سفارشی المان ها در المنتور ( 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 یا ثابت : باعث ثابت ماندن المان و تثبیت آن میگردد در این حالت حتی با اسکرول صفحه نیز توسط بیننده موقعیت المان تغییر نمیکند میتوانید موقعیت دقیق المان را با تنظیم نوار های طولی و عرضی با لحاظ تراز بندی چپ و راست مشخص کنید
موقعیت یابی سفارشی المان ها در المنتور

گروه تعامل با کاربران فعال المنتور

ID: ir_elementor

پرسشی دارید؟ پاسختان را خواهیم داد ...

11 پاسخ

  1. سلام
    برای فوتر
    منیک دسترسی سریع گذاشتم
    یک متن
    بعد آدرس
    حالا مبخوام توی گوشی اول
    متن بیاد بعد دسترسی سریع بعدآدرس
    چطوری ترتیبشو تغییر بدم

    1. سلام
      بنظر میاد پاسخ شما در کامنتی مشابه داده شده است. لطفا برسی کنید

  2. سلام و عرض ادب . واقعا نکات مفیدی گفتید که جایی ندیده بودم کسی بگه. ممنون ازتون. ادامه این آموزش رو کی منتشر میکنید ؟ آیا یک آموزش پروژه محور راجب همین موضوع قرار میدید ؟

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

  3. سلام. از آنجا که فرمودید که برای بخش هدر و فوتر در بخش تگ html گزینه های header و footer انتخاب بشه میخواستم بدونم که آیا برای بخش محتوا چه گزینه ای انتخاب بشه؟ و آیا بخش نظرات و سایدبار هم شامل بخش محتوا میشه یا باید تگ جداگانه ای براشون انتخاب بشه؟

    1. سلام وقت بخیر
      پیشنهاد میشه از تگ aside استفاده کنید

  4. با سلام من برای طراحی سایت فارسی و فروشگاهی فارسی میتونم بدون مشکل با وردپرس انگلیسی که نهایت المنتور هم انگلیسی میشه میتونم کار کنم؟ یا بخاطر مشکلات راست چین نبودن به مشکل میخورم یا اصلا ربطی به این موضوع نداره؟ ممنون

    1. سلام و درود
      پیشنهاد میشه از وردپرس فارسی استفاده کنید.ابزارک های المنتور با استفاده از هسته زبان وردپرس راسچین میشن .اما خب مشکلی پیش نمیاد فقط زحمت شما بیشتر میشه. مثلا باید هر متنی که میسازید جایگاهش رو راستپین کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جلسات آموزشی

گروه تعامل با کاربران فعال المنتور

ID: ir_elementor

دریافت راهنمای تخصصی برای بهبود کار با المنتور
دریافت راهنمای تخصصی برای بهبود کار با المنتور