تقديم Elementor 3.4: نقاط توقف مخصصة إضافية لتصميم بلا حدود

نشرت: 2021-08-17

لقد صممت للتو موقعًا رائعًا لعميلك ، لكنهم فجأة يريدون رؤيته على شاشة مكتبهم الكبيرة.

أنت تتساءل - كيف سيبدو موقع الويب الخاص بك على تلفزيون 70 بوصة 16: 9؟

حسنًا ، لا عجب بعد الآن! Elementor ظهرك.

تقديم نقاط توقف مخصصة إضافية!

01 ميزة

يمكنك الآن تخصيص تصميماتك لمزيد من شاشات الهاتف المحمول وشاشات الكمبيوتر اللوحي والكمبيوتر المحمول والأجهزة ذات الشاشات العريضة. يمكنك الآن الحصول على ستة نقاط توقف مخصصة للتلاعب بها ، مما يمنحك مزيدًا من التحكم وحرية الإنشاء لأي جهاز. دعنا نتعمق في هذه الميزة ونتعلم المزيد عنها وما يجعلها فريدة من نوعها.

تنبيه تحديث رئيسي! نوصي باستخدام ميزات جديدة في بيئات التدريج قبل تطبيقها على مواقع الإنتاج الحية ، ونسخ موقع الويب الخاص بك احتياطيًا قبل التحديث.

نقاط توقف إضافية

كسر حدود التصميم مع نقاط التوقف

للبدء ، دعنا نتأكد من أننا جميعًا على نفس الصفحة حول كيف تساعدك نقاط التوقف على تصميم مواقع ويب أفضل وأكثر استجابة. نقطة التوقف هي "نقطة" يستجيب عندها المحتوى لعرض الجهاز. يمنحك هذا القدرة على ضبط النمط لكل نقطة توقف لتقديم أفضل تجربة ممكنة للزائر.
02 نقاط توقف

ربما تكون قد وضعت معرضًا يضم ثلاث صور متتالية ولكنك تريد أن يرى الزوار على الهاتف المحمول صورتين فقط على التوالي. هذا هو المكان الذي تأتي فيه نقاط التوقف ، لأنها تسمح لك بتخصيص تخطيط موقع الويب الخاص بك اعتمادًا على الجهاز وحجم الشاشة.

يمنحك Elementor Core 3.4 القدرة على ضبط تخطيط التصميم وفقًا لسبعة أجهزة.

عند استخدام نقاط التوقف ، تتمتع بمرونة كاملة من أجل:

  • اختر نقاط التوقف النشطة. إلى جانب سطح المكتب والجوال والكمبيوتر اللوحي الأصلي ، يمكنك الآن إضافة نقاط التوقف لمزيد من أحجام الشاشة.
  • اختر قيمة كل نقطة توقف. أنت قادر على إدارة قيم كل نقطة على حدة.
  • مقياس المعاينة لأعلى أو لأسفل. التصغير لمعاينة الأجهزة ذات الشاشة العريضة. اعمل على شاشة أصغر من الشاشة التي تصمم من أجلها أثناء رؤية الصورة الأكبر.

كيفية التصميم لأجهزة مختلفة باستخدام نقاط التوقف

يستخدم Elementor مفهومًا متتاليًا عبر نقاط التوقف ، مما يؤدي إلى تقليص حجم كل جهاز باستثناء الشاشة العريضة. هناك طريقة سهلة لتذكر كيف تؤثر كل نقطة توقف على الآخرين وهي: سطح المكتب هو الخيار الافتراضي دائمًا.

سطح المكتب هو إعداد الشاشة الافتراضي الذي يؤثر على جميع نقاط التوقف الأخرى لكل من الشاشات الكبيرة والصغيرة.

مثال: تعيين عناوين مختلفة لكل نقطة توقف

لنلقِ نظرة على مثال بسيط لفهم كيفية عمله.

يمكنك تعيين العنوان الخاص بك بحجم نص 80 بكسل للإعداد الافتراضي لشاشة سطح المكتب. سيتم تطبيق حجم النص هذا على جميع نقاط التوقف الأخرى.

إذا انتقلت بعد ذلك إلى نقطة توقف الجهاز اللوحي وقمت بتعيين حجم العنوان على 60 بكسل ، فسيتم تطبيقه على جميع نقاط التوقف الأصغر ، بما في ذلك Mobile و Mobile-Extra.

لن يتم تطبيق النمط الذي قمت بتعيينه للجهاز اللوحي على نقاط التوقف الأكبر ، والتي تشمل في هذه الحالة الكمبيوتر المحمول والكمبيوتر اللوحي الإضافي. ستبقى نقاط التوقف الخاصة بهذه الأجهزة الأكبر حجمًا عند 80 بكسل ، مثل سطح المكتب.

تعرف بالضبط على الأنماط التي تقوم بتعيينها على نقاط التوقف الأخرى

مع كل نقطة توقف مخصصة إضافية تأتي ضرورة فهم ما يتم توريثه بالضبط من نقطة توقف إلى أخرى.

لهذا السبب أضفنا تحسينًا جديدًا لواجهة المستخدم يمكن أن يساعدك في التعرف على الأنماط الموروثة من نقاط التوقف الأخرى. لذلك ، قمت بتعيين الهامش على الجهاز اللوحي على 10 بكسل ، ثم انتقلت إلى عرض Mobile-Extra.

الآن يمكنك أن ترى أن القيم الموروثة في عناصر التحكم مثل المساحة المتروكة والهامش وصور الخلفية وكل عنصر تحكم رقمي يتم تقديمها كعناصر نائبة. في مثالنا ، ستظهر دقة 10 بكسل التي قمت بتعيينها على الجهاز اللوحي كعنصر نائب غير نشط على جميع الأجهزة الأصغر من الجهاز اللوحي.

معلومات سريعة! تذكر أنه يمكنك فقط تغيير النمط لكل نقطة توقف للقيم التي تحتوي على أيقونة الجهاز بجوار العنوان ، كما هو موضح في الصورة أدناه.

تحسين الأداء # 1

نقاط التوقف التي تخترق حد السرعة

لتحسين نقاط التوقف المخصصة قدر الإمكان ، أعدنا بناء آلية التحكم المتجاوبة في التحميل. أدى هذا إلى تحسين وقت استجابة الخادم بنسبة تصل إلى 23٪ (!) ، وتقليل استخدام الذاكرة بحوالي 5٪. لقد وفرنا أيضًا ما يقرب من 30٪ من حركة مرور البيانات في تحميل المحرر. بمعنى آخر ، جعلت كل شيء يعمل بشكل أسرع وأكثر سلاسة.

بفضل التحديثات التي وضعناها ، لن يكون لإضافة نقاط التوقف المخصصة تأثير كبير على الأداء ، على عكس الحلول الأخرى التي تستخدم رمزًا مكررًا لتحقيق ذلك. اقرأ المزيد عنها في منشور التطوير الخاص بنا.

تحسين الأداء # 2 & # 3

إسقاط دعم IE وتحسين تحميل Font Awesome

06 أي وفونت رائع
تم تقديم Elementor منذ 5 سنوات ، في الأيام التي احتاج فيها Internet Explorer والبدائل الأخرى إلى دعم مكثف ونسخ الكود من أجل تفسير التعليمات البرمجية الحديثة. في الوقت الحاضر ، يمكن لمتصفحات الويب تفسير هذه اللغة الحديثة محليًا ، دون الحاجة إلى شرح إضافي. لماذا هذا مهم؟ لقد مكننا من توفير ما يصل إلى 110 كيلوبايت عند تحميل كل صفحة ، مما يعني صفحات أسرع لك ولزوار موقعك. حصل Font Awesome على ترقية أيضًا! حتى الآن ، عند إضافة رمز من Font Awesome ، تم استخدام المكتبة بأكملها على موقع الويب. من خلال تغيير آلية تحميل الرمز إلى SVG ، نقوم بتقليل الطلبات وبالتالي تحسين الأداء ووقت التحميل عبر اللوحة. يتم ترجمة كل كيلوبايت مخفضة ، إلى تحميل أسرع للصفحة لكل صفحة تقوم بإنشائها في Elementor! لا تقلق ، سنواصل تقديم المزيد والمزيد من هذه التحسينات.

العنصر 3.4: اجعل كل شيء مستجيبًا مع نقاط التوقف المخصصة الإضافية لـ Elementor!

سقسقة

إصدار Elementor 3.4

نقاط توقف أفضل ، أداء أفضل

تجعل نقاط التوقف المخصصة الجديدة من السهل جدًا تكييف تصميماتك مع الشاشات المختلفة.

يواصل هذا الإصدار أيضًا تفانينا في تزويدك بالأدوات التي تقدم أفضل أداء في العالم ، مع ثلاثة تحسينات مختلفة للأداء.

سواء كنت ترغب في تخصيص تصميمك ليناسب بشكل أفضل أحدث iPhone (هل هو 13 بالفعل؟) ، تلفزيون بشاشة عريضة لعميلك ، أو أجهزة أفقية ، خذ الميزة الجديدة في جولة وأخبرنا برأيك في التعليقات أدناه.

احصل على موقع WP مستضاف على الفور
يتعلم أكثر
احصل على ملف
موقع الفسفور الابيض
فورا
يتعلم أكثر
انضم إلى مجتمع مصمم الويب العالمي
نضم الان
اشعر بروح المجتمع في مركزنا
نضم الان
تواصل مع Fellow Web Creators
البحث عن لقاءات