الوجبات السريعة الرئيسية
- علامات التبويب مخصصة لعدد قليل من الأقسام المتوازية التي يختار الزائر بينها. الأكورديون مخصص لقائمة يتم فيها تخطي معظم العناصر.
- تغطي علامات التبويب حوالي أربعة أو خمسة عناوين لأن عرض الشريط ينفد. يأخذ الأكورديون عشرين دون شكوى.
- يمكن أن يحتوي الأكورديون على عدة لوحات مفتوحة في وقت واحد، ويمكنه مقارنتها على الشاشة. تظهر علامات التبويب واحدة بالضبط.
- تم تصميم الأكورديون للشاشات الضيقة. تتعامل علامات التبويب الخاصة بـ Elementor مع الهواتف عن طريق التبديل إلى الأكورديون الموجود أسفل نقطة التوقف التي قمت بتعيينها، وهو تلميح حول النمط الذي يفوز هناك.
- ولا يخفي أي منهما المحتوى من Google. تضع كلا العنصرين كل لوحة في صفحة HTML وتخفي اللوحات المغلقة باستخدام CSS.
يقوم كلا النموذجين بنفس المهمة: طي صفحة طويلة حتى يقرأ الزائر الجزء الذي جاء من أجله. الفرق هو ماهية العناصر المنهارة لبعضها البعض.
علامات التبويب تقول “اختر واحدًا من هذه العملات. يقول الأكورديون “هناك قائمة، افتح ما تحتاجه. احصل على ذلك للخلف وستقاتل الصفحة الزائر، وهو ما يجعل هذا الأمر يستحق دقيقتين من التفكير.
جدول المحتويات
الفرق الفعلي
| علامات التبويب | الأكورديون | |
|---|---|---|
| العناوين تجلس | في صف أو عمود جانبي | مكدسة، كل منها فوق اللوحة الخاصة بها |
| فتح في وقت واحد | واحد | واحد أو أكثر، اختيارك |
| عدد العناصر مريح | ثلاثة إلى خمسة | خمسة إلى عشرين |
| جميع العناوين مرئية | نعم | نعم |
| ارتفاع الصفحة عند إغلاقها | تم إصلاحه بواسطة أطول لوحة | ينمو مع فتح اللوحات |
| يقرأ كما | “Pick one” | “Scan القائمة” |
| شاشات ضيقة | يحتاج إلى تراجع | يعمل كما بنيت |
الصف الذي يحرك معظم القرارات هو عدد العناصر. شريط علامات التبويب محدود بالمساحة الأفقية، والأكورديون محدود فقط بالصبر.
عندما تكون علامات التبويب صحيحة
تتناسب علامات التبويب عندما تكون الأقسام نظيرة وسيقرأ الزائر أحدها. ثلاث إشارات:
- ثلاثة إلى خمسة أقسام، عدد قليل بما يكفي ليناسب الشريط.
- المحتوى الموازي، مثل الوصف والمواصفات والمراجعات والشحن على صفحة المنتج: نفس النوع من الأشياء، شريحة مختلفة.
- كل زائر يريد واحدا منهم. لا أحد يقرأ الأربعة، الجميع يقرأ واحدًا.

تحافظ علامات التبويب أيضًا على ارتفاع يمكن التنبؤ به للصفحة، وهو أمر مهم عندما يوجد شيء ما أسفله مباشرة ولا تريد أن يقفز إلى أسفل الشاشة.
عندما يكون الأكورديون على حق
يتناسب الأكورديون عندما تكون العناصر عبارة عن قائمة وليست مجموعة من الاختيارات
- ستة عناصر أو أكثر. الأسئلة الشائعة التي تحتوي على اثني عشر سؤالًا لا تحتوي على تخطيط علامة تبويب يعمل.
- يتم تخطي معظم العناصر، لأن الزائر يفتح السؤالين اللذين ينطبقان عليها.
- عناصر ذات أطوال مختلفة جدًا، حيث تكون إحدى الإجابات عبارة عن جملة والأخرى مكونة من خمس فقرات. سيكون حجم علامات التبويب هو الأطول.
- اللوحات التي يريد الزائر فتحها في نفس الوقت، لقراءة سياستين جنبًا إلى جنب.
الأسئلة الشائعة هي أوضح حالة، ولهذا السبب فإن معظم أقسام الأسئلة الشائعة التي تقابلها هي أكورديون. تتصرف سياسات التسعير وخطوات استكشاف الأخطاء وإصلاحها وأقسام التوثيق بنفس الطريقة.
يحتوي Elementor على عنصر واجهة مستخدم Accordion في البرنامج المساعد المجاني. ال إضافات الماجستير الأكورديون المتقدم يضيف بعض الأشياء في الأعلى: عنصر تحكم من نوع الأكورديون الذي يقوم بالتبديل بين سلوك الأكورديون (لوحة واحدة في كل مرة) وسلوك التبديل (كل لوحة مستقلة)، وأيقونات التوسيع والطي المخصصة، والنشط كافتراضي لكل عنصر، وسرعة التبديل بالمللي ثانية، وعلامة HTML الخاصة بالعنوان.
ما هي الهواتف التي تقرر
الأكورديون هو بالفعل كومة رأسية من الصفوف كاملة العرض، لذا فإن شاشة 390 بكسل لا تغير شيئًا عنها. علامات التبويب هي النمط الذي يجب أن يتكيف.
تتحول أداة علامات التبويب الخاصة بـ Elementor إلى تخطيط الأكورديون الرأسي أسفل نقطة التوقف التي تختارها، مع استخدام الهاتف المحمول كنقطة توقف افتراضية. تقوم علامات التبويب الإضافية بتكديس عناوينها في عمود كامل العرض مع اللوحة الموجودة أسفل القائمة.

وبعبارة أخرى، فإن إصلاح علامات التبويب على الهاتف هو أن تصبح أكورديون. إذا كانت معظم حركة المرور الخاصة بك متنقلة، فإن إنشاء الأكورديون منذ البداية يتخطى التخطيط الموجود فقط على سطح المكتب.
سؤال تحسين محركات البحث
تتم فهرسة المحتوى المنهار. تضع كلا العنصرين كل لوحة في صفحة HTML وتخفي اللوحات غير النشطة باستخدام CSS، لذلك يقرأ زاحف Google كل ذلك. يمكنك تأكيد ذلك على صفحتك الخاصة من خلال عرض المصدر والبحث عن نص من لوحة مغلقة.
هناك شيئان يستحقان الاهتمام حقًا:
- لا تخفي ما تدور حوله الصفحة. إذا كان على الزائر النقر لمعرفة ما تبيعه، فإن هذا المحتوى لا ينتمي إلى علامة التبويب الثالثة، مهما كان ما يمكن للزاحف قراءته.
- تأتي البيانات المنظمة للأسئلة الشائعة من البرنامج الإضافي لتحسين محركات البحث الخاص بك وليس من أي من عناصر واجهة المستخدم. يقوم Rank Math وYoast بإنشاء علامات الأسئلة الشائعة من حقل الكتلة أو المخطط الخاص بهما، وبالتالي فإن الأكورديون هو العرض التقديمي ويتم تعيين المخطط بشكل منفصل.
حيث يناسب التبديل
يظهر Toggle في هذه المقارنة لأن Elementor كان يحتوي على عنصر واجهة مستخدم Toggle، ولأن “toggle” يعني شيئين مختلفين.
كانت أداة Toggle القديمة الخاصة بـ Elementor عبارة عن أكورديون باسم آخر: مجموعة من الصفوف القابلة للتوسيع. لقد تم إهماله منذ الإصدار 3.15، ويعرض تحرير أحدها الآن إشعارًا يخبرك بسحب عنصر واجهة المستخدم Accordion بدلاً من ذلك. لذلك في التثبيت الحالي، استوعبته بالفعل علامة التبويب مقابل سؤال الأكورديون.
المعنى الآخر هو تبديل الحالة الثنائية، حيث يقوم أحد عناصر التحكم بقلب الصفحة بين نسختين من نفس المحتوى. هذا هو ما الإضافات الرئيسية تبديل المحتوى تقوم الأداة بما يلي: تسميتان، والتبديل بينهما، وكتلة من المحتوى خلف كل منهما. إن السعر الشهري مقابل السعر السنوي هو الحالة الواضحة، والقياس مقابل الوحدات الإمبراطورية هو حالة أخرى.
هذا هو النمط الثالث وليس الاختلاف في الأولين. استخدمه عندما تكون هناك حالتان بالضبط ويقوم الزائر بالتبديل بينهما. ثلاثة خيارات أو أكثر تعني علامات التبويب، وقائمة المسح تعني الأكورديون. إذا كان ما تريده هو الأكورديون الذي تفتح لوحاته وتغلق بشكل مستقل، فهذا هو التحكم في نوع الأكورديون الذي تم ضبطه على Toggle.
باستخدام كليهما معا
إنهم يجتمعون بشكل جيد، لأنهم يجيبون على أسئلة مختلفة.
قد تستخدم صفحة مقارنة الخطة علامات تبويب شهريًا وسنويًا، مع أكورديون يحتوي على تفاصيل الميزات داخل كل علامة تبويب. المستوى الخارجي هو الاختيار بين اثنين من أقرانه؛ المستوى الداخلي عبارة عن قائمة للمسح الضوئي. تجعل علامات التبويب المتداخلة هذا الأمر واضحًا، نظرًا لأن كل لوحة عبارة عن حاوية تقبل عنصر واجهة مستخدم الأكورديون.
علامات التبويب الموجودة داخل علامات التبويب هي المجموعة التي لا تعمل، لأنها تطلب من الزائر أن يتذكر زوج العناوين الذي اختاره.
ما يعطيك Elementor لكل منها
كلا العنصرين موجودان في البرنامج الإضافي المجاني، وكلاهما عبارة عن عنصرين متداخلين، لذا تحتوي اللوحات على حاويات.
تضيف علامات التبويب الاتجاه الأفقي أو الرأسي، والتمرير الأفقي لصف عنوان طويل، ونقطة التوقف التي تتحول إلى الأكورديون. تحتوي أداة الأكورديون على Max Items Expanded، والتي تقرر ما إذا كان فتح لوحة واحدة يؤدي إلى إغلاق اللوحات الأخرى. تقوم أداة Master Addons بهذه المهمة من خلال التحكم في نوع الأكورديون.
تعمل عناصر واجهة المستخدم الإضافية على توسيع كليهما. على جانب علامات التبويب، تحصل على إعدادات مسبقة للنمط وعناوين الصور وتبديل التمرير، المغطاة في علامات التبويب المتقدمة ينشر. على جانب الأكورديون، تحصل على عناصر التحكم في الأيقونات ووضع التبديل والحالة الافتراضية لكل عنصر.
الأسئلة المتداولة
هل الأكورديون أفضل من علامات التبويب؟
لستة عناصر أو أكثر، للأسئلة الشائعة، والصفحات الثقيلة على الهاتف المحمول، نعم. بالنسبة لثلاثة إلى خمسة أقسام متوازية على صفحة سطح المكتب، تقرأ علامات التبويب بشكل أفضل.
هل يقوم Google بفهرسة المحتوى داخل علامات التبويب والأكورديون؟
نعم. اللوحات موجودة في HTML سواء كانت مفتوحة أو مغلقة، لذلك يقرأها الزاحف.
هل يمكنني وضع الأكورديون داخل علامة التبويب؟
نعم. كل لوحة علامات تبويب متداخلة عبارة عن حاوية، لذلك تسقط أداة الأكورديون مباشرة.
كم عدد علامات التبويب كثيرة جدًا؟
خمسة هو السقف العملي، وأقل إذا كانت العناوين طويلة أو تحمل أيقونات. الماضي الذي يلتف فيه الشريط والأكورديون هو النمط الأفضل.
ماذا عن أداة التبديل؟
تم إهمال عنصر واجهة مستخدم تبديل Elementor منذ الإصدار 3.15 ويشير إلى عنصر واجهة مستخدم Accordion. يعد التبديل بمعنى التبديل، والتقليب بين نسختين من نفس المحتوى، نمطًا منفصلاً ويحتاج إلى عنصر واجهة مستخدم مصمم له.
أي واحد يجب أن أستخدمه للأسئلة الشائعة؟
الأكورديون. الأسئلة عبارة عن قائمة للمسح الضوئي وليست مجموعة من الاختيارات، ويظل التخطيط قابلاً للقراءة عند اثني عشر سؤالًا، والتي لا يديرها أي شريط علامات تبويب.
الأفكار النهائية
عد العناصر، ثم اسأل ما هي لبعضها البعض. مجموعة قصيرة من الأقران حيث يقرأ الجميع واحدة هي علامات تبويب. القائمة الطويلة التي يتم فيها تخطي معظم العناصر هي الأكورديون. يقوم الهاتف المحمول بتسوية أي شك متبقي، حيث تتحول علامات التبويب الموجودة على الهاتف إلى أكورديون على أي حال.
