ال اختر الحقل يعرض صفًا من أزرار الأيقونات في لوحة عنصر واجهة المستخدم الخاص بك، وهو نفس عنصر التحكم الذي يستخدمه Elementor لمحاذاة النص: ثلاثة أو أربعة أزرار، واحد نشط في كل مرة. داخل الإضافات الرئيسية منشئ القطعة، إنه الاختيار الصحيح عندما تكون الخيارات قليلة ويقول الرمز أكثر من كلمة. المحاذاة هي المثال الواضح، ولكن مفاتيح الموضع والاتجاه تناسب نفس القالب.
تعمل مفاتيح خيارات التحكم في الاختيار مباشرة مع شروط، لذلك يمكن أن تظهر حقول أخرى بناءً على الخيار المحدد، ومع محرك قالب بناء جملة الغصين، حيث مثل الشيك {% if align == "center" %} تبديل العلامات الخاصة بك. كلا الدليلين يغطيان التفاصيل.
مثل التحديد، القيمة التي يتم تسليمها إلى القالب الخاص بك هي مفتاح الخيار، وليس عنوانه. ما يضيفه الاختيار في الأعلى: رمز لكل خيار، وسلوك تبديل اختياري، ومسار مباشر إلى آلية محددات Elementor لاختيارات CSS النقية مثل المحاذاة.
ما يفعله حقل الاختيار #
- يعرض صفًا من أزرار الأيقونات في لوحة Elementor، واحد لكل خيار تحدده.
- يحمل مفتاح واحد من المجموعة المحددة، يتم تنشيط زر واحد بالضبط في كل مرة.
- يزاوج كل خيار مع eicon، مثل
eicon-text-align-left، لذلك يقرأ الاختيار في لمحة. - تبديل اختياريًا: مع تشغيل خيار التبديل، يؤدي النقر فوق الزر النشط مرة أخرى إلى إلغاء تحديده وتصبح القيمة فارغة.
- يدعم العلم المستجيب ويمكن كتابة CSS مباشرة من خلال المحدد الموضح أدناه.
إذا كنت جديدًا في إنشاء عناصر واجهة المستخدم، فابدأ بـ نظرة عامة على منشئ القطعة أولاً.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو أداة شهادة مع منتقي “Quote Alignment”: يسار، وسط، يمين.
كيفية إضافة حقل اختيار #
في محرر Widget Builder، ابحث عن يختار الحقل الموجود في اللوحة الموجودة على اليسار، مجمعًا مع حقول الاختيار الأخرى.
اسحبه إلى قسم أسفل أسلوب علامة التبويب؛ إعدادات نوع المحاذاة تعيش بشكل طبيعي هناك. بمجرد هبوطه، تفتح خيارات الحقل على اليسار.
اختر خيارات الحقل الموضحة #
- ملصق: النص الموضح بجوار الأزرار في Elementor، على سبيل المثال “Quote Alignment”.
- اسم: المعرف الفريد للحقل والحروف والأرقام والتسطير فقط، على سبيل المثال
quote_align. - خيارات: كل خيار عبارة عن مفتاح بالإضافة إلى عنوان وأيقونة. يصبح العنوان هو تلميح أداة الزر والرمز عبارة عن فئة eicon، على سبيل المثال
eicon-text-align-leftللمفتاحleft. - تبديل: عند التشغيل، يؤدي النقر فوق الزر النشط مرة أخرى إلى إلغاء تحديده وتصبح قيمة الحقل فارغة. اتركه إذا كانت الأداة تحتاج دائمًا إلى قيمة.
- الافتراضي: المفتاح نشط عندما تظهر الأداة لأول مرة على الصفحة.
- مستجيب: يضيف رمز الجهاز بحيث يمكن أن تختلف المحاذاة لكل نقطة توقف.
- الوصف، إظهار التسمية، الفاصل: إعدادات العرض القياسية، بالإضافة إلى شروط عرض الحقل فقط عندما يكون لعنصر تحكم آخر قيمة معينة.
قم بتوصيل الاختيار بالقالب أو المحدد الخاص بك #
هناك نوعان من أنماط الأسلاك. مثال المحاذاة يعمل مع أي منهما.
أنماط القالب. يقوم الرمز المميز بطباعة المفتاح المحدد، وبالتالي يتم ترحيل أنماط التحديد دون تغيير. تحتفظ فئة المعدل بالمتغيرات الموجودة في علامة التبويب CSS الخاصة بك
<blockquote class="quote align--{{ quote_align }}">
{{ quote_text }}
</blockquote>مع .align--center { text-align: center; } والأصدقاء في علامة التبويب CSS. الشروط تعمل أيضا: {% if quote_align == 'center' %}. كما هو الحال مع التحديد، قارنه بالمفتاح، وليس العنوان أبدًا.
خيار المحدد. يمكن لـ Choose أيضًا كتابة CSS من خلال آلية محددات Elementor، وتخطي القالب بالكامل. هناك شيء واحد يجب معرفته قبل الاعتماد عليه: الخاصية الافتراضية التي يدخلها Elementor لمحدد Choose هي color: {{VALUE}}، وهو عديم الفائدة للمحاذاة. يجب أن يوضح إدخال المحددات المخصصة الخاصية العقارية
text-align: {{VALUE}};يجب أن تكون المفاتيح قيم CSS صالحة (left, center, right بالفعل)، و {{WRAPPER}} يتم إلحاقه تلقائيًا بهذا النوع من التحكم في القيمة، بحيث تظل الأنماط محددة لعنصر واجهة المستخدم الخاص بك دون كتابته.
احترس من النسخة الصامتة من هذا الخطأ. سوف يكتب "اختيار متصل بمحدد يحتفظ بالخاصية الافتراضية" بسعادة color: center، إعلان غير صالح يسقط المتصفح بدون كلمة واحدة. لا يوجد تحذير لوحدة التحكم، ولا تلميح مرئي. إذا بدا أن الأزرار لا تفعل شيئًا، فافحص CSS الذي تم إنشاؤه قبل لمس تكوين الحقل.
استخدم عنصر التحكم "اختيار" في Elementor #
أضف عنصر واجهة المستخدم المخصص الخاص بك إلى صفحة في Elementor، وأعد تحميل المحرر إذا كانت الصفحة مفتوحة بالفعل. يظهر عنصر التحكم كصف من أزرار الأيقونات أسفل التسمية الخاصة بك، مع تنشيط زر المفتاح الافتراضي.
انقر فوق الزر وستقوم المعاينة بالتحديثات مرة واحدة. مع تشغيل Toggle، يؤدي النقر فوق الزر النشط إلى مسح الاختيار، ويعود عنصر واجهة المستخدم إلى ما تحدده علامة التبويب CSS الخاصة بك. مع تشغيل سريع الاستجابة، يتيح رمز الجهاز لكل نقطة توقف الاحتفاظ باختيارها الخاص.
حالات الاستخدام الشائعة #
- محاذاة النص بالنسبة للعناوين والاقتباسات والتسميات التوضيحية، فإن موطن عنصر التحكم.
- موقف العنصر مثل الصورة اليسرى أو الصورة اليمنى في بطاقة الوسائط والنص.
- مفاتيح الاتجاه للقوائم الأفقية مقابل الرأسية والجداول الزمنية.
- إعدادات الحجم المسبقة مثل الصغيرة والمتوسطة والكبيرة المعينة لفئات التعديل.
- اختيارات جانب العرض بالنسبة للشارات والأشرطة، من أعلى اليسار إلى أسفل اليمين.
نصائح للعمل مع حقل الاختيار #
- احتفظ بها في خيارين أو ثلاثة أو أربعة خيارات. صف من سبعة أزرار أيقونات عبارة عن منسدلة ترتدي زيًا؛ استخدم التحديد بدلاً من ذلك.
- قم بمطابقة المفاتيح مع قيم CSS عند استخدام المحدد. مفاتيح مثل
leftوcenterاسقط مباشرة إلىtext-align: {{VALUE}}بدون طبقة ترجمة. - تحديد العقار في محددات مخصصة. الخاصية الافتراضية المحقونة هي
color: {{VALUE}}، والذي يناسب فقط خيارات الألوان الفعلية. - خطط للقيمة الفارغة إذا كان Toggle قيد التشغيل. يقوم الحقل غير المحدد بطباعة مفتاح فارغ، لذا
align--يجب أن تتحمل الفئات والشروط ذلك، أو تمنع التبديل. - قارن مع المفاتيح في الشروط. عنوان الخيار هو نص اللوحة فقط ولا يتطابق أبدًا
{% if %}. - استخدم الاستجابة للمحاذاة. المركز على الهاتف المحمول، واليسار على سطح المكتب هو عنصر تحكم واحد بدلاً من اثنين.
الأسئلة المتداولة #
ما هو حقل الاختيار في Master Addons Widget Builder؟
يضيف حقل الاختيار منتقي زر الرمز الخاص بـ Elementor إلى عنصر واجهة مستخدم مخصص: صف قصير من الأزرار، يتم تعريف كل منها بواسطة مفتاح وعنوان وأيقونة إلكترونية. يتلقى القالب مفتاح الخيار النشط، ويمكن للحقل بدلاً من ذلك كتابة خاصية CSS مباشرة من خلال المحدد.
ما هي الرموز التي يمكن أن تستخدمها أزرار الخيارات؟
Eicons، مجموعة أيقونات Elementor المضمنة، والتي تتم الإشارة إليها باسم الفئة مثل eicon-text-align-left. يقوم كل خيار بإقران مفتاحه بأيقونة إلكترونية واحدة وعنوان يظهر على شكل تلميح أداة الزر.
ماذا يحدث عندما ينقر المستخدم على الزر النشط مرة أخرى؟
مع تشغيل خيار التبديل، يتم إلغاء تحديد الزر وتصبح قيمة الحقل فارغة، مثل الشروط الشرطية {% if quote_align %} انتقل إلى false وقم بطباعة فئات المعدل فارغة. مع إيقاف التشغيل، يظل أحد الخيارات نشطًا دائمًا.
لماذا لا يفعل محدد الاختيار الخاص بي شيئًا؟
على الأرجح أن إدخال المحددات لا يزال يستخدم الخاصية الافتراضية التي تم إدخالها، color: {{VALUE}}، في حين أن مفاتيحك هي قيم مثل center. حدد الخاصية التي تقصدها بالفعل، على سبيل المثال text-align: {{VALUE}}، ويصبح الإعلان ساري المفعول.
هل يمكن لكل جهاز أن يكون له خياره الخاص؟
نعم. تمكين الاستجابة ويكتسب التحكم رمز جهاز Elementor، مما يسمح لكل من سطح المكتب والكمبيوتر اللوحي والهاتف المحمول بالاحتفاظ بمفتاح مختلف.
متى يجب أن أستخدم اختر بدلاً من تحديد؟
عندما تكون مجموعة الخيارات صغيرة ومرئية: المحاذاة، الموضع، الاتجاه. إذا كانت الخيارات تحتاج إلى كلمات لفهمها، أو تجاوزت القائمة أربعة أو خمسة إدخالات، أ حدد الحقل يقرأ بشكل أفضل في اللوحة.
إلتحاق بالركب #
يمنح حقل اختيار منشئ عناصر واجهة المستخدم قرارات مرئية صغيرة التحكم الذي تستحقه. توجد المفاتيح خلف أزرار الأيقونات، ويغذي الرمز المميز فئات المعدلات والشروط، ويتعامل مسار المحدد مع اختيارات خاصية واحدة مثل المحاذاة بمجرد تحديد خاصية CSS الحقيقية. بالنسبة لاختيارات التخطيط التي تحتاج إلى صورة مصغرة كاملة بدلاً من أيقونة، انتقل إلى مجال الاختيار البصري. اكتشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.
