تبديل المنبثقة

ال حقل تبديل Popover هو مفتاح يفتح نافذة منبثقة صغيرة لعناصر التحكم الفرعية عند تشغيله. يستخدم Elementor نفس النمط لمجموعات الميزات الاختيارية الخاصة به، وداخل الإضافات الرئيسية منشئ القطعة إنه يقوم بنفس المهمة بالنسبة لعناصر واجهة المستخدم المخصصة الخاصة بك: تظل مجموعة الإعدادات ذات الصلة مخفية خلف مفتاح تبديل واحد بدلاً من مزاحمة اللوحة بقسم إضافي كامل.

يدعم Popover Toggle شروط مثل كل عنصر تحكم، وكل حقل داخل المنبثق يحصل على رمز مميز مدمج خاص به {{ toggle_field }}، المقدمة من محرك قالب بناء جملة الغصين. يغطي كلا الدليلين الإعداد والقيود.

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

ما يفعله حقل Popover Toggle #

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

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

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
• أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو أداة شعار الصورة مع تراكب ألوان اختياري: مفتاح تبديل واحد يسمى overlay، طفل ملون واحد اسمه color.

كيفية إضافة حقل تبديل Popover #

في محرر Widget Builder، قم بتمرير لوحة الحقول الموجودة على اليسار حتى تجد تبديل المنبثقة الحقل، مدرج مع الحقول الهيكلية الأخرى مثل علامات التبويب والمكرر.

اسحبه إلى قسم أسفل محتوى أو أسلوب علامة التبويب، أينما تنتمي الإعدادات الاختيارية. بمجرد هبوطه، تفتح خيارات الحقل على اليسار، والعمل الرئيسي هو تحديد الحقول الفرعية التي سيحتفظ بها المنبثق.

تم شرح خيارات حقل التبديل Popover #

• ملصق: النص الموجود بجوار التبديل في Elementor، على سبيل المثال “Overlay”.
• اسم: المعرف الفريد للتبديل والحروف والأرقام والتسطير فقط، على سبيل المثال overlay. أسماء الأطفال مبنية عليه، لذا اجعله قصيرًا.
• التسمية قيد التشغيل/التسمية معطلة: الحالتان الموضحتان على المفتاح، مثل “Yes” و“No”.
• قيمة الإرجاع: القيمة المخزنة أثناء تشغيل التبديل، “yes” افتراضيًا. يقوم إيقاف تخزين سلسلة فارغة.
• الحقول المنبثقة: يتحكم الطفل داخل النافذة المنبثقة. يُسمح بمعظم أنواع حقول القيمة؛ يحتوي مثالنا على حقل لون واحد مسمى color.
• يغطي الوصف وإظهار الملصق والفاصل والشروط خيارات العرض المعتادة.

اقرأ التبديل وأطفاله في القالب الخاص بك #

تغطي قاعدتان للتسمية كل ما ينتجه هذا الحقل.

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

{% if overlay %} ... {% endif %}

لاحظ أن القيمة المخزنة هي سلسلة قيمة الإرجاع، “yes” افتراضيًا، وليست منطقية. اختبار الصدق بالطريقة التي يفعلها المثال؛ مقارنة الحقل بالحقيقي لا يتطابق أبدًا.

كل طفل متاح كاسم الوالدين واسم الطفل مع الشرطة السفلية. ال color طفل ال overlay يصبح المنبثقة overlay_color. مجتمعة، تبدو طبقة تراكب الشعار هكذا في لوحة HTML:

<div class="banner-media">
  <img src="{{ banner_image }}" alt="">
  {% if overlay %}
  <div class="banner-overlay" style="background: {{ overlay_color }}"></div>
  {% endif %}
</div>

قم بإيقاف التشغيل، ولا يتم عرض div التراكب على الإطلاق. عند التشغيل، يظهر div بأي لون يختاره المحرر. أضف المزيد من الأطفال ويتبع كل منهم نفس النمط: طفل اسمه opacity سوف تقرأ كما {{ overlay_opacity }}.

انتبه: لا يوجد تدوين نقطي هنا. {{ overlay.color }} يتم حلها إلى لا شيء، لأن الأطفال يتم تسويتهم إلى أسماء متصلة بالشرطة السفلية، وليست متداخلة تحت الأصل. إذا خرجت قيمة الطفل فارغة، فتحقق من الاسم المؤلف أولاً.

استخدم Popover Toggle في Elementor #

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

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

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

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

نصائح للعمل مع حقل Popover Toggle #

• التفاف العلامات التابعة في {% if parent %}. بيت القصيد من التبديل هو أن الأطفال لا يهمون إلا عندما يكونون قيد التشغيل؛ يجب أن يعكس القالب ذلك.
• قم بتأليف أسماء الأطفال بشرطة سفلية. الوالد overlay زائد الطفل color يكون {{ overlay_color }}أبدا {{ overlay.color }}.
• إبقاء أسماء الوالدين قصيرة. يكرر كل رمز طفل اسم الوالدين، و {{ overlay_color }} يقرأ أفضل من {{ banner_image_overlay_settings_color }}.
• استخدمه للمجموعات الاختيارية حقًا. تنتمي الإعدادات التي تحتاجها الأداة دائمًا إلى اللوحة المفتوحة؛ المنبثق مخصص للميزات في بعض الأحيان.
• إعطاء الأطفال افتراضيات معقولة. في اللحظة التي ينقلب فيها التبديل، يجب أن تبدو الميزة مقصودة وليست غير مصممة.

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

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

يحافظ حقل تبديل Popover الخاص بـ Widget Builder على لوحة عنصر واجهة المستخدم صادقة: تظل عناصر التحكم اليومية مرئية، وتنتظر المجموعة الاختيارية خلف المفتاح. سلكها مع {% if parent %} حول العلامات والرموز المرتبطة بالشرطة السفلية للأطفال، ويتم تشغيل وإيقاف الميزة بشكل نظيف. بالنسبة للأنماط الهيكلية الأخرى، راجع مجال المكرر، الذي يتعامل مع القوائم بنفس الطريقة التي يتعامل بها هذا الحقل مع الخيارات. استكشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.