معرفی المنتور 3.4: نقاط شکست اضافی سفارشی برای طراحی نامحدود

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

شما به تازگی یک وب سایت دیدنی برای مشتری طراحی کردین، اما ناگهان اونها میخوان سایت رو در یک جلسه روی صفحه نمایش بزرگ دفترشون  ببینن.

تعجب می کنید حتما که – وب سایت شما چطوری در تلویزیون 70 اینچ 16: 9 ظاهر میشه؟ 😬

خب، دیگه تعجب نکنین! المنتور که هیچوقت پشتتون رو خالی نمیکنه.

معرفی نقاط شکست سفارشی اضافی!

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

هشدار جدی
توصیه میکنم قبل از بروزرسانی المنتور و ادانها حتما از سایتتون پشتیبان گیرید حتی سعی کنید ابتدا روی یک وبسایت آزمایشی یا کپی سایتتون آپدیت کنید.

نقاط شکست اضافی

شکستن مرزهای طراحی با نقاط شکست

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

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

Elementor Core 3.4 به شما این قدرت رو میده که طرح بندیتون رو بر اساس هفت دستگاه تنظیم کنین.

هنگام استفاده از نقاط شکست، انعطاف پذیری کامل در موارد زیر رو دارین:

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

چطوری برای دستگاه‌های مختلف با استفاده از نقاط شکست طراحی کنیم

المنتور از یک مفهوم آبشاری در نقاط شکست استفاده میکنه و برای هر دستگاهی به جز صفحه عریض کاهش میده. یک راه آسون برای به خاطر سپردن تأثیر هر نقطه شکست بر نقاط دیگر اینه: دسک تاپ همیشه پیش فرضه.

دسکتاپ تنظیمات پیش فرض صفحه‌ست که بر سایر نقاط شکست برای صفحه های بزرگتر و کوچکتر تأثیر میذاره.

مثال: تنظیم عناوین مختلف هر نقطه شکست

بیایید با هم به یک مثال ساده برای درک نحوه عملکرد اون نگاه کنیم.

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

اگر حالا به نقطه شکست تبلت برین و اندازه عنوان رو روی 60 پیکسل تنظیم کنین، برای همه نقاط شکست کوچک تر، از جمله Mobile و Mobile-Extra اعمال میشه.

استایلی که برای Tablet تنظیم کردین در نقاط شکست بزرگتر اعمال نمیشه، که در این مورد شامل Laptop و Tablet-Extra هست. نقاط شکست این دستگاه های بزرگتر 80px همون Desktop باقی میمونه.

دقیقاً کدوم استایلها رو در نقاط شکست دیگه تنظیم می کنید

با هر نقطه شکست اضافی سفارشی، ضرورت درک دقیق اینکه چه چیزی از یک نقطه شکست به نقطه دیگه به ارث رسیده، ایجاد میشه.

به همین دلیل المنتور یک بهبود رابط کاربری جدید اضافه کرده که میتونه به شما در تشخیص استایلهایی که از نقاط شکست دیگه به ارث رسیدن کمک کنه. بنابراین، اگه شما حاشیه رو در تبلت روی 10 پیکسل تنظیم کنین  به نمای Mobile-Extra منتقل میشه.

حالا مشاهده میکنین که مقادیر ارثی در تنظیمات مثل پدینگ، مارجین، تصاویر پس زمینه و سایر کنترلهای عددی به عنوان متغیرهایی نشان داده شدن. در مثال ما، 10 پیکسلی که در تبلت تنظیم کردیم در همه دستگاه هایی که کوچکتر از Tablet هستن، به عنوان یک مکان خاکستری قابل مشاهده ست.

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

بهبود عملکرد شماره یک

نقاط شکست محدودیت سرعت رو هم میشکنه

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

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

بهبود عملکرد شماره دو و سه

حذف پشتیبانی IE و بهبود بارگذاری عالی فونت

المنتور پنج سال پیش معرفی شد، در روزهایی که اینترنت اکسپلورر و سایر جایگزین ها برای تفسیر کدهای مدرن به پشتیبانی گسترده و کپی نیاز داشتند. امروزه مرورگرهای وب قادر به تفسیر بومی این زبان مدرن بدون نیاز به توضیح اضافی هستند. چرا مهمه؟ چون ما رو قادر میسازه تا حداکثر 110 کیلوبایت در هر بار صفحه ذخیره کنیم، که به معنی صفحات سریعتر برای شما و بازدیدکنندگان شماست. بارگذاری فونت همچنین ارتقا داده شده! تا به حال، هنگام افزودن نمادی از Font Awesome، از کل کتابخانه در وب سایت استفاده میشد. با تغییر مکانیسم بارگذاری یک آیکون به SVG، درخواست ها رو کاهش میدیم و در نتیجه عملکرد و زمان بارگذاری رو در سراسر صفحه بهبود میده. هر کیلوبایت کاهش یافته، به سرعت بارگذاری صفحه برای هر صفحه ای که در المنتور ایجاد میکنین، تبدیل میشه! نگران نباشید، ما به ارائه بیشتر و بیشتر این پیشرفت ها ادامه میدیم.

المنتور نسخه 3.4: همه چیز رو با نقاط شکست اضافی سفارشی المنتور پاسخگو کنید!

المنتور نسخه 3.4:

نقاط شکست بهتر، عملکرد بهتر

نقاط شکست سفارشی جدید، تطبیق طرح های شما با صفحه های مختلف رو بسیار آسون میکنه.

این نسخه همچنین به ارائه ابزارهایی که بهترین عملکرد جهان رو با سه بهبود عملکرد متفاوت ارائه میدن، ادامه میده.