يعد موقع الويب المستجيب للجوال جزءًا حيويًا من أي عمل تجاري عبر الإنترنت.
تستخدم Google سرعة تحميل صفحات الجوال كمحدد رئيسي لترتيب بحث أي موقع ويب. يرجع ذلك أساسًا إلى أن أكثر من نصف حركة مرور الويب العالمية تأتي من حركة مرور الهاتف المحمول.
لذلك ، فإن موقع الويب المستجيب للجوال أمر لا مفر منه من أجل صحة موقعك وترتيبه بشكل أفضل في محرك بحث Google. في هذه المقالة ، سنركز على كيفية إنشاء موقع ويب سريع الاستجابة للجوال باستخدام منشئ الصفحة Elementor.
يعمل التصميم المتجاوب بشكل مبتكر عن طريق قياس كل المحتوى تلقائيًا وفقًا لحجم كل شاشة. يقوم تلقائيًا بتغيير حجم الصور والمحتوى على شاشة الهاتف المحمول بحيث يمكن للمشاهدين مشاهدة المحتوى الخاص بك دون أي جهد.
يشتري معظمنا موضوعًا يدعي أنه يستجيب للجوّال أيضًا ؛ ومع ذلك ، يمكن أن تكون الأمور محبطة عندما يتعطل تصميم السمة الخاصة بك تمامًا على شاشة الهاتف المحمول.
للتغلب على مثل هذه المواقف ، توصلنا إلى حل سريع الاستجابة للأجهزة المحمولة حيث يمكنك إنشاء تصميم موقع الويب الخاص بك من البداية باستخدام أدوات التخطيط سريعة الاستجابة Elementor page builder بمساعدة هذه الأدوات سريعة الاستجابة للأجهزة المحمولة ، يمكنك تعديل أي ركن من تصميم موقع الويب الخاص بك ، وخاصة الطباعة والحشو ومحاذاة الهامش والجوال. أيضًا ، ستتمكن من تغيير إعدادات العمود والطلب على الهاتف المحمول.
الآن ، يمكنك تعديل إعدادات الهاتف المحمول لصفحتك عن طريق التبديل إلى وضع عرض الجوال والتحقق من الخيارات التالية للضبط وفقًا لتخطيط الهاتف المحمول.
الآن ، دعنا نتعمق أكثر ونكتشف كيف ستسير الأمور مع Elementor Page Builder.
تحتوي جميع الميزات القابلة للتحرير تقريبًا على خيار ضبط إعدادات الهاتف المحمول وسطح المكتب وعلامة التبويب. إذا قمت بالنقر فوق وضع الاستجابة في أسفل القائمة
في بعض الأحيان ، نريد عنوانًا جريئًا وبارزًا على موقع سطح المكتب الخاص بنا ، ويبدو جيدًا تمامًا على شاشة سطح المكتب ، ولكن عند تشغيل عرض الهاتف المحمول ، يأخذ العنوان الشاشة بأكملها ولا يبدو مناسبًا.
يمكنك ضبط حجم النص لأي عنصر نصي في علامة التبويب والجوال. يمكنك أيضًا تعيين أحجام نصية مختلفة لعناوين الجوال التي تبدو رائعة على شاشة الهاتف وتتلاءم مع الشاشة بطريقة أفضل. في هذه الصفحة التجريبية ، قمت بإنشاء عنوان يبدو رائعًا على موقع سطح المكتب ، بينما على شاشة الهاتف المحمول يأخذ الشاشة بأكملها.
إذا قمت بالنقر فوق خيار التحرير الخاص بعمود العنوان ، فيمكنني الانتقال إلى قسم الطباعة حيث يمكنني ضبط حجم العنوان الذي يبدو جيدًا على سطح المكتب وكذلك على شاشة الهاتف المحمول. يمكنني التحكم في كليهما بشكل منفصل. بالنسبة لطريقة عرض موقع سطح المكتب ، يكون حجم العنوان 49 بكسل ، ولكن في طريقة عرض الجوال ، لا يتناسب مع
لإعادة الضبط ، سأضغط على وضع الاستجابة للجوال> النمط> الطباعة> اضبط حجم البكسل إلى 30 والذي يتناسب بسهولة مع شاشة الهاتف المحمول.
عند ضبط الحشوات ، يوصى بعدم استخدام القيم بالبكسل بدلاً من تعيين القيم في EM أو النسبة المئوية لأنها ستحافظ على الحجم بالنسبة لحجم الشاشة الكلي.
يمكنك أن ترى أننا استخدمنا الحشو 70 بكسل لليمين واليسار ، وهو ما يبدو جيدًا على موقع سطح المكتب ؛ لكن عرض المحمول لهذا الإعداد هو فوضى كاملة.
يمكننا إعادة ضبط الحشو إلى 17 بكسل على كل جانب ثم يتضح أنه جيد تمامًا.
بدلاً من ذلك ، يمكنك ضبط إعداد الأعمدة بالكامل على 750 بكسل حيث سيتم عرض المحتوى الخاص بك في مربع دون الحاجة إلى ضبط الشاشة على كل من عرض سطح المكتب أو الهاتف المحمول ؛ سيقوم تلقائيًا بضبط المحتوى داخل الصندوق.
بمجرد إنشاء العمود أفقيًا ، والذي يفضله المصممون أكثر من غيرهم ، يمكنك تكرار الأقسام وتوفير الوقت. أنشئ قسمًا واحدًا في كل مرة ثم أعد استخدامه إذا سارت الأمور على ما يرام لتوفير الوقت.
تبدو بعض صور الخلفية جيدة في عرض سطح المكتب ، ولكن الاحتمال هو أن الصورة لن تبدو أكبر من شاشة الهاتف المحمول. لذا ، فكر بشكل إبداعي واختر صورة مختلفة على شاشة الهاتف المحمول. لاختيار طريقة عرض مختلفة للهاتف المحمول ، انقر فوق القسم> علامة تبويب النمط> انقر فوق رمز الجهاز وحدد عرض الجوال. الآن ، أيًا كانت الصورة التي تختارها ، ستظهر فقط في عرض الجوال.
يمكنك أيضًا التحكم في رؤية أي قسم أو عمود وفقًا للجهاز.
في بعض الأحيان ، نعرض المحتوى أو الصور الخاصة بنا في قسمين أو ثلاثة أقسام أو أعمدة مختلفة ، لكننا لا نحب عرضها على الجوال. لهذا السبب يمكن لـ Elementor إخفاء القسم الذي لا ترغب في عرضه على عرض الجوال.
اذهب إلى> إعدادات القسم> متقدم> سريع الاستجابة وهناك سترى إمكانيات مختلفة أو تفضيلات مرئية ؛ يمكنك إخفاء القسم الموجود على سطح المكتب أو الاختباء في علامة التبويب أو الاختباء على الهاتف المحمول حسب تفضيلاتك.
يمكنك أيضًا تغيير ترتيب الأعمدة من قسم الإعدادات. اذهب إلى؛ إعدادات القسم> متقدم> مستجيب> عكس العمود وانقر فوق نعم.
إنشاء أقسام بديلة في عرض الجوال وسطح المكتب. في بعض الأحيان ، لا يبدو قسم شريط التمرير مفيدًا على الهاتف المحمول كما هو الحال على سطح المكتب ، لذا يمكنك استخدام أي قسم آخر بدلاً من استخدام قسم شريط التمرير. يمكنك القيام بذلك عن طريق الانتقال إلى علامة التبويب خيارات متقدمة> تشغيل / إيقاف تشغيل رؤية القسم الذي لا تريد عرضه وإضافة صورة بديلة عليه.
تحصل جميع أقسام الأعمدة على عرض بنسبة 100٪ عند عرضها على طريقة عرض الجوال. ومع ذلك ، يمكن تغيير العرض حسب عرض العمود على الجوال. إذا كان لديك عمودين ، يمكنك تعيين أقصى عرض لكل قسم ليكون 50٪.
يأتي Elementor مع جميع الميزات القوية للتحكم في تخطيط العمود المتجاوب لجميع أحجام الشاشة. يسمح لك بإعادة ضبط كل قسم حسب اختيار وضع العرض. يعد الاحتفاظ بموقع متوافق مع الجوّال أمرًا لا مفر منه لأن خوارزمية Google تعتبر ترتيب مواقع الويب المتوافقة مع الجوّال أكثر من غيرها. لا تعد مواقع الويب المستجيبة ضرورية لتحسين مُحسّنات محرّكات البحث فحسب ، بل تحتاج أيضًا إلى الحصول على المزيد من الزيارات ، لأن أكثر من 80٪ من الزيارات تأتي من مشاهدات الجوال.
الآن يأتي منشئ الصفحة Elementor مزودًا بميزات حصرية تتيح لمستخدميه إنشاء موقع متوافق مع الأجهزة المحمولة دون بذل الكثير من الجهد. نأمل أن تجد مقالتي مفيدة وحصلت على جميع إجاباتك حول كيفية إنشاء موقع ويب سريع الاستجابة باستخدام Elementor.
تعتبر رؤوس وتذييلات موقع الويب من العناصر الأساسية. في معظم الحالات ، يوفر الرأس التنقل ...
اثنان من أكثر موضوعات WordPress شيوعًا في السوق هما Astra و OceanWP. احترافي…
لا يتطلب إنشاء موقع إخباري ممتاز أن تصبح مصمم ويب. نحن…
تعد سمة الجريدة واحدة من أهم سمات WordPress التي صممها tagDiv ، وهو ...
عندما يتعلق الأمر بإعداد متجر على الإنترنت ، فإن WooCommerce هو plugin go-to. هو - هي…
عادةً ما يكون العنوان هو أول ما يراه الشخص عند زيارته لموقع الويب الخاص بك ، ...
تعليقات عرض
Świetny آخر! Bardzo odpowiada na moje potrzeby. Stworzyłam stronę ale widok mobilny mi się rozjechał. Dziękuję za wskazówki. Są bardzo pomocne 🙂
ممتاز! Nie mogłam samodzielnie znaleźć 2 rzeczy o których piszecie - zmiana kolejności kolumn i wyłączenie widoczności sekcji. Wielkie dzięki za pomoc :)
مرحبًا ، لتغيير ترتيب العمود ، يمكنك استخدام السحب والإسقاط مباشرة أو مستكشف القسم. حول الرؤية هو الإعداد المتقدم للقسم ، ستحتاج إلى إيقاف تشغيل رؤية سطح المكتب والكمبيوتر اللوحي والجوال.
كيف نفعل الحشو المستجيب؟
مرحبًا ، الحشو غير مستجيب تمامًا ، هذه قيمة ثابتة. إذا كانت لديك مشكلة سريعة الاستجابة ، فأنت بحاجة إلى تحديد قيمة حشوة مختلفة لسطح المكتب والجهاز اللوحي والهاتف