كل ما تحتاج لمعرفته حول نقاط التوقف القابلة للتخصيص لـ Divi 5

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

في هذا المنشور ، سنقوم بتغطية كل ما تحتاج لمعرفته حول هذه الميزة الجديدة ونظهر لك كيفية استخدامها!

تحقق من الفيديو التالي لمشاهدة الميزة الجديدة في العمل.

قم بتنزيل Divi 5 مع نقاط التوقف القابلة للتخصيص

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

هل يمكنني استخدام Divi 5 على موقع الويب الخاص بي بالفعل؟

يمكنك استخدام Divi 5 على موقع الويب الخاص بك ، لكن توفره يعتمد على حالة الاستخدام المحددة. يقع Divi 5 حاليًا في مرحلة Alpha العامة ، مما يعني أنه لا يزال يتم تطويره وتحسينه بنشاط. على الرغم من أنه لم ينصح به بعد لجميع بيئات الإنتاج ، إلا أن هناك سيناريوهات محددة حيث يمكنك البدء في استخدامه بدون مشاكل.

استخدم Divi 5 على المواقع المحلية والمسترة

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

يمكنك استخدام Divi 5 بأمان على مواقع الإنتاج الجديدة

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

فهم نقاط التوقف القابلة للتخصيص لـ Divi

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

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

ما هي نقطة توقف؟

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

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

مع إدخال المزيد من نقاط التوقف في Divi 5 ، يمكنك الحد من الحاجة إلى استعلامات الوسائط CSS لتحديد نقاط التوقف للأجهزة الأخرى.

كم عدد نقاط التوقف التي يجب أن أستخدمها؟

يعتمد عدد نقاط التوقف على استخدام جهاز جمهورك. يقوم المستخدمون بالوصول إلى مواقع الويب على أحجام شاشة مختلفة ، من الهواتف الذكية الصغيرة إلى شاشات سطح المكتب على نطاق واسع. تقليديا ، استخدم مصممو الويب ثلاث نقاط توقف قياسية - سطح المكتب ، الجهاز اللوحي ، والهاتف المحمول - لكن Divi 5 يوسع هذه الإمكانية ، مما يتيح ما يصل إلى 7 نقاط توقف قابلة للتخصيص لمزيد من المرونة.

هل سيمكّن المزيد من نقاط التوقف عن إبطاء موقعي؟

لا ، إن تمكين المزيد من نقاط التوقف في Divi 5 لن يبطئ مواقع الويب الخاصة بك. على عكس الطرق الأقدم للتعامل مع التصميم المستجيب ، تم تحسين إطار Divi 5 الجديد للأداء ، مما يضمن عدم إضافة نقاط توقف إضافية إلى موقع غير ضروري إلى موقعك.

هل تم تمكين نقاط التوقف على موقع ويب أو مستوى الصفحة؟

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

كيف تعمل نقاط التوقف القابلة للتخصيص في Divi

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

أين تجد نقاط التوقف

في Divi 5 ، يتم دمج نقاط التوقف في إعدادات صفحتك ، مما يجعلها سهلة تحديد موقعها وتخصيصها. يمكنك الوصول إليها مباشرة داخل البناء المرئي ، مما يضمن سير عمل مبسط.

كيفية تمكين نقاط التوقف

افتح الصفحة التي تريد تحريرها وتفعيلها في البناء المرئي عن طريق النقر فوق تحرير مع Divi .

انقر فوق قائمة Ellipsis (ثلاث نقاط) الموجودة في شريط المهام الرئيسي للبناء المرئي.

داخل الإعدادات ، ستجد سلسلة من مفاتيح التبديل التي تسمح لك بتمكين نقاط التوقف أو تعطيلها حسب الحاجة.

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

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

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

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

باستخدام نقاط التوقف المخصصة في Divi 5

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

لحسن الحظ ، يجعل Divi 5 من السهل للغاية تخصيص نقاط التوقف المستجيبة هذه مع بضع نقرات.

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

سوف يعلمك Divi 5 أنك على وشك ضبط نقاط توقف موقع الويب الخاص بك. انقر فوق زر التحديث لتأكيد التغيير.

سنضيف نقاط التوقف التالية لأحجام الشاشة المتبقية:

تغطي نقاط التوقف هذه مجموعة من الأجهزة للتأكد من أن موقع الويب الخاص بك يغطي معظم أحجام الشاشة وحالات الاستخدام:

• الهاتف: يغطي 767 بكسل معظم أحجام شاشة الهواتف الذكية ، بما في ذلك الطرز القديمة مثل iPhone 8 أو Samsung G7.
• الهاتف على نطاق واسع: يغطي 860 بكسل معظم شاشات الهاتف في وضع المناظر الطبيعية ، بما في ذلك أجهزة iPhone 14 Pro (وما فوق) وأجهزة Android الحديثة.
• الجهاز اللوحي: 980 بكسل جيد بالنسبة لمعظم شاشات الكمبيوتر اللوحي في وضع الصورة ، بما في ذلك جميع أجهزة iPad.
• جهاز الكمبيوتر اللوحي: 1024px هو قياسي لعرض المناظر الطبيعية في معظم أجهزة iPad و Samsung.
• الشاشة العريضة: 1280 بكسل هو عرض جيد لمعظم أجهزة الكمبيوتر المحمولة الأصغر (Windows أو MacOS) ، بما في ذلك أجهزة MacBook Air و MacBook Pro 13 ″ وأجهزة Windows قابلة للمقارنة.
• Ultrawide: يغطي 2560 بكسل شاشات سطح مكتب أكبر ، مثل أجهزة الكمبيوتر المحمولة MacBook Pro 15 ″ و 16 ″ ، IMACs ، وشاشات عالية الدقة.

تخصيص تصميمك المستجيب داخل الإعدادات المسبقة

واحدة من أقوى جوانب Divi 5 هي كيف تتكامل نقاط التوقف القابلة للتخصيص بسلاسة مع الإعدادات المسبقة. يتيح لك ذلك إنشاء تصميم مستجيب حقًا عبر موقع الويب الخاص بك بأكمله بأقل جهد. مثال مثالي هو تعديل الإعداد المسبق لـ H1 لموقع بداية لضمان أن جميع H1s تبدو مثالية في كل حجم شاشة.

ابدأ بالنقر في أي مكان داخل H1 في قسم Hero لإظهار إعداداته.

بعد ذلك ، انقر فوق حقل الإعداد المسبق في رأس الوحدة النمطية.

ستظهر قائمة مسبق. حدد موقع الإعداد المسبق الذي يحتوي على علامة فحص زرقاء بجوارها.

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

انقر فوق علامة تبويب التصميم ثم اضبط حجم نص العنوان إلى الحجم المطلوب.

احتفظ بإعدادات الإعدادات المسبقة مفتوحة وانقر فوق حجم الشاشة التالي في شريط المهام Divi 5 لضبط حجم العنوان.

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

عندما تقوم بتبديل نقاط التوقف ، ستعكس تغييرات الحجم في الإعداد المسبق.

التحرير المستجيب في Divi 4 مقابل Divi 5

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

انتقال دون عناء بين نقاط التوقف

في Divi 4 ، يعد التبديل بين نقاط التوقف واضحًا إلى حد ما ولكنه يتضمن المزيد من الوقت وليس سلسًا مثل الانتقال الذي يمكنك العثور عليه في Divi 5.

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

من 3 إلى 7 نقاط توقف

Divi 4 يدعم 3 نقاط توقف مختلفة ؛ هذه يمكن العثور عليها في Divi 5 كذلك.

• سطح المكتب: 981px وما فوق
• الجهاز اللوحي: <980px
• الهاتف المحمول: <767px

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

عالج Divi 5 هذا القيد من خلال توسيع عدد نقاط التوقف إلى 7 خيارات قابلة للتخصيص ، مما يجعل من السهل استهداف عدد أكبر من الأجهزة.

• الهاتف: <767px
• هاتف واسع: < 860 بكسل
• الجهاز اللوحي: <980px
• قرص واسع: < 1024px
• سطح المكتب: > 981px
• شاشة عريضة: > 1280 بكسل
• عريض للغاية: > 1440 بكسل

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

تحجيم قماش للتحكم الكامل

واحدة من أكثر الميزات الجديدة إثارة في Divi 5 هي تحجيم القماش ، مما يمنح المصممين تحكمًا غير مسبوق في كيفية ظهور موقع الويب الخاص بهم في قرارات مختلفة.

هذا ما يبدو عليه تحجيم القماش في Divi 4:

ميزة Divi 5's Canvas Rescaling تجعل التجربة بأكملها أكثر سهولة. مع بضع نقرات فقط ، يمكنك توسيع نطاق تصميم قماش التصميم لمطابقة قرارات الشاشة المحددة ، مما يوضح بالضبط كيف سيظهر موقعك على أجهزة مختلفة. هذه الميزة مفيدة لاختبار شاشات الهاتف المحمول الأصغر أو شاشات سطح المكتب على نطاق واسع ، مما يضمن أن التصميم الخاص بك لا تشوبه شائبة-اللوحة.

يتم تضمين Divi 5 إلى الأبد في عضوية Divi Lifetime الخاصة بك

تمكن نقاط التوقف القابلة للتخصيص من Divi 5 من إنشاء مواقع ويب مستجيبة بدقة أكبر. سواء كنت تقوم بتحسين تخطيط موجود أو إنشاء موقع من نقطة الصفر ، فإن هذه الأدوات الجديدة تمنحك المرونة لصياغة تجارب Pixel-Pixel لكل حجم شاشة.

أحد أفضل أجزاء Divi 5 هو أنه سيتم تضمينه إلى الأبد في عضوية Divi (دون أي تكلفة إضافية). إذا قمت بالترقية إلى عضوية Divi مدى الحياة اليوم ، فستتمكن من الوصول (والتحديثات) إلى Divi 5 مقابل رسوم لمرة واحدة والاستفادة من هذا المنتج المتطور لسنوات قادمة.