1.5الاستجابة: الجوّال واللوحي
الأساسي في 30 ثانية
- الاستجابة = تتكيّف الصفحة مع حجم الشاشة (حاسوب، لوحي، جوّال).
- لدى Elementor معاينة حسب الجهاز: يُضبَط حسب نقطة التوقّف (حاسوب / لوحي / جوّال) دون كسر الباقي.
- يمكن إخفاء/إظهار عنصر حسب الجهاز وضبط الأحجام، التباعدات، الترتيب.
الخيط الناظم — نادية تختبر على الهاتف
على الحاسوب، الصفحة الرئيسية للنجّار مثالية. على هاتف نادية، يفيض الشريط وتتكدّس الأعمال الثلاثة. تكتشف معاينة الجوّال: تُصغّر العناوين، تُكدّس البطاقات، وتُخفي عنصرًا زخرفيًا لا يفيد على الشاشة الصغيرة. يصير الموقع مقروءًا في كل مكان.
الخطوة الأخيرة من المستوى 1 — موقع لا يعمل على الجوّال لا يعمل.
1. المعاينة ونقاط التوقّف
يُقدّم Elementor معاينة استجابة: شريط للتبديل بين حاسوب ولوحي وجوّال. الإعدادات المصنوعة في وضع تنطبق على تلك نقطة التوقّف (والأصغر) دون كسر الباقي: يمكن تصغير حجم عنوان فقط على الجوّال.
تُبدّل نادية إلى وضع الجوّال وتضبط: يتحوّل الشريط إلى عمود (بفضل wrap في 1.1)، تصغر العناوين، تضيق الـ paddings. تُريها المعاينة النتيجة الحقيقية.
2. إخفاء، إعادة ترتيب، اختبار
في تبويب المتقدّم ← الاستجابة، يمكن إخفاء/إظهار عنصر حسب الجهاز (مثلًا إخفاء صورة زخرفية كبيرة على الجوّال) وأحيانًا تغيير ترتيب العناصر. ويُضبَط أيضًا الأحجام والتباعدات حسب الجهاز.
القاعدة الذهبية: اختبرْ فعلًا على هاتف، لا في المعاينة فقط. موقع غير مستجيب يخسر غالبية الزوّار، الذين يأتون غالبًا من الجوّال.
🔎 مثال ملموس — جعل الصفحة الرئيسية مقروءة على الجوّال (حالة نادية)
وضع الجوّال (معاينة):
- الشريط: يتحوّل إلى عمود (wrap)، زر بعرض كامل
- العناوين: حجم مُصغَّر
- الأعمال الثلاثة: مكدّسة (عمود واحد)
- صورة زخرفية: مُخفاة على الجوّال
→ ثم اختبرْ على هاتف حقيقي.النتيجة: موقع مقروء على كل الشاشات.
الدرس: اضبط حسب الجهاز + اختبرْ فعلًا.
مفردات القسم
- الاستجابة
- قدرة صفحة على التكيّف مع حجم الشاشة.
مثال بسيط: يتحوّل الشريط إلى عمود على الجوّال.
ما ليس كذلك: صفحة جامدة تفيض على الشاشة الصغيرة.
رد فعل: فكّر بالجوّال منذ التصميم.
- نقطة التوقّف (breakpoint)
- عتبة الشاشة (حاسوب، لوحي، جوّال) التي تُطبَّق عندها إعدادات محدّدة.
مثال بسيط: تصغير حجم العناوين على الجوّال فقط.
ما ليس كذلك: ظنّ أن إعداد جوّال يُغيّر الحاسوب أيضًا.
رد فعل: الضبط في الوضع = ضبط تلك نقطة التوقّف (والأصغر).
- المعاينة حسب الجهاز
- التبديل حاسوب/لوحي/جوّال لرؤية النتيجة وضبطها حسب الشاشة.
مثال بسيط: تُبدّل نادية إلى الجوّال لضبط الشريط.
ما ليس كذلك: الحكم على شاشة الحاسوب فقط.
رد فعل: تحقّق دائمًا من المعاينات الثلاث.
- إخفاء / إعادة ترتيب
- إظهار أو إخفاء عنصر حسب الجهاز، وأحيانًا تغيير ترتيبه.
مثال بسيط: إخفاء صورة زخرفية كبيرة على الجوّال.
ما ليس كذلك: الإبقاء على الجوّال عناصر ثقيلة وغير مفيدة.
رد فعل: على الجوّال، أبقِ الجوهريّ.
- الاختبار الفعليّ
- التحقّق من النتيجة على هاتف حقيقي، لا في المعاينة فقط.
مثال بسيط: تفتح نادية الموقع على هاتفها قبل التسليم.
ما ليس كذلك: التسليم دون اختبار على الجوّال أبدًا.
رد فعل: قبل التسليم، افتح على جوّال حقيقي.
في التطبيق — تكييف صفحة مع الجوّال
- بدّل المعاينة إلى وضع الجوّال.
- صغّر أحجام العناوين وضيّق الـ paddings للجوّال.
- تحقّق من أن الكتل تتكدّس (wrap) وأخفِ غير المفيد على الشاشة الصغيرة.
- اختبر الصفحة على هاتف حقيقي قبل التحقّق.
نصّ جاهز للقول — طمأنة الزبون بشأن الجوّال (20 ث)
«معظم زبائنك سيجدونك من هاتفهم. لذا كيّفتُ الموقع للجوّال: نصوص مقروءة، زر اتصال ظاهر جيدًا، صور مُخفّفة. اختبرتُه على هاتف حقيقي، لا على الحاسوب فقط، لأتأكّد أن كل شيء واضح.»
أبرِز الجوّال كأولوية تجارية.
قالب للنسخ واللصق — تحقّق الاستجابة
معاينة الجوّال: عناوين مُصغَّرة؟ paddings مُضيَّقة؟
الكتل: تتكدّس جيدًا (wrap)؟
عناصر مُخفاة على الجوّال (غير مفيدة): _______________
الأزرار: كبيرة كفاية، مقروءة بالإبهام؟
اختبار على هاتف حقيقي: تمّ / للإنجاز
اللوحي مُتحقَّق منه: نعم / لاالجوّال أولًا
صمّم للجوّال أولًا، ثم وسّع: يتجنّب المفاجآت السيّئة.
زر اتصال
على الجوّال، زر «tel:» ظاهر جيدًا: تواصل بنقرة.
الصور
خفّف وربّما أخفِ الصور الزخرفية على الجوّال (الأداء).
اللوحي
لا تنسَ اللوحي: غالبًا بين الاثنين، يُتحقَّق منه أيضًا.
✓ ممارسات جيدة
- اضبط حسب نقطة التوقّف (جوّال دون كسر الحاسوب).
- أخفِ غير المفيد على الشاشة الصغيرة.
- اختبرْ على هاتف حقيقي قبل التسليم.
✗ أخطاء شائعة
- الحكم على شاشة الحاسوب فقط.
- ترك الشريط يفيض على الجوّال.
- الإبقاء على صور ثقيلة/غير مفيدة على الجوّال.
النقاط الأساسية
- الاستجابة = تتكيّف الصفحة مع الشاشة.
- اضبط حسب نقطة التوقّف (حاسوب/لوحي/جوّال).
- إخفاء/إعادة ترتيب حسب الجهاز.
- اختبرْ فعلًا على هاتف.
تحدّي 48 ساعة — طبّق غدًا
خذ صفحة، انتقل إلى معاينة الجوّال، صغّر العناوين، تحقّق من تكدّس الكتل، أخفِ عنصرًا غير مفيد، ثم افتح الصفحة على هاتفك. سجّل عيبًا صحّحته. 20 دقيقة.
- أضبط العرض حسب نقطة التوقّف.
- أُخفي غير المفيد على الجوّال.
- أختبر على هاتف حقيقي قبل التسليم.
أسئلة شائعة
هل يُغيّر إعدادُ جوّالٍ الحاسوبَ أيضًا؟
لا: إعداد مصنوع في وضع الجوّال ينطبق على الجوّال (والشاشات الأصغر) دون تعديل الحاسوب. هذا كلّ فائدة نقاط التوقّف.
هل يمكنني إخفاء عنصر على الجوّال؟
نعم: في المتقدّم ← الاستجابة، يمكن إخفاء/إظهار عنصر حسب الجهاز. مفيد لتخفيف الجوّال (صور زخرفية، كتل ثانوية).
هل تكفي المعاينة للتحقّق من الجوّال؟
تساعد، لكن يجب دائمًا الاختبار على هاتف حقيقي: أحجام الخطّ، أزرار قابلة للنقر بالإبهام، سرعة تحميل حقيقية.
الصفحة الرئيسية مثالية على الحاسوب لكن الشريط يفيض على الجوّال. ما ردّة الفعل الصحيحة؟