اجعل موقع Elementor على الويب أكثر استجابة للأجهزة المحمولة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قم بتغيير ترتيب العمود

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

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

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

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

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

استنتاج

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

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