اجعل موقع Elementor الخاص بك أكثر استجابة للجوال

يعد موقع الويب المستجيب للجوال جزءًا حيويًا من أي عمل تجاري عبر الإنترنت.

يستخدم Google سرعة تحميل صفحة الهاتف المحمول كمحدد رئيسي لتصنيف بحث أي موقع ويب. يرجع ذلك أساسًا إلى أن أكثر من نصف حركة مرور الويب العالمية تأتي من حركة مرور الهاتف المحمول.

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

• ما هو تصميم موقع الويب سريع الاستجابة الخاص بـ Elementor؟
• كيفية ضبط إعدادات الهاتف المحمول وسطح المكتب وعلامة التبويب
• اضبط العنوان على شاشة هاتفك المحمول
• ضبط المساحة المتروكة أو الهوامش للجوال
• قم بإنشاء كل عمود أفقيًا، وسيتم تعديله بشكل رائع عبر جميع الأجهزة
• تغيير صورة الخلفية حسب عرض الهاتف المحمول/سطح المكتب
• تغيير رؤية أي قسم على عرض سطح المكتب/الهاتف المحمول
• تغيير ترتيب الأعمدة
• إنشاء قسم بديل
• ضبط عرض العمود
• خاتمة

ما هو تصميم موقع الويب سريع الاستجابة الخاص بـ Elementor؟

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

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

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

يمكنك الآن تعديل إعداد الهاتف المحمول لصفحتك عن طريق التبديل إلى وضع عرض الهاتف المحمول والتحقق من الخيارات التالية لضبطها وفقًا لتخطيط الهاتف المحمول.

1. تحقق مما إذا كان أي عنوان رئيسي يبدو كبيرًا جدًا على شاشة الهاتف المحمول.
2. تحقق من حشوة المحتوى أو المساحة الموجودة على جوانب المحتوى
3. التحقق من محاذاة عمود الصفحة، كيف تبدو مثالية؛ في الوسط أو اليمين أو اليسار
4. تحقق من ترتيب الأعمدة، إذا كانت تظهر بالترتيب الصحيح أو كنت بحاجة إلى تغييره.

الآن، دعنا نتعمق أكثر ونكتشف كيف ستسير الأمور مع Elementor Page builder.

كيفية ضبط إعدادات الهاتف المحمول وسطح المكتب وعلامة التبويب

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

اضبط العنوان على شاشة هاتفك المحمول

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

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

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

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

ضبط المساحة المتروكة أو الهوامش للجوال

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

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

يمكننا إعادة ضبط الحشو إلى 17 بيكسل على كل جانب ثم يتبين أنه جيد تمامًا.

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

قم بإنشاء كل عمود أفقيًا، وسيتم تعديله بشكل رائع عبر جميع الأجهزة

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

تغيير صورة الخلفية حسب عرض الهاتف المحمول/سطح المكتب

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

تغيير رؤية أي قسم على عرض سطح المكتب/الهاتف المحمول

كما يمكنك التحكم في رؤية أي قسم أو عمود حسب الجهاز.

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

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

تغيير ترتيب الأعمدة

يمكنك أيضًا تغيير ترتيب الأعمدة من قسم الإعدادات. اذهب إلى؛ إعدادات القسم> خيارات متقدمة>مستجيبة>عمود عكسي وانقر على نعم.

إنشاء قسم بديل

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

ضبط عرض العمود

تحصل كافة أقسام الأعمدة على عرض بنسبة 100% عند عرضها على طريقة عرض الهاتف المحمول. ومع ذلك، يمكن تغيير العرض وفقًا لعرض العمود على الهاتف المحمول. إذا كان لديك عمودين، يمكنك تعيين الحد الأقصى لعرض كل قسم ليكون 50%.

خاتمة

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

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