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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

خاتمة

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

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

هولدرخو

مباشر: .cid.e495888558d5265f

تعليقات عرض

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

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

المشاركات الاخيرة

كيفية استخدام الرؤوس والتذييلات مع Elementor

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

6 يناير 2022

مقارنة سمات WordPress: Astra vs OceanWP

اثنان من سمات WordPress الأكثر شيوعًا في السوق هما Astra وOceanWP. احترافي…

2 يناير 2022

مقارنة موضوع أخبار WordPress: الصحيفة مقابل الأخبار أسترا

إن إنشاء موقع إخباري ممتاز لا يتطلب منك أن تصبح مصمم ويب. نحن…

25 أكتوبر 2021

أنشئ موقعًا إلكترونيًا متعلقًا بالأخبار باستخدام موضوع الصحيفة

يعد موضوع Newspaper واحدًا من أهم سمات WordPress التي صممها tagDiv، وهو…

18 أكتوبر 2021

كيفية إنشاء تجارة إلكترونية باستخدام Avada WooCommerce builder

عندما يتعلق الأمر بإنشاء متجر عبر الإنترنت، فإن WooCommerce هو plugin المناسب. هو - هي…

4 أكتوبر 2021

كيفية استخدام تأثيرات الرأس والتمرير اللاصقة مع Elementor

عادةً ما يكون العنوان هو أول ما يراه الشخص عند زيارته لموقع الويب الخاص بك،...

21 سبتمبر 2021