علامات التبويب

تقوم مجموعات حقول علامات التبويب بإدخال عناصر التحكم في شريط علامات التبويب في لوحة Elementor، مثل علامات التبويب Normal وHover في أنماط الأزرار الخاصة بـ Elementor. يمكنك بنائه في الإضافات الرئيسية منشئ القطعة: أضف علامات التبويب، ووضع الحقول داخل كل منها، واقرأ كل قيمة في HTML أو CSS باستخدام رمز مميز مكون من ثلاثة أجزاء مثل {{ button_states.hover.bg }}.

علامات التبويب هي حقل احترافي. يتضمن البرنامج الإضافي المجاني أداة إنشاء عناصر واجهة مستخدم محدودة، وتأتي المجموعة الكاملة من الحقول مع ماستر أدونز برو.

ما يفعله حقل علامات التبويب #

• فهو يضيف صفًا من علامات التبويب القابلة للنقر إلى قسم من لوحة عنصر واجهة المستخدم الخاص بك. يؤدي النقر فوق علامة تبويب إلى إظهار الحقول الموجودة بداخلها.
• تحتوي كل علامة تبويب على اسم وتسمية وقائمة الحقول الخاصة بها.
• لا يخزن حقل علامات التبويب أي قيمة بحد ذاتها. تنتمي القيم إلى الحقول الموجودة داخل علامات التبويب.
• تقرأ القوالب تلك القيم باستخدام {{ tabs_name.tab_name.field_name }}. يمكن لعلامتي تبويب استخدام نفس أسماء الحقول، مما يجعل من السهل مقارنة القواعد العادية وقواعد التمرير.

إذا لم تكن قد قمت ببناء عنصر واجهة مستخدم بعد، فاقرأ نظرة عامة على منشئ القطعة أولاً.

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية لـ Elementor وMaster Addons Pro، وكلاهما نشط. ال دليل التثبيت إعداد الأغطية.
• عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Hover Button”: حقل نص لتسمية الزر، بالإضافة إلى حقل علامات التبويب المسمى button_states مع علامة التبويب عادي وعلامة التبويب تحوم. تحتوي كل علامة تبويب على حقلين للألوان bg و text.

كيفية إضافة حقل علامات التبويب #

1. اذهب الى الإضافات الرئيسية > منشئ القطعة وافتح القطعة الخاصة بك.
2. انقر فوق أسلوب قم بعلامة التبويب وإضافة قسم، على سبيل المثال “Button Style”.
3. يكتب tabs في مربع البحث الميداني على اليسار.
4. يجر علامات التبويب في القسم. يتم فتح إعداداته في الشريط الجانبي الأيسر، وتعرض معاينة القسم شريط علامات التبويب.

تمت تسمية حقل علامات التبويب الجديد tabs ويأتي مع علامتي تبويب فارغتين، tab_1 و tab_2. أعد تسميتها قبل أن تكتب أي رموز، لأن الأسماء تصبح جزءًا من كل مسار.

تم شرح خيارات حقل علامات التبويب #

• ملصق أسماء الحقل داخل المنشئ. في Elementor، يرى المحررون عنوان القسم وتسميات علامات التبويب، وليس هذا التصنيف.
• اسم هو الجزء الأول من كل رمز، لذلك button_states يعطي {{ button_states.normal.bg }}. الحروف والأرقام والتسطير فقط.
• وصف هي ملاحظة لك داخل البناء.
• علامات التبويب هي قائمة علامات التبويب. كل صف لديه اسم (تستخدم في الرموز، مثل hover) و أ ملصق (كما هو موضح في علامة التبويب، مثل التمرير). انقر إضافة علامة تبويب لصف آخر، أو الصليب الأحمر لإزالة واحد.

ضمن قائمة علامات التبويب، يعرض الشريط الجانبي واحدًا حقل التبويب جدول لكل علامة تبويب، بعنوان تسمية علامة التبويب. هذا هو المكان الذي تذهب إليه الحقول.

• اسم هو الجزء الأخير من الرمز المميز. يمكنك إعادة استخدام نفس الاسم في كل علامة تبويب، مثل bg و text هنا.
• ملصق هو النص بجوار عنصر التحكم في Elementor.
• يكتب يضبط عنصر التحكم: النص، الرقم، منطقة النص، WYSIWYG، الرمز، المخفي، المحول، الاختيار، اللون، الخط، الطباعة، التاريخ والوقت، عنوان URL، الوسائط، المعرض، الأيقونات، شريط التمرير، الأبعاد أو الخلفية.
• انقر إضافة حقل لإضافة صف إلى علامة التبويب هذه.

لا تغير الإعدادات الشائعة الموجودة في الأسفل (إظهار التسمية والفاصل والشروط والباقي) كيفية ظهور حقل علامات التبويب في Elementor، لذا يمكنك تركها بمفردها.

قراءة قيم علامات التبويب في القالب الخاص بك #

تتم قراءة كل قيمة داخل علامة التبويب بثلاثة أسماء متصلة بنقاط: حقل علامات التبويب، وعلامة التبويب، ثم الحقل.

{{ tabs_name.tab_name.field_name }}

ليس عليك كتابة هذه. بعد الحفظ، تسرد لوحة الوثائق الموجودة بجانب محرر HTML كل مسار ضمن تسمية حقل علامات التبويب، ويقوم رمز النسخ بنسخ مسار واحد.

تعمل الرموز المميزة في علامة التبويب CSS بالإضافة إلى علامة التبويب HTML. يحتفظ زر المثال بمظهره الأساسي في قاعدة واحدة ويقرأ ألوان علامة التبويب في القاعدتين التاليتين

.ma-btn {
  background: #652dd9;
  color: #ffffff;
}

.ma-btn {
  background: {{ button_states.normal.bg }};
  color: {{ button_states.normal.text }};
}

.ma-btn:hover {
  background: {{ button_states.hover.bg }};
  color: {{ button_states.hover.text }};
}

القاعدة الأولى هي احتياطي. حتى يختار المحرر لونًا، لا يطبع الرمز المميز شيئًا ويصبح السطر background: ;. تتخطى المتصفحات هذا السطر غير الصالح، بحيث تظل الألوان من القاعدة الأولى في مكانها.

فقط المسار الكامل يعمل. في الاختبار، {{ bg }}, {{ hover.bg }} و {{ button_states.hover }} كل شيء لم يطبع شيئا، في حين {{ button_states.hover.bg }} طباعة اللون. إذا خرجت قيمة فارغة، فتحقق من ثلاثة أجزاء وقم بالتهجئة الدقيقة أولاً.

انقر حفظ الإعدادات عندما تنتهي.

استخدم عنصر التحكم في علامات التبويب في Elementor #

أضف عنصر واجهة المستخدم إلى صفحة، أو أعد تحميل المحرر إذا كانت الصفحة مفتوحة بالفعل. حدد عنصر واجهة المستخدم وافتح أسلوب علامة التبويب. يعرض القسم الخاص بك شريط علامات التبويب مع فتح علامة التبويب العادية.

اضبط الألوان على علامة التبويب عادي، ثم انقر فوق تحوم وقم بتعيين الزوج الثاني. حرك الماوس فوق الزر الموجود في المعاينة للتحقق من ألوان التمرير.

حالات الاستخدام الشائعة #

• الألوان العادية والتمريرية للأزرار والبطاقات والروابط.
• الأنماط النشطة وغير النشطة للمرشحات والتبديلات وعناصر القائمة.
• الإصدارات الفاتحة والداكنة للمكون، محررة من قسم واحد.
• يتم تقسيم المحتوى إلى مجموعات، مثل علامة التبويب الأمامية والخلفية على البطاقة القابلة للطي، مع وجود حقول نصية ووسائط في كل منها.

نصائح للعمل مع حقل علامات التبويب #

• اختر اسم حقل علامات التبويب وأسماء علامات التبويب أولاً. إعادة التسمية إما لاحقًا تعني تحديث كل رمز مميز يستخدمها.
• إعادة استخدام أسماء الحقول عبر علامات التبويب. normal.bg و hover.bg أسهل في القراءة من اسمين غير مرتبطين.
• تجنب تغيير تسمية الحقل بمجرد ظهور الأداة على الصفحات المباشرة. يقوم Elementor بتخزين القيم المحفوظة ضمن مفتاح تم إنشاؤه من الملصق، بحيث يمكن للتسمية الجديدة أن تجعل القيم الموجودة تختفي من تلك الصفحات.
• ضع الأنماط الافتراضية في القاعدة قبل قاعدة الرمز المميز، بحيث لا تؤدي القيمة الفارغة إلى كسر التصميم أبدًا.
• أعط فصولك بادئة (مثل ma-btn). ينطبق CSS من علامة التبويب CSS الخاصة بالعنصر واجهة المستخدم على الصفحة بأكملها، لذا فإن الأسماء العامة مثل .button يمكن أن تتعارض مع أنماط أخرى.
• للحصول على مجموعة إعدادات تشغيل/إيقاف واحدة بدلاً من علامات التبويب، راجع حقل تبديل Popover. بالنسبة للقائمة، يمكن للمحرر إضافة صفوف إليها، استخدم مجال المكرر.

الأسئلة المتداولة #

إلتحاق بالركب #

قم بتسمية حقل علامات التبويب وعلامات التبويب الخاصة به، وأضف الحقول إلى كل علامة تبويب، واقرأها بها {{ tabs_name.tab_name.field_name }} في HTML أو CSS الخاص بك. احتفظ بقاعدة احتياطية للقيم الفارغة وقم بتسوية الأسماء قبل تشغيل الأداة. ال مجال اللون يغطي DOC التحكم في الألوان المستخدم في هذا المثال، و التسعير يوضح ما تتضمنه كل خطة.