يعد موقع الويب المستجيب للجوال جزءًا حيويًا من أي عمل تجاري عبر الإنترنت.
يستخدم Google سرعة تحميل صفحة الهاتف المحمول كمحدد رئيسي لتصنيف بحث أي موقع ويب. يرجع ذلك أساسًا إلى أن أكثر من نصف حركة مرور الويب العالمية تأتي من حركة مرور الهاتف المحمول.
لذلك، يعد موقع الويب المستجيب للجوال أمرًا لا مفر منه لسلامة موقعك وتصنيفه الأفضل في محرك بحث Google. في هذه المقالة، سنركز على كيفية إنشاء موقع ويب مستجيب للجوال باستخدام أداة إنشاء الصفحات Elementor.
يعمل التخطيط سريع الاستجابة بشكل مبتكر من خلال توسيع نطاق المحتوى تلقائيًا حسب حجم كل شاشة. يقوم تلقائيًا بتغيير حجم الصور والمحتوى على شاشة الهاتف المحمول حتى يتمكن المشاهدون من مشاهدة المحتوى الخاص بك دون أي جهد.
يشتري معظمنا سمة تدعي أنها تستجيب للجوال أيضًا؛ ومع ذلك، يمكن أن تكون الأمور محبطة عندما يتعطل تصميم المظهر الخاص بك تمامًا على شاشة الهاتف المحمول.
للتغلب على مثل هذه المواقف، توصلنا إلى حل سريع الاستجابة للجوال حيث يمكنك إنشاء تصميم موقع الويب الخاص بك من البداية باستخدام الخاصة بمنشئ الصفحات Elementor . بمساعدة هذه الأدوات المستجيبة للجوال، يمكنك تعديل أي ركن من أركان تخطيط موقع الويب الخاص بك وخاصةً الطباعة والحشو والهامش ومحاذاة الهاتف المحمول. ستتمكن أيضًا من تغيير إعدادات العمود وترتيبه على الهاتف المحمول.
يمكنك الآن تعديل إعداد الهاتف المحمول لصفحتك عن طريق التبديل إلى وضع عرض الهاتف المحمول والتحقق من الخيارات التالية لضبطها وفقًا لتخطيط الهاتف المحمول.
الآن، دعنا نتعمق أكثر ونكتشف كيف ستسير الأمور مع Elementor Page builder.
تحتوي جميع الميزات القابلة للتحرير تقريبًا على خيار ضبط إعدادات الهاتف المحمول وسطح المكتب وعلامة التبويب. إذا نقرت على وضع الاستجابة في أسفل القائمة
في بعض الأحيان نريد عنوانًا غامقًا وبارزًا على موقعنا على سطح المكتب، ويبدو جيدًا تمامًا على شاشة سطح المكتب، ولكن عند تشغيل عرض الهاتف المحمول، يشغل العنوان الشاشة بأكملها ولا يبدو مناسبًا لها.
يمكنك ضبط حجم النص لأي عنصر نص في علامة التبويب والجوال. يمكنك أيضًا تعيين أحجام نص مختلفة لعناوين الهاتف المحمول التي تبدو رائعة على شاشة الهاتف المحمول وتتناسب مع الشاشة بطريقة أفضل. في هذه الصفحة التجريبية، قمت بإنشاء عنوان يبدو رائعًا على موقع سطح المكتب، بينما على شاشة الهاتف المحمول فإنه يأخذ الشاشة بأكملها.
إذا قمت بالنقر فوق خيار التحرير الخاص بعمود العنوان، فيمكنني الانتقال إلى قسم الطباعة حيث يمكنني ضبط حجم العنوان الذي يبدو جيدًا على سطح المكتب وأيضًا على شاشة الهاتف المحمول. يمكنني التحكم في كليهما بشكل منفصل. بالنسبة لعرض موقع سطح المكتب، يبلغ حجم العنوان 49 بكسل، ولكن في عرض الهاتف المحمول، لا يتناسب معه
لإعادة الضبط، سأنقر على وضع استجابة الهاتف المحمول > النمط > الطباعة > اضبط حجم البكسل على 30 والذي يتناسب بسهولة مع شاشة الهاتف المحمول.
عند ضبط الحشوات، يوصى بعدم استخدام القيم بالبكسل بدلاً من تعيين القيم بـ EM أو النسبة المئوية لأنها ستحافظ على الحجم بالنسبة لحجم الشاشة الإجمالي.
يمكنك أن ترى أننا استخدمنا الحشو بحجم 70 بكسل لليمين واليسار، والذي يبدو جيدًا على موقع سطح المكتب؛ لكن عرض الهاتف المحمول لهذا الإعداد هو فوضى كاملة.
يمكننا إعادة ضبط الحشو إلى 17 بيكسل على كل جانب ثم يتبين أنه جيد تمامًا.
وبدلاً من ذلك، يمكنك ضبط إعداد الأعمدة بالكامل على 750 بكسل حيث سيتم عرض المحتوى الخاص بك في مربع دون الحاجة إلى ضبط الشاشة على عرض سطح المكتب أو الهاتف المحمول؛ سيقوم تلقائيًا بضبط المحتوى داخل الصندوق.
بمجرد إنشاء عمود أفقيًا، وهو ما يفضله المصممون أكثر، يمكنك تكرار الأقسام وتوفير الوقت. أنشئ قسمًا واحدًا في كل مرة ثم أعد استخدامه إذا سارت الأمور على ما يرام لتوفير الوقت.
تبدو بعض صور الخلفية جيدة عند عرض سطح المكتب، ولكن من المحتمل ألا تبدو الصورة أكبر من شاشة الهاتف المحمول. لذلك، فكر بشكل إبداعي واختر صورة مختلفة على شاشة الهاتف المحمول. لتحديد عرض متنقل مختلف، انقر فوق القسم > علامة تبويب النمط > انقر على أيقونة الجهاز وحدد عرض الجوال. الآن، أيًا كانت الصورة التي تختارها، فسوف تظهر فقط على عرض الهاتف المحمول.
كما يمكنك التحكم في رؤية أي قسم أو عمود حسب الجهاز.
في بعض الأحيان، نعرض المحتوى أو الصور الخاصة بنا في قسمين أو ثلاثة أقسام أو أعمدة مختلفة، لكننا لا نحب عرضها على الهاتف المحمول. لهذا السبب يستطيع Elementor إخفاء القسم الذي لا ترغب في عرضه على عرض الهاتف المحمول.
انتقل إلى > إعدادات القسم > خيارات متقدمة > استجابة، وسترى هناك إمكانيات أو تفضيلات مرئية مختلفة؛ يمكنك إخفاء القسم على سطح المكتب أو إخفاءه في علامة التبويب أو إخفاءه على الهاتف المحمول حسب تفضيلاتك.
يمكنك أيضًا تغيير ترتيب الأعمدة من قسم الإعدادات. اذهب إلى؛ إعدادات القسم> خيارات متقدمة>مستجيبة>عمود عكسي وانقر على نعم.
إنشاء أقسام بديلة على عرض الجوال وسطح المكتب. في بعض الأحيان، لا يبدو قسم شريط التمرير مفيدًا على الهاتف المحمول كما هو الحال على سطح المكتب، لذا يمكنك استخدام أي قسم آخر بدلاً من استخدام قسم شريط التمرير. يمكنك القيام بذلك عن طريق الانتقال إلى علامة التبويب خيارات متقدمة > تشغيل / إيقاف رؤية القسم الذي لا تريد عرضه وإضافة صورة بديلة عليه.
تحصل كافة أقسام الأعمدة على عرض بنسبة 100% عند عرضها على طريقة عرض الهاتف المحمول. ومع ذلك، يمكن تغيير العرض وفقًا لعرض العمود على الهاتف المحمول. إذا كان لديك عمودين، يمكنك تعيين الحد الأقصى لعرض كل قسم ليكون 50%.
Elementor مزودًا بجميع الميزات القوية للتحكم في تخطيط العمود سريع الاستجابة لجميع أحجام الشاشة. يسمح لك بإعادة ضبط كل قسم حسب اختيار وضع العرض. يعد الاحتفاظ بموقع ويب متوافقًا مع الجوّال أمرًا لا مفر منه لأن خوارزمية Google تعتبر تصنيف مواقع الويب المتوافقة مع الجوّال هو الأكثر أهمية. لا تعد مواقع الويب سريعة الاستجابة ضرورية لتحسين محركات البحث فحسب، بل تحتاج أيضًا إلى الحصول على المزيد من الزيارات، لأن أكثر من 80% من الزيارات تأتي من مشاهدات الهاتف المحمول.
يأتي منشئ صفحات Elementor الآن مزودًا بميزات حصرية تتيح لمستخدميه إنشاء موقع متوافق مع الجوّال دون بذل الكثير من الجهد. نأمل أن تجد مقالتي مفيدة وأن تحصل على جميع إجاباتك حول كيفية إنشاء موقع ويب سريع الاستجابة باستخدام Elementor.
تعد رؤوس وتذييلات موقع الويب عناصر أساسية. في معظم الحالات، يوفر الرأس إمكانية التنقل...
اثنان من سمات WordPress الأكثر شيوعًا في السوق هما Astra وOceanWP. احترافي…
إن إنشاء موقع إخباري ممتاز لا يتطلب منك أن تصبح مصمم ويب. نحن…
يعد موضوع Newspaper واحدًا من أهم سمات WordPress التي صممها tagDiv، وهو…
عندما يتعلق الأمر بإنشاء متجر عبر الإنترنت، فإن WooCommerce هو plugin المناسب. هو - هي…
عادةً ما يكون العنوان هو أول ما يراه الشخص عند زيارته لموقع الويب الخاص بك،...
عرض التعليقات
مشاركة جيدة! Bardzo odpowiada na mojepotrzeby. Storzyłam stronę ale widok mobilny mi się rozjechał. Dziękuję za wskazówki. Są باردزو بوموكني 🙂
ممتاز! لا يمكن أن تقوم بتركيب 2 قطعة من الرقائق - قم بتدوير عمود الكلية وإخراجها في كل مرة. Wielkie dzięki za pomoc :)
مرحبًا، لتغيير ترتيب الأعمدة، يمكنك استخدام السحب والإفلات مباشرةً أو مستكشف الأقسام. فيما يتعلق بالرؤية، فهو الإعداد المتقدم للقسم، ستحتاج إلى إيقاف تشغيل رؤية سطح المكتب والكمبيوتر اللوحي والهاتف المحمول.
كيفية القيام الحشو استجابة؟
مرحبًا، الحشوة ليست مستجيبة تمامًا، وهذه قيمة ثابتة. إذا كانت لديك مشكلة في الاستجابة، فأنت بحاجة إلى تحديد قيمة حشو مختلفة لسطح المكتب والجهاز اللوحي والهاتف