المقدمة: كيف تجعل موقعك متوافقاً مع الهاتف المحمول باستخدام Elementor ؟
سأبدأ على بركة الله ، بشرح كيفية تنشيط وضع إستجابة صفحات Elementor مع شاشات كل الأجهزة . ثم التطرق للإعدادات التي يمكننا التعديل فيها حتى تصبح صفحتها متوافقة مع شاشة المحمول، مع توضيح بعض التقنيات التي ستضبط صفحاتنا لتكون أكثر احترافية 🙂 .
فــهــرس:
- لماذا يجب أن تكون صفحات Elementor متوافقة مع الجوّال ؟
- كيفية إنشاء صفحات Elementor سريعة الاستجابة للجوال؟
- قم بتبديل محرر Elementor إلى Respive Mobile.
- تحسين أقسام، أعمدة، وودجات Elementor لتكون متجاوبة
- الإعدادات المتقدمة المتوافقة مع Elementor
- اختبار درجة استجابة الجوال لصفحاتك المصممة بإلمنتور.
- استنتاج
لماذا يجب أن تكون صفحات Elementor متوافقة مع الجوّال ؟
يعد امتلاك موقع ويب سريع الاستجابة ، بحيث يتكيف بشكل جيّد مع الكمبيوتر والجهاز اللوحي والهاتف الذكي أمراً مهماً وضرورياً لسببين:
عند إنشاء صفحات Elementor متوافقة مع الجوال ، يتم تنظيم جميع العناصر المكونة لهذه الصفحات مثل : الأقسام والأعمدة والودجات . وبما أن أكثر من 96% أصبحوا يتصلون بالانترنت عبر هواتفهم المحمولة.. فإن google أصبحت تقوم بفهرسة الصفحات التي تستجيب للجوال على وجه الخصوص . وإذا لم يكن هناك توافق ، فإن جوجل لا تقوم بتحسين موقعك في محركات البحث. 💡
لذلك، إذا كنت ترغب في بقاء زوارك على صفحاتك لمدة أطول ، فيجب أن تكون جميع معلومات المحتوى متاحة، وقابلة للظهور والقراءة بشكل جيّد على الهاتف المحمول.
وبالتالي، فإن الوصول إلى الصفحة الأولى من محرك البحث ، يستوجب أن تكون صفحات Elementor الخاصة بموقعك مستجيبة للجوّال ومتوافقة مع كل الشاشات.
الصفحة متوافقة مع الجوال
كيفية إنشاء صفحات Elementor سريعة الاستجابة للجوال؟
مع Elementor. ستكتشفون أن كل شيء بسيط للغاية، لأن الشركة المنتجة عملت على إدماج محرر الهاتف والجهاز اللوحي إلى جانب الكمبيوتر. مما سيسمح لك بإجراء إعدادات محددة على صفحاتك.
∴ وسيكون لدينا 3 عناصر يلزمنا ضبطها :
• إعدادات العنصر لإنشاء صفحات مستجيبة للجوّال:
لإنشاء صفحات Elementor سريعة الاستجابة للجوّال ، نستخدم بشكل أساسي ثلاث عناصر للصفحة:
- الهوامش الداخلية والخارجية لأقسام Elementor وأعمدته و كذا الودجات الممكنة .
- أحجام الخطوط والعناوين بأنواعها و كذا الأزرار .
- تنظيم الصفحة من خلال تغيير ترتيب الأعمدة أو إظهار العناصر حصرياً على جهاز واحد وإخفائها على أجهزة أخرى.
إذن ، سنقوم أولاً بالتحسين لشاشات الهواتف الذكية ، وإليكم صفحة Elementor التالية:
كيف تجعل موقعك متوافقاً مع الهاتف المحمول باستخدام Elementor
قم بتبديل محرر Elementor ليتناسب مع الجوال
∴ سنقوم بنقرة واحدة على أيقونة الاستجابة.
∴ في صفحة Elementor ، يكون العرض مخصصاً لجهاز الكمبيوتر (سطح المكتب) بشكل افتراضي. لذلك يبدو محرر Elementor كما يلي:
كيف تجعل موقعك متوافقاً مع الهاتف المحمول باستخدام Elementor
• اختيار وضع الإستجابة لمحرر Elementor
للحصول على طريقة عرض Elementor Responsive Mobile ، أنقر على الجزء السفلي الأيسر من أيقونة وضع الاستجابة كما هو مبين في الصورة 
:
اختيار أيقونة الاستجابة في المنتور
ومن القائمة التي ستظهر في الجزء العلوي من محرر Elementor ، إذ يمكنك تحديد نوع شاشة المحرر : الهاتف المحمول أو الجهاز اللوحي أو الكمبيوتر .
من خلال النقر على أيقونة الجوال ، سيتحول محرر Elementor إلى وضع الهاتف الذكي:
كيف تجعل موقعك متوافقاً مع الهاتف المحمول باستخدام Elementor
يمكنك القول أن هذا كل شيئ ، وتبدأ في تحرير صفحتك بمقاييس الهاتف 🙂 .
نعم ! يمكنك الآن التنقل بسرعة بين شاشات: الهاتف الذكي والجهاز اللوحي والحاسوب الآلي لعرض صفحات Elementor.
و بهذه الطريقة يمكنك ضبط حجم الشاشة بدقة حتى تتناسب مع الجهاز الذي تختار الاشتغال عليه .. لـــكــن! كيف ذلك؟
قبل البدء ، هناك أشياء عليك القيام بها :
• قم بتعيين نقطة القطع مستجيبة لإلمنتور
ما هي نقطة القطع ؟
نقطة القطع هي اللحظة التي تتحول فيها صفحتك من شاشة كمبيوتر إلى جهاز لوحي ثم شاشة الجوال.
عندما ينقص عرض الشاشة أو يزيد ، يعرض Elementor تلقائياً صفحتك وفقاً لنقطة القطع أو التحول .
∴ بشكل افتراضي ، تكون نقطة القطع جيّدة. ولكن إذا كنت تريد حقاً تغيير نقطة قطع صفحة Elementor لموقعك ، فانتقل إلى: أيقونة Hamburger المشار إليها بالرقم 1 في الصورة تحت . ثم إعدادات الموقع كما هو بين في الرقم 2 ثم النسق ، الرقم 3 وبعدها يمكنك تغيير نقط التحول التي تكون افتراضياً كما هو مبين في الصورة رقم 4.
• تحقق من أي جهاز تم إجراء الإعدادات، هل من:
هاتف محمول ، جهاز لوحي ، أم كمبيوتر ؟
لاحظ بعد ان نقرتَ على أيقونة الجوال، أنّـك كلما قُمْت بالنقر فوق عنصر ما ، فسترى رمزاً للجوال.
على سبيل المثال هنا إذا نقرت على العنوان والخطوط أو الصورة ، فإنك سترى بوضوح أيقونة الهاتف المحمول بجانب الحجم، ارتفاع النص وما إلى ذلك. وكذلك الصورة ستلاحط الأيقونة بجانب الأبعاد ويمكنك استخدمها بما يلزم ..
في هذه الحالة، فإن أيّ تغييرات تُجريها على هذه الإعدادات فهي ستؤثر فقط على إصدار الهاتف المحمول.
لذلك إذا كان هناك حجم محدد ، فسيتم تطبيق هذا الحجم فقط على إصدار الهاتف الذكي.
وبالتالي يمكنك إنشاء الأقسام والأعمدة والأدوات ( الودجات ) بشكل مستقل على إصدار Elementor Desktop و Elementor Responsive.
• الإعدادات وضبط Elementor الغير المستجيب ” Elementor non responsive ” .
يرجى ملاحظة أن بعض الإعدادات لا تحتوي على أيقونة الهاتف التي ترمز إلى التوافق مع جهاز الجوال.
إذا قمت بتغيير أي إعداد ، فسيؤثر ذلك على الهاتف المحمول وكذلك على الجهاز اللوحي وإصدار سطح المكتب من صفحة Elementor لموقعك.
ما العمل في حال كانت هذه الاعدادات مثل : الوزن أو التحويل أو النمط في الطباعة لا يستجيب لكل الشاشات ؟
صراحةً! في هذه الحالة، لا يجب أن تهتم كثيراً لأن ذلك يعني أنها متطابقة مع كل الأجهزة من كمبيوتر و جهاز لوحي و كذا الهاتف الذكي، لذلك كان وضعها افتراضياً ولا يلزمك تغييرها.
إذن، إنتبه دائماً إلى هذا الأمر حين تريد التغيير في إعدادات Elementor ، إذ من الفهم الجيّد أن تعرف نوع الصفحة التي تريد تحريرها وتدقق في عناصرها.
وصلنا إلى المرحلة الأهم ..
إليك كيفية تمرير المحرر للحصول على عرض Elementor سريع الاستجابة للجوال.
وإليك أيضاً كيفية التأكد من أننا نقوم بإنشاء عناصر لشاشات الهواتف الذكية فقط (دون تعديل إصدار الكمبيوتر من صفحة Elementor التي نشتغل عليها).
كفانا من كثرة اللغط ! ودعنا نتعمق في لب الموضوع:
كيف نقوم بتحسين صفحتنا التي تم إنشاؤها باستخدام Elementor builder كي تظهر بشكل مثالي على شاشات الهواتف الذكية.
تحسين أقسام، أعمدة، وودجات Elementor لتكون متجاوبة
• تحسين أقسام Elementor لتتجاوب مع شاشة الجوال
هنا كل الأمور تجري بسهولة ويُسر! و ستتمنى لو أنك تعلمت هذا الأمر من زمان ! لكن لا بأس كل شيء بوقته أفضل :
≡ في ترتيب الأولويات ، نبدأ بالعنصر الأكبر ثم ننتقل إلى الأصغر فالأصغر.
بهذا الترتيب ، سنعمل على تحسين الهواتف الذكية والأجهزة اللوحية ..
↵ نبدأ بأقســـام إلمنتــور ، ثم الأعمـــدة ثم الــودجات.
لماذا هذا الترتيب ؟
يتيح احترام هذا الترتيب الحصول على نتائج أكثر سلاسة وأسرع استجابة للأجهزة المحمولة على صفحات Elementor الخاصة بموقعنا. وهي تقنية بسيطة للغاية.
نأخذ كل قسم من صفحتنا ونُحَسِّنُه بالترتيب التالي:
- • هوامش القسم
- · هوامش العمود
- • هوامش وإعدادات الودجات
فقط هذا ما عليك القيام به للوصول إلى نتائج ممتازة بسرعة وبدون أخطاء.
• تحسين هوامش الأقسام:
على مستوى القسم ، سنلعب بشكل عام على الهامش.
لذلك نضغط على القسم وفي نافذة « تحرير قسم » نختار علامة التبويب متقدم ثم نذهب إلى تعديل الهوامش ، وأول ما نقوم به هنا هو إلغاء ربط القيم: (يجب أن تكون أيقونة السلسلة بيضاء كما في الصورة أدناه):
سيتيح لنا ذلك تحقيق شيئين:
إمكانية إزالة الهوامش العلوية والسفلية تلقائياً من أقسامنا (في معظم الحالات يكون هذا كافياً للحصول على عرض رائع على الهاتف المحمول).
إمكانية ضبط الهوامش العلوية أو السفلية بشكل مستقل عن بعضها البعض ، وبالتالي إجراء تعديلات أكثر دقة على الشاشات الصغيرة.
• تحسين الهوامش الداخلية لأقسام Elementor
∴ هنا نفعل الشيء نفسه بالنسبة للهوامش الداخلية لأقسام Elementor.
نقوم بضبط الهوامش والتعديل عليها حسب ما يقتضيه العنصر المعروض.
بشكل عام على الهاتف المحمول ، سنضع ما لا يقل عن 15 بكسل في الهامش الداخلي على اليسار واليمين.
إنه سلوك جيّد وعمل مهم لتجنب التصاق أي عنصر بحافتي الشاشة .
كيف تجعل موقعك متوافقاً مع الهاتف المحمول باستخدام Elementor
∴ إلى هنا نكون قد قمنا بتحسين القسم في إلمنتور .
في حين ستلاحظ ظهور حالة غير مرغوب فيها فيما يخص العنوان. إنه يتمدد على اليمين وقد يكون ملتصقاً أو خارج هامش القسم ، وهذا مشكل يجب معالجته.
طبعاً لن نترك الأمر هكذا، سنقوم بتحسينه عند ضبط استجابة الودجات مع جهاز الهاتف الذكي .
إذن دعنا ننتقل إلى الأعمدة أولاً ، لأن الخطوات مازالت مستمرة.
• تحسين أعمدة Elementor لتتجاوب مع شاشة الجوال
بالنسبة للأعمدة ، سنفعل الشيء نفسه ، لأن الخطوات متشابهة . وسنقوم بتعديل الهوامش.
كل مرة ، علينا أن نقوم بفك قيود الهوامش الداخلية والخارجية:
ثم بشكل عام نقوم بتصفير جميع الهوامش أي نجعل القِيَـم تساوي صفر. ثم نقوم بإجراء التعديلات على الهوامش الداخلية فقط.
وبالتالي سنكون قادرين على ضبط الشاشة بدقة متناهية لعرض الهاتف الذكي كما ترى في الصورة :
كما ترى ، فإن العمل على الهوامش الداخلية فقط ، سيمكننا من تبسيط إعدادات صفحات Elementor وتحقيق نتائج مبهرة .
إذا كنا نريد تحسين استجابة صفحاتنا Elementor للجوّال ، فسنعرف بالضبط الإعدادات التي يجب إجراؤها.
∴ الآن بعد أن تم تحسين الأقسام والأعمدة ، بقي لنا أن ننتقل إلى الودجات.
• تحسين ودجات Elementor لتتجاوب مع شاشة الجوال
على مستوى الودجات ، سيتعين علينا بشكل عام ضبط الهوامش و الحجم.
∴ تحقق من توافق هوامش الجوال مع ودجات Elementor
تذكر دائماً أنه ينبغي عليك تفكيك قيود الهوامش تماماً كما فعلنا في السّابق وضبطها على الصفر.
وبالفعل ، تم ضبط الهوامش على مستوى الأقسام والأعمدة ، وسنرى ما يمكن فعله مع الودجات أيضاً.
إذا لم يكن العرض المتجاوب للأجهزة المحمولة جيداً بعد إزالة هوامش الودجات ( ضبطها على الصفر ) ، فما عليك سوى ضبط الهوامش الداخلية لعمود Elementor مرة أخرى:
∴ ضبط حجم الودجات المستجيب للأجهزة المحمولة
إذن لم بيقى لنا سوى تعيين حجم الودجات المستجيب للجوال.
على سبيل المثال ، إذا كنت أريد العنوان في سطر واحد كما هو الحال بالنسبة للكمبيوتر ، فيمكننا ضبط حجم الخط وتصغيره ليكون متوافقاً مع الشاشات الصغيرة:
ما فعلناه كان للعنوان و ما علينا سوى أن نقوم بنفس الشيئ بالنسبة لحجم الصورة مثلاً.
إلى هنا نكون قد انتهينا من تحسين القسم الأول من Elementor بالكامل ليتوافق مع الأجهزة المحمولة .
الآن جاء دورك لتكرار العملية باستمرار بَدْءاً من الأقسام ثم الأعمدة وبعدها الودجات أو الأدوات. وذلك بغية تحقيق توافق صفحات موقعك المصممة ببرنامج Elementor مع الأجهزة ذات الشاشات الصغيرة مثل الهاتف الذكي أو الأجهزة اللوحية.
لنرى الآن الحالات الخاصة من خلال الإعدادات المتقدمة.
الإعدادات المتقدمة المتوافقة مع Elementor
في بعض الحالات الخاصة ، سيتعين عليك إجراء إعدادات متجاوبة أكثر تقدماً على صفحات Elementor الخاصة بموقعك.
وستساعدك بعض التقنيات على فعل ذلك بالضبط.
الآن دعنا نرى هذه الاجراءت من خلال 3 نقاط مفيدة للغاية ، كيف تعمل على :
- قم بعكس ترتيب الأعمدة على الهاتف الذكي أو الجهاز اللوحي
- قم بعمل عدة أعمدة (مزدوجة أو ثلاثية) على الهاتف المحمول
- إعمل بالنسب المئوية بدلاً من وحدات البكسل للحصول على استجابة مثالية
» ترتيب العمود العكسي على الهاتف المحمول أو الجهاز اللوحي
ستجد هذه الفقرة مفيدة للغاية ركز معي بعناية.
في حالة ما إذا كان لدينا 3 أعمدة على جهاز الكمبيوتر كما هو مبين في الصورة :
كما تلاحظ ، فإن لدينا صورتان وعنوان .
إذا وضعنا العنوان على اليمين فيمكن أن يظهر بشكل جيد على الكمبيوتر. لكنه سيصبح غير متسق إذا تصفحنا هذه الصفحة من خلال الهاتف الذكي، لأنها ستظهر أسفل الصورتين.
إذن سيقدم لنا Elementor ترتيب الأعمدة بشكل عكسي على الهاتف المحمول. وهذا طبعاً ما نريده حتى تكون صفحتنا متوافقة مع الأجهزة المحمولة.
للقيام بذلك ، ما عليك سوى النقر فوق القسم الذي يحتوي على الأعمدة الخاصة بموقعك وفي التبويب « متقدم » إختر « متجاوب» ثم قم بتنشيط عكس ترتيب الأعمدة (الجوال) :
هذه هي الطريقة التي نعكس بها ترتيب الأعمدة عندما تصبح شاشة الهاتف الذكي غير متسقة.
دعنا ننتقل إلى التقنية الثالثة وهي مطلوبة بإلحاح لدي أغلب المستخدمين.
» قم بعمل أعمدة مزدوجة على الهاتف المحمول:
هذه التقنية هي التي ستتيح لك الحصول على صفحات Elementor جميلة حقاً على الهاتف المحمول.
_ على جهاز الكمبيوتر ، يمكنك محاذاة الأعمدة بجانب بعضها البعض :
ولكن في عرض الهاتف الذكي ، سوف لن تشاهد نفس الشيء، بل سيتم عرض الأعمدة تلقائياً واحدة أسفل الأخرى:
إذن كيف تحتفظ بعمودين أيضاً إذا تصفحت موقعك من خلال الهاتف المحمول؟
للاحتفاظ بعمودين على الهاتف المحمول ، ما عليك سوى النقر فوق العمود الأول ثم علامة تبويب التخطيط أو النسق ثم عرض العمود ضع 50٪ :
وللقيام بنفس الشيء في العمود الثاني وبشكل تلقائي ، ستتم محاذاة أعمدة إلمنتور بجوار بعضها البعض في طريقة عرض الجوال :
صراحة، يكون العرض المستجيب للأجهزة المحمولة أكثر جمالًا مع العمود المزدوج. وستبدو صفحة Elementor على المحمول أفضل بكثير الآن.
وصلنا إلى التقنية الأخيرة التي ستوفر الكثير من الوقت.
» العمل بالنسب المئوية بدلاً من وحدات البكسل:
على شكل هذا المثال، سيظهر لنا قسم على الكمبيوتر بهوامش خارجية وداخلية بالبكسل ⇓ :
يعتبر العرض مثالياً على الكمبيوتر ولكن عند التبديل إلى الهاتف الذكي ، فإن المظهر سيختلف ، وستعمل هوامش البكسل على تشويه عرض القسم والكتابة فوق المحتوى.
كما رأينا سابقاً ، يمكننا ببساطة تحديد العمود وتعيين الهوامش الداخلية للجوال فقط.
ومع ذلك ، هناك أسلوب أبسط لإنشاء صفحات مستجيبة للجوال والكمبيوتر اللوحي في Elementor بدون إعدادات إضافية:
وهي استخدم الهوامش بالنسبة المئوية بدلاً من وحدات البكسل ، من خلال النقر فوق علامة ٪ :
الطريقة بسيطة للغاية، نعود إلى عرض الكمبيوتر المتجاوب . وفي التبويب « متقدم » نذهب إلى ركن الهوامش حيث نضغط على أيقونة ٪ و على هذا الأساس نكون قد قمنا بتعيين هوامشنا بواسطة النسبة المئوية:
كيف تجعل موقعك متوافقاً مع الهاتف المحمول باستخدام Elementor
وعندما تعود إلى الهاتف المحمول ، فستجد أنّ الهوامش التي تكون بالنسب المئوية قد تكيّفت تلقائياً مع حجم الشاشة.
وبالتالي ، فإن في أغلب الأحوال ، سيكون العرض مثالياً في الاستجابة على الجهاز اللوحي والهاتف الذكي دون أي إعدادات إضافية:
سيكون الأمر جيّداً لو أعملنا ذكاءنا في تطبيق ما جاء في المقالة .
لأنك ستكتشف أنَّ العمل على صفحات Elementor بهوامش النسبة المئوية سيوفر لك الكثير من الوقت ويضمن أن تقدم صفحاتك عرضاً مثالياً بشكل مميز بغض النظر عن حجم الشاشة التي سيستخدمه زائر موقعك.
اختبار درجة استجابة الجوال لصفحاتك المصممة بإلمنتور.
أظنك الآن قد قمت بكل التحسينات لصفحاتك Elementor على الهواتف الذكية ، ويمكنك فعل نفس الشيئ على الأجهزة اللوحية (عادةً ما تكون هذه الأخيرة أقل تعقيداً بكثير) . وبتنفيذ هذا التحسين الذي أدرجنا مراحله سالفاً ، سنكون قد حصلنا على موقع ويب مستجيباً للهاتف المحمول بالكامل. 🙂
الرسم التخطيطي من موقع Google
∴ نظراً لأهمية توافق مواقع الويب مع أجهزة الجوال، فإن Google أعدّت برمجة خاصة لاختبار التوافق مع الأجهزة المحمولة.
أداة Google لاختيار توافق مواقع الويب مع الأجهزة المحمولة
فقط أدخل عنوان url لصفحة موقعك التي قمت بتحسينها لاختبارها ، ثم أنقر على زر TESTER L’URL لتشاهد النتيجة مثل
خلاف ذلك ، أنصحك بإعادة قراءة المقالة وتتبع الخطوات بتركيز تام لتحسين الخطأ بشكل أفضل.
استنتاج
هـا أنت قد اكتشفت معي أن Elementor يمنحنا جميع الأدوات التي تساعدنا على تحسين صفحات الهاتف المحمول والجهاز اللوحي لتصبح سريعة الاستجابة.
شيء واحد يجب تذكره:
إذا كنت مغرماً بإلمنتور وتقضي بعض الوقت في تحسين صفحات Elementor الخاصة بموقعك لتكون متوافقة مع الجوال ، فإنك ستستمتع حقاً حين تصل إلى نتائج مبهرة .. وحتماً لن تتوقف لأنك ستكتشف الكثير والكثر، وهذا ما سيجعل موقعك مثيراً للإعجاب وبالتالي سيجلب زيادة حركة المرور بموقعك وتطور نسبة مبيعاتك .
في أمان الله
Elementor هو مكون إضافي مجاني لبناء الصفحات لبرنامج WordPress. وظيفتها الأساسية هي السماح لك بإنشاء صفحاتك بالسحب والإفلات. و هذا يبسط مهمتك في إنشاء صفحات مميزة لموقعك.
يمكنك اختيار قالب موجود أو إنشاء صفحتك بنفسك ، فالأداة Elementor توفر لك عناصر يمكنك وضعها في أي مكان تريده. دزن أن تكون لك معرفة بالمبرمجة .. تابعنا في سلسلة تعلم Elementor.
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.