الوجبات السريعة الرئيسية
- تضع علامات التبويب العمودية العناوين في عمود على اليسار أو اليمين، مع وجود اللوحة بجانبها. إنها تناسب العناوين الطويلة وستة أقسام أو أكثر، حيث يلتف الشريط الأفقي.
- تقوم أداة علامات التبويب الخاصة بـ Elementor بذلك من خلال ضبط التحكم في الاتجاه على البدء أو النهاية. لا حاجة إلى CSS.
- ال أداة علامات تبويب الإضافات الرئيسية يحتوي على إعداد مسبق لنمط علامات التبويب العمودية، والذي يصل إلى التصميم بدلاً من التصميم العادي.
- أقل من حوالي 768px لا يوجد عرض كافٍ لعمود جانبي، لذلك يتم تكديس كلا المسارين. فقط القطعة الأساسية تتحول إلى الأكورديون.
- اختر النواة إذا دخلت عناصر واجهة المستخدم داخل اللوحات، والملحق إذا كان عمود علامة التبويب نفسه يحتاج إلى أيقونات أو مظهر نهائي.
تنكسر علامات التبويب الأفقية بمجرد أن تصبح العناوين طويلة أو عديدة. ستة عناوين عبر عمود بحجم 1200 بكسل إما تلتف على سطرين أو تقلص النص حتى لا يقرأها أحد.
تقوم علامات التبويب العمودية بإدارة الشريط على جانبه: عمود ضيق من العناوين مع اللوحة النشطة بجانبه. يحصل كل عنوان على سطر كامل، لذا فإن “Shipping وReturn” يتناسبان دون تغليف. تتبع كلتا طريقتي بنائه.
جدول المحتويات
عندما يتفوق العمودي على الأفقي
العمودي هو التخطيط الأفضل عندما يكون أي من هذه صحيحًا
- أكثر من خمسة أقسام، حيث يلتف الشريط ولكن العمود يصبح أطول.
- العناوين أطول من كلمتين. “الضمان والإصلاحات” يحتاج إلى سطر كامل.
- لوحات ذات ارتفاعات مختلفة جدًا، نظرًا لأن عمود العنوان يظل في مكانه بينما يتغير حجم اللوحة.
- المحتوى الذي يُقرأ كقائمة: أقسام الوثائق، وقوائم الخدمة، والأسئلة الشائعة المجمعة.
ابق أفقيًا لمدة ثلاثة أو أربعة عناوين قصيرة. يأكل العمود الجانبي ما يقرب من ربع العرض، ومع وجود ثلاث علامات تبويب لا يستحق التداول ذلك.
الطريقة الأولى: التحكم في اتجاه العنصر
تتعامل أداة علامات التبويب في Elementor مع هذا دون إضافة.
- اسحب أداة علامات التبويب إلى الصفحة.
- في التخطيط، قم بتعيين الاتجاه للبدء للعناوين الموجودة على اليسار، أو إنهاء العناوين الموجودة على اليمين.
- قم بتعيين محاذاة العنوان للتحكم فيما إذا كان نص العنوان موجودًا على اليسار أو الوسط أو اليمين داخل العمود.
- قم ببناء كل لوحة داخل الحاوية الخاصة بها كالمعتاد.
يضع "ابدأ" العمود الموجود على اليسار بلغة من اليسار إلى اليمين ويقلب تلقائيًا من اليمين إلى اليسار، ولهذا السبب يتم تسمية القيم "ابدأ وانتهى" بدلاً من "يسار" و"يمين".
والنتيجة وظيفية وغير مصممة: عناوين نصية في عمود، واللوحة بجانبها، وكل حد ولون متبقي لعلامة تبويب النمط.
الطريقة الثانية: علامات التبويب العمودية المعدة مسبقًا
تتعامل أداة Master Addons مع التخطيط كإعداد مسبق بدلاً من الاتجاه، لذلك يأتي التصميم معه.
- اسحب عنصر واجهة المستخدم Tabs إلى الداخل.
- اضبط النمط المحدد مسبقًا على علامات التبويب العمودية.
- أضف عنصرًا مكررًا واحدًا لكل قسم، كل منها يحمل عنوان علامة تبويب.
- قم بتعيين Icon Type على Icon أو Image إذا كانت العناوين تحتاج إلى رمز، ثم اختر الرمز.
- اكتب محتوى اللوحة، وقم بتبديل التعيين كافتراضي على أي علامة تبويب يجب فتحها أولاً.
يصل العمود بخلفيته الخاصة وتباعده وحالته النشطة، لذا تستغرق الكتلة القابلة للاستخدام دقيقة واحدة بدلاً من جلسة التصميم. الحد هو نفسه الذي تحتوي عليه الإضافة دائمًا: تحتوي اللوحات على محتوى المحرر، لذا فإن النموذج أو المعرض داخل علامة التبويب يعني قالبًا محفوظًا على Pro، أو عنصر واجهة المستخدم الأساسي بدلاً من ذلك.
البديل الأكثر هدوءًا: الحدود النشطة اليسرى
الإعداد المسبق الثالث يستحق المعرفة. يحتفظ Left Active Border بالعمود الرأسي ولكنه يسقط المظهر المعبأ: توجد العناوين في خلفية الصفحة، ويتم تمييز العنوان النشط بشريط ملون على حافته اليسرى.
هذا هو ما يجب الوصول إليه في الصفحات ذات نمط التوثيق، حيث يحارب عمود علامات التبويب الثقيل النص الأساسي لجذب الانتباه.
ماذا يحدث على الهاتف
لا تحتوي الشاشة مقاس 390 بكسل على مساحة لعمود جانبي بالإضافة إلى لوحة، لذلك يتخلى كلا المسارين عن التخطيط الرأسي.
يتم تكديس عنصر واجهة المستخدم الأساسي إلى أكورديون عمودي أسفل نقطة التوقف التي تختارها في الإعدادات الإضافية، حيث يقع كل عنوان مباشرة فوق اللوحة الخاصة به. تقوم أداة الإضافة بتكديس العناوين في عمود كامل العرض مع اللوحة الموجودة أسفله، وهو ما يعمل، على الرغم من أنه ليس أكورديونًا: تظل اللوحة المفتوحة أسفل قائمة العناوين بأكملها.
وفي كلتا الحالتين، تحقق من عرض الهاتف قبل النشر. التخطيط الذي صممته على سطح المكتب ليس هو التخطيط الذي يراه زائر الهاتف.
أي طريقة للاستخدام
| حالة | طريقة |
|---|---|
| النماذج أو المعارض أو جداول التسعير داخل اللوحات | علامات التبويب الأساسية، تم ضبط الاتجاه على البدء |
| يحتاج إلى أن يكون الأكورديون على الهواتف | علامات التبويب الأساسية |
| العناوين على اليمين بدلا من اليسار | علامات التبويب الأساسية، تم ضبط الاتجاه على النهاية |
| أيقونات أو صور على العناوين | إضافة، علامات التبويب العمودية المعدة مسبقًا |
| عمود مصمم بدون عمل علامة تبويب النمط | إضافة، علامات التبويب العمودية المعدة مسبقًا |
| التنقل الجانبي بأسلوب التوثيق العادي | إضافة، تم ضبط الحدود النشطة اليسرى مسبقًا |
| اللوحات تعمل على التحليق | إضافة، تم ضبط تأثير علامة التبويب على التمرير |
الأسئلة المتداولة
هل يستطيع Elementor إنشاء علامات تبويب رأسية بدون إضافة؟
نعم. اضبط عنصر التحكم في الاتجاه الخاص بعنصر واجهة المستخدم Tabs على البداية أو النهاية وتنتقل العناوين إلى عمود جانبي.
لماذا تسمى قيم الاتجاه البداية والنهاية، وليس اليسار واليمين؟
لذا فإن التخطيط يقلب بشكل صحيح في اللغات من اليمين إلى اليسار. البداية هي الجانب الذي يبدأ عليه النص.
كم عدد علامات التبويب التي تعمل في التخطيط الرأسي؟
ستة إلى عشرة مريحة. بعد ذلك يصبح العمود أطول من اللوحة المجاورة له، وهو ما يبدو غريبًا.
هل تظل علامات التبويب الرأسية عمودية على الهاتف المحمول؟
لا، لا يوجد عرض كافٍ، لذلك يتم تكديس كلا المسارين. تصبح الأداة الأساسية أكورديونًا؛ يقوم الملحق بتكديس العناوين الموجودة أعلى اللوحة.
هل يمكنني وضع نموذج داخل علامة تبويب عمودية؟
باستخدام عنصر واجهة المستخدم الأساسي، نعم، لأن كل لوحة عبارة عن حاوية. باستخدام الإضافة، يقوم المعادل بتوجيه نوع المحتوى إلى قالب محفوظ، وهو خيار Pro.
الأفكار النهائية
الانتقال إلى الوضع الرأسي هو الطريقة التي تحل بها مشكلة العرض دون تقصير العناوين. يقوم التحكم في الاتجاه الخاص بـ Elementor بذلك بدون إضافة ويحتفظ بالحاويات في اللوحات، وهو أمر مهم إذا دخل أي شيء تفاعلي إلى الداخل. تعتبر الإعدادات المسبقة للإضافة مهمة عندما يبدو عمود العنوان منتهيًا دون تصميمه. يستغرق كلاهما نفس الوقت تقريبًا للبناء، لذا فإن ما يعيش في اللوحة هو الذي يقرر ذلك.
القراءة ذات الصلة
