نقاط شکست المنتور چیست؟
قبل از اینکه به جزئیات نقاط شکست Elementor بپردازیم، اجازه دهید یک دقیقه وقت بگذاریم تا بفهمیم Elementor چیست.
Elementor یک افزونه سازنده وب سایت با کشیدن و رها کردن بصری برای وردپرس است.
سازنده بصری زنده به شما امکان میدهد بدون نیاز به دانش کدنویسی قبلی، طراحیهای وب سایت، صفحات فرود و فونتهای سفارشی واکنشگرای بصری خیرهکننده ایجاد کنید.
Elementor قالب های طراحی متعدد و ویجت های از پیش ساخته شده و طیف وسیعی از گزینه های سبک را ارائه می دهد که می توانید برای سفارشی کردن صفحه خود از آنها استفاده کنید.
Elementor با چندین گزینه فونت جهانی، بیش از 300 قالب، جلوههای حرکتی پیشرفته، ویژگیهای سفارشی و نسخههای برگشتی، یکی از پرطرفدارترین افزونههای وردپرس در بازار است. علاوه بر این، این افزونه دارای یک رابط کاربری بسیار شهودی و کاربرپسند است و تجربه طراحی سریع و بدون تاخیر را ارائه می دهد.
در نظر گرفتن این حقایق یک چیز را کاملاً روشن می کند:
طراحی وب سایت شما باید ریسپانسیو و روان باشد. بنابراین هنگام ایجاد یک وب سایت پویا، اولین چیزی که باید اطمینان حاصل کنید این است که یک طرح بندی ایجاد کنید که بدون زحمت در همه دستگاه ها، از گوشی های هوشمند گرفته تا مرورگرهای دسکتاپ، سازگار شود.
به عنوان یک طراح وب، هیچ کنترلی بر روی نوع دستگاهی که مردم برای مرور سایت شما استفاده می کنند نخواهید داشت. از این رو، ساخت یک چیدمان پاسخگو که به سرعت جهت گیری را با توجه به اندازه های مختلف صفحه بدون از دست دادن هیچ یک از عناصر طراحی تغییر می دهد، ضروری است.
نقاط شکست عنصر به شما کمک می کند تا دقیقاً این کار را انجام دهید. برای ساختن یک وب سایت واکنش گرا، نیازی به دانش فنی ندارید. نقاط شکست سفارشی Elementor باعث می شود که طراحی شبیه یک پیاده روی کیک به نظر برسد.
نقاط شکست طراحی وب چیست؟
آیا تا به حال به این فکر کرده اید که چرا طراحی های وب واکنش گرا می توانند به سرعت با اندازه های مختلف صفحه نمایش سازگار شوند؟
سلاح مخفی پشت این انتقال جادویی نقطه شکست طراحی وب است. نقطه شکست مقداری است که شما تعریف میکنید که در آن طرح و جهت طراحی با تغییر اندازه صفحه تغییر میکند. برای طراحان، یک نقطه انفصال رایج معمولاً درخواست رسانه است.
به طور معمول، زمانی که محتوا نامناسب به نظر می رسد، یک نقطه شکست اضافه می شود. هنگامی که مقدار را تعریف کردید، محتوا مطابق با جهت صفحه و عرض دستگاه پاسخ می دهد.
معمولاً، توسعهدهندگان در حالی که نقاط شکست را تعریف میکنند، رویکرد اول موبایل را دنبال میکنند. به عنوان کوچکترین صفحه نمایش در بازار، توسعه دهندگان طراحی نسخه موبایل و گسترش آن را به اندازه های صفحه نمایش بزرگتر از بالعکس آسان تر می دانند.
نقاط شکست المنتور چیست؟
قبل از اینکه به جزئیات نقاط شکست Elementor بپردازیم، اجازه دهید یک دقیقه وقت بگذاریم تا بفهمیم Elementor چیست.
Elementor یک افزونه سازنده وب سایت با کشیدن و رها کردن بصری برای وردپرس است.
سازنده بصری زنده به شما امکان میدهد بدون نیاز به دانش کدنویسی قبلی، طراحیهای وب سایت، صفحات فرود و فونتهای سفارشی واکنشگرای بصری خیرهکننده ایجاد کنید.
Elementor قالب های طراحی متعدد و ویجت های از پیش ساخته شده و طیف وسیعی از گزینه های سبک را ارائه می دهد که می توانید برای سفارشی کردن صفحه خود از آنها استفاده کنید.
Elementor با چندین گزینه فونت جهانی، بیش از 300 قالب، جلوههای حرکتی پیشرفته، ویژگیهای سفارشی و نسخههای برگشتی، یکی از پرطرفدارترین افزونههای وردپرس در بازار است. علاوه بر این، این افزونه دارای یک رابط کاربری بسیار شهودی و کاربرپسند است و تجربه طراحی سریع و بدون تاخیر را ارائه می دهد.
نقاط شکست المنتور چیست؟
نقطه شکست پیشفرض Elementor به صورت زیر تعریف شده است:
- موبایل: کمتر از 767 پیکسل
- تبلت: 767 پیکسل < 1024 پیکسل
- دسکتاپ: 1024 پیکسل و بالاتر
در آخرین نسخه خود، Elementor یک ویژگی اضافی سفارشی را اضافه کرده است که اکنون به کاربران اجازه می دهد تا حداکثر 4 محدوده نقطه شکست سفارشی جدید اضافه کنند:
- Mobile Extra (مقدار نقطه شکست بین موبایل و تبلت)
- Tablet Extra (مقدار نقطه شکست بالای تبلت، زیر لپتاپ و صفحه عریض)
- لپتاپ (مقدار نقطه شکست بالای تبلت و در صورت اضافه شدن، همچنین بالای تبلت اضافی)
- صفحه عریض (نقطه شکست با عرض حداقل برای صفحات بسیار بزرگ)
ننقطه شکست صفحه عریض
Elementor 3.4.0 برای انطباق با فناوریهایی که دائماً در حال تکامل هستند مانند صفحهنمایشهای 8K و نمایشگرهای بسیار عریض، یک مقدار نقطه شکست جدید را اضافه کرد که از مقدار حداقل عرض قبلیشان برای دسکتاپ بیشتر بود.
چرا باید نقاط شکست را در المنتور اضافه کنید؟
با معرفی اندازه های جدیدتر صفحه نمایش، طراحی وب سایت ریسپانسیو دیگر لوکس نیست. آیفون 14 را مثال بزنید که در چهار نوع مختلف عرضه می شود: آیفون 14، آیفون 14 پلاس، آیفون 14 پرو و آیفون 14 پرو حداکثر.
و گوشی های هوشمند تنها نمونه نیستند. افراد بیشتری از تلویزیون های هوشمند و تبلت های صفحه عریض برای مرور وب سایت ها استفاده می کنند.
نقاط شکست Elementor به شما این امکان را می دهد که هر اندازه صفحه نمایش را در همه دستگاه ها هدف قرار دهید تا صفحات وب پویا ایجاد کنید. برخی از دستگاه ها حداقل حداکثر عرض را برای نقاط شکست مشخص می کنند. با شش نقطه شکست سفارشی در Elementor، اکنون می توانید کنترلی برای انتخاب نقاط شکست فعال و تنظیم مقدار آنها برای هر دستگاهی داشته باشید.
چگونه نقاط شکست عنصر را اضافه کنیم؟
برای افزودن نقاط شکست پیشفرض در Elementor این دستورالعملها را دنبال کنید:
- به عنوان یک کاربر ادمین وارد سایت وردپرس خود شوید. به صفحات داشبورد بروید و روی Edit with Elementor کلیک کنید. به گزینه Layout در قسمت تنظیمات سایت بروید.
- به تب Breakpoint در زیر منوی Layout بروید و از بین سه گزینه پیش فرض انتخاب کنید.
چگونه نقاط شکست Elementor را ویرایش کنیم؟
دستورالعمل های زیر را برای ویرایش نقاط شکست Elementor دنبال کنید:
- به داشبورد وردپرس خود بروید. روی Elementor Page یا Post Editor کلیک کنید.
- روی منوی همبرگر در سمت چپ بالای پانل کلیک کنید.
- روی تنظیمات سایت > چیدمان > نقاط شکست کلیک کنید. مقادیر را با توجه به هر دستگاه تغییر دهید.ذخیره تغییرات
- به Elementor > Tools > General Tab برگردید و روی Regenerate CSS کلیک کنید.
نقطه شکست موبایل در المنتور چیست؟
نقطه شکست تلفن همراه مقداری است که در آن چیدمان محتوای شما برای اندازه صفحه نمایش تلفن همراه کامل می شود. در Elementor، محدوده پیشفرض نقطه شکست تلفن همراه بر روی <767px تنظیم شده است.
با این حال، Elementor به شما امکان می دهد گزینه Mobile Extra را برای تنظیم مقادیر نقطه شکست سفارشی برای تلفن های همراه با صفحه نمایش بسیار بزرگ انتخاب کنید.
چگونه نقاط شکست سفارشی را اضافه کنیم؟
برای افزودن نقاط شکست سفارشی به سایت خود، باید ویژگی Additional Custom Breakpoints را در افزونه Elementor فعال کنید. برای فعال کردن این ویژگی مراحل زیر را دنبال کنید:
- به داشبورد وردپرس خود بروید. در منوی نوار کناری، روی Elementor کلیک کنید و به منوی تنظیمات بروید.
- در برگه تنظیمات به Experiments بروید. به پایین بروید تا به نقاط انفصال سفارشی اضافی بروید.
- وضعیت را به “فعال” تغییر دهید و تنظیمات خود را ذخیره کنید.
- به Elementor Editor برگردید و “Responsive mode” را از پنل بالا انتخاب کنید. در نوار بالا سمت چپ، نماد تنظیمات را انتخاب کنید. به تنظیمات سایت بروید. بر روی Breakpoints کلیک کنید و نقاط شکست سفارشی اضافی اضافه کنید.
نکته حرفه ای:
Elementor یک جریان آبشاری را برای نقاط شکست خود دنبال می کند. بنابراین اگر تغییرات را در نقاط شکست بزرگتر تنظیم کنید، متعاقباً پیکسل های نقاط شکست کوچکتر تغییر می کند. با این حال، برعکس امکان پذیر نیست.
نقاط شکست مشترک المنتور برای طراحی واکنشگرا
مقادیر حداکثر پهنای پیشفرض نقطه شکست در Elementor 767 پیکسل برای موبایل و 1024 پیکسل برای رایانههای لوحی است. با این حال، برخی از نقاط شکست استاندارد مورد استفاده توسط توسعه دهندگان برای وب سایت های واکنش گرا به شرح زیر است:
- موبایل: کمتر از 640 پیکسل. برای دستگاههایی با اندازه صفحهنمایش 4 تا 6.9 اینچ، مقادیر نقطه شکست بهینه برای حالت عمودی 320 پیکسل – 414 پیکسل و برای حالت افقی 568 – 812 پیکسل است.
- تبلت ها: 641 پیکسل – 1024 پیکسل. برای دستگاه هایی با اندازه صفحه نمایش 7 تا 10 اینچ، مقادیر نقطه شکست بهینه 768 پیکسل – 834 پیکسل برای حالت عمودی و 1024 پیکسل برای حالت افقی است.
- دستگاه های رومیزی، عریض: بالاتر از 1024 پیکسل.
جدای از این مقادیر، می توانید از چهار نقطه شکست سفارشی اضافی در Elementor نیز استفاده کنید تا به شما کمک کند طرح بندی محتوای خود را با طیف وسیع تری از اندازه های صفحه تطبیق دهید.
نقاط شکست اضافی به شما این امکان را می دهد که به سرعت بین تلفن های صفحه عریض و تلویزیون های هوشمند صفحه عریض جابجا شوید بدون اینکه بر سرعت یا پاسخگویی وب سایت تأثیر بگذارد.