الوجبات السريعة الرئيسية
- تحتوي أربعة عناوين علامات تبويب تناسب عمود سطح المكتب مقاس 1200 بكسل على حوالي 390 بكسل على الهاتف، لذا فهي تلتف أو تتخلص أو تفيض.
- تحتوي أداة علامات التبويب الخاصة بـ Elementor على عنصر تحكم في نقطة التوقف يقوم بتحويل الشريط إلى أكورديون عمودي أسفل العرض الذي تختاره. الهاتف المحمول هو الافتراضي.
- التمرير الأفقي هو الخيار الآخر: تبقى العناوين في صف واحد ويقوم الزوار بالتمرير من خلالها.
- ال أداة علامات تبويب الإضافات الرئيسية يقوم بتكديس عناوينه في عمود كامل العرض على الهاتف، مع اللوحة المفتوحة أسفله. هذا قابل للقراءة، لكنه ليس أكورديون.
- عادةً ما تبقى ثلاثة عناوين قصيرة أو أقل على قيد الحياة على الهاتف دون أن يمسها أحد. بعد ذلك، اختر الأكورديون أو قم بالتمرير عمدًا.
علامات التبويب هي نمط سطح المكتب. إنها تفترض مساحة أفقية لعدة عناوين بالإضافة إلى لوحة، والهاتف لديه حوالي ثلث هذا العرض.
يمنحك Elementor طريقتين للخروج، وتتصرف عناصر واجهة المستخدم الإضافية بشكل مختلف مرة أخرى. لقطات شاشة الهاتف أدناه عبارة عن لقطات بدقة 390 بكسل لصفحة اختبار حقيقية، لذا فإن ما تراه هو ما يفعله الإعداد.
جدول المحتويات
ما الخطأ
شريط علامات التبويب يريد سطرًا واحدًا. أعطها عرضًا أقل مما تحتاجه العناوين وستحصل على واحدة من ثلاث نتائج، ليست أي منها جيدة
- تلتف العناوين على الصف الثاني والثالث، ويتوقف الشريط عن القراءة كشريط.
- إنهم يسحقون بدلاً من ذلك، حتى يصبح كل ملصق بضع بكسلات من النص غير القابل للقراءة.
- أو يفيض الأخير من الحافة، وعادةً ما يجلب معه شريط تمرير أفقيًا للصفحة.
أهداف النقر تجعل الأمر أسوأ. تضع إرشادات اللمس هدفًا مريحًا عند حوالي 44 بكسل، والعنوان المحطم أقل بكثير من ذلك، لذلك يخطئ الناس ويضربون الجار.
الخيار 1: التبديل إلى الأكورديون
هذا هو السلوك الذي يريده معظم الأشخاص، وتقوم أداة علامات التبويب بذلك بدون CSS.
- حدد عنصر واجهة مستخدم علامات التبويب وافتح إعدادات إضافية في علامة تبويب المحتوى.
- قم بتعيين نقطة التوقف على العرض الذي يجب أن يستسلم فيه الشريط. الهاتف المحمول هو الخيار الافتراضي وعادة ما يكون الإجابة الصحيحة؛ يكون الجهاز اللوحي منطقيًا عندما تكون العناوين طويلة.
أسفل هذا العرض، يقع كل عنوان مباشرة فوق اللوحة الخاصة به، والنقر فوق أحد العناوين يفتحه. عنوان واحد لكل صف يعني هدف النقر بعرض كامل، ويظل المحتوى مطويًا حتى لا تطول الصفحة.
الخيار 2: دع الشريط يتم تمريره
قم بتشغيل التمرير الأفقي وستبقى العناوين في صف واحد بأي عرض، مع تمرير الصف بشكل جانبي. يقوم الزوار بالتمرير على طوله للوصول إلى الأشخاص الموجودين خارج الشاشة.
يناسب هذا الشريط الذي يُقرأ كتسلسل، مثل الأشهر أو الأحجام، حيث يكون الحفاظ على الترتيب مرئيًا أكثر أهمية من رؤية كل خيار في وقت واحد. نقطة ضعفه هي الاكتشاف: الزائر الذي لا يلاحظ أن مخطوطات الصف لا يجد علامات التبويب اللاحقة أبدًا. يساعد ترك نصف العنوان التالي مرئيًا عند الحافة، لأن تسمية القطع هي دعوة واضحة للتمرير.
التمرير ونقطة توقف الأكورديون لا يستبعد أحدهما الآخر، لذا إذا قمت بتعيين كليهما، فقرر أيهما تريده بالفعل أسفل نقطة التوقف وتحقق من النتيجة على الهاتف.
ما الذي تفعله علامات التبويب الإضافية على الهاتف
تتعامل أداة Master Addons مع الشاشات الضيقة عن طريق التراص: تصبح العناوين عمودًا كامل العرض وتقع اللوحة المفتوحة أسفل القائمة بأكملها.
يحصل كل عنوان على هدف نقر كامل العرض، مما يحل عملية السحق. فهو لا يربط كل عنوان بلوحة خاصة به، لذلك باستخدام ستة أو سبعة علامات تبويب، يقوم الزائر بالتمرير عبر القائمة بأكملها قبل الوصول إلى أي محتوى.
القاعدة العملية: الإضافة جيدة على الهاتف الذي يحتوي على ثلاث أو أربع علامات تبويب، وتكون الأداة الأساسية ذات نقطة التوقف أفضل عندما يكون هناك المزيد.
أي خيار لأي صفحة
| حالة | تعيين |
|---|---|
| ثلاثة أو أربعة عناوين قصيرة، معظمها حركة مرور سطح المكتب | اتركه، ثم تحقق من الهاتف |
| خمس علامات تبويب أو أكثر | علامات التبويب الأساسية مع تعيين نقطة التوقف على الهاتف المحمول |
| العناوين الطويلة مثل “Shipping وReturn” | علامات التبويب الأساسية مع تعيين نقطة التوقف على الجهاز اللوحي |
| العناوين التي تُقرأ كتسلسل، مثل الأشهر أو الأحجام | التمرير الأفقي |
| في الغالب حركة الهاتف واللوحات الطويلة | أداة الأكورديون بدلا من علامات التبويب |
| عناوين الأيقونات، ثلاث أو أربع علامات تبويب | أداة الإضافة، العمود المكدس على ما يرام |
عندما تتوقف علامات التبويب عن العمل على الهاتف المحمول
عادةً ما يتبين أن عدم عمل R“Tabs على mobile” هو واحد من أربعة أشياء
- تأثير التحويم. لا يوجد التمرير على شاشة تعمل باللمس، لذا فإن علامة التبويب التي تم تعيينها لتشغيل التمرير تحتاج إلى نقرة، وأحيانًا نقرتين. اضبط التأثير للنقر على أي صفحة بها حركة مرور الهاتف.
- Css المخزنة مؤقتًا. بعد تغيير نقطة التوقف، قم بإعادة إنشاء CSS الخاص بـ Elementor ومسح ذاكرة التخزين المؤقت للصفحة، أو يستمر الهاتف في تقديم ورقة الأنماط القديمة.
- برنامج نصي مؤجل. يؤدي تأجيل JavaScript العدواني إلى تأخير البرنامج النصي لعلامة التبويب حتى يتفاعل الزائر مع الصفحة، وبالتالي فإن النقرة الأولى لا تفعل شيئًا. استبعاد البرنامج النصي لعنصر واجهة المستخدم في البرنامج الإضافي للتحسين.
- هدف النقر صغير جدًا. لا شيء مكسور، العنوان أصغر من الإبهام، ونقطة توقف الأكورديون تعمل على إصلاحه.
الأسئلة المتداولة
كيف أجعل علامات تبويب Elementor تتحول إلى أكورديون على الهاتف المحمول؟
حدد عنصر واجهة المستخدم Tabs، وافتح الإعدادات الإضافية وقم بتعيين نقطة التوقف. أسفل هذا العرض، يتحول الشريط إلى تخطيط الأكورديون الرأسي، مع استخدام الهاتف المحمول كإعداد افتراضي.
لماذا تتداخل عناوين علامات التبويب الخاصة بي على الهاتف؟
الشريط له عرض أقل مما تحتاج إليه العناوين. قم بتعيين نقطة توقف الأكورديون، أو قم بتشغيل التمرير الأفقي، أو قم بتقصير العناوين.
هل تضر علامات التبويب بتحسين محركات البحث على الأجهزة المحمولة؟
لا. المحتوى الموجود داخل علامة التبويب موجود في HTML ويتم فهرسته سواء كانت اللوحة مفتوحة أم لا.
هل يجب أن أستخدم علامات التبويب أو الأكورديون على الهاتف المحمول؟
إذا كانت معظم حركة المرور الخاصة بك عبارة عن هواتف وكانت اللوحات طويلة، فقم بإنشائها كأكورديون منذ البداية. تعد علامات التبويب ذات نقطة التوقف هي المكالمة الأفضل عندما يكون سطح المكتب هو العرض الأساسي.
لماذا لا تفعل النقرة الأولى شيئًا؟
عادة ما يكون تأثير التمرير أو البرنامج النصي المؤجل. اضبط تأثير علامة التبويب للنقر عليه، واستبعد البرنامج النصي لعلامة التبويب من تأجيل JavaScript.
الأفكار النهائية
لا شيء من هذا يحتاج إلى CSS. يغطي عنصر التحكم في نقطة التوقف الخاص بـ Elementor الحالة الشائعة، ويغطي Horizontal Scroll التسلسلات، ويتم تكديس عناصر واجهة المستخدم الإضافية في عمود قابل للقراءة. ثم افتح الصفحة على هاتف فعلي وانقر على كل عنوان، لأن هذه هي الخطوة التي يتخطاها الأشخاص.
القراءة ذات الصلة
