يختار

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

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

ما يفعله الحقل تحديد #

• يضيف منسدلة قياسية إلى لوحة عنصر واجهة المستخدم الخاص بك في Elementor.
• يتيح للمحرر اختيار خيار واحد من القائمة التي تحددها.
• يحفظ الخيارات مفتاح (على سبيل المثال outlined)، وليس التسمية التي يراها المحرر.
• يطبع هذا المفتاح أينما تضع رمزه المميز، مثل {{ layout_style }}، حتى تتمكن من استخدامه كفئة أو التحقق منه {% if %}.

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

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية للعنصر مثبتة ونشطة. ال دليل التثبيت إعداد الأغطية.
• عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Plan Card” مع حقلين محددين: layout_style (مُحاصر، الحد الأدنى، مُحصر) في علامة التبويب "النمط" و badge (لا توجد شارة، الأكثر شيوعًا، الجديد) في علامة التبويب المحتوى.

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

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

التحديد يحمل خيارًا واحدًا من قائمة قصيرة. إذا احتاج المحررون إلى البحث في قائمة طويلة أو اختيار أكثر من خيار، فاستخدم حدد2 بدلا من ذلك، وهو حقل للمحترفين.

حدد خيارات الحقل الموضحة #

• ملصق: النص الموجود بجوار القائمة المنسدلة في Elementor، على سبيل المثال “Layout Style”.
• اسم: المعرف الفريد للحقل واسم الرمز المميز الخاص به. استخدم الحروف والأرقام والتسطير فقط، على سبيل المثال layout_style.
• وصف: تلميح يظهر أسفل القائمة المنسدلة في Elementor.
• خيارات: صف واحد لكل اختيار. المربع الأيسر هو مفتاح يتلقى القالب الخاص بك، والمربع الأيمن هو ملصق يرى المحررون. استخدم الصليب الأحمر لإزالة صف وزر الزائد لإضافة واحد.
• القيمة الافتراضية: يبدأ الخيار نسخة جديدة من الأداة بـ. يعرض القائمة المنسدلة التسميات، لكن الحقل يحفظ المفتاح.

يأتي حقل التحديد الجديد مع ثلاثة صفوف من العينات value-1 إلى value-3 مع التسميات الخيار 1 إلى الخيار 3. استبدلها بالمفاتيح والتسميات الخاصة بك قبل استخدام الأداة.

احتفظ بالمفاتيح قصيرة وصغيرة وبدون مسافات، مثل boxed أو most_popular. وينتهي بهم الأمر في أسماء الفئات والمقارنات. إذا تركت القيمة الافتراضية فارغة، فستبدأ الأداة بالخيار الأول في القائمة.

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

استخدم الاختيار في القالب الخاص بك #

يستخدم HTML لبطاقة الخطة كلا الحقلين المحددين بالطريقتين الأكثر شيوعًا:

<div class="plan plan--{{ layout_style }}">
  {% if badge == 'popular' %}
  <span class="plan-badge">Most Popular</span>
  {% elseif badge == 'new' %}
  <span class="plan-badge plan-badge--new">New</span>
  {% endif %}
  <p class="plan-name">{{ plan_name }}</p>
  <p class="plan-price">{{ plan_price }}<span>/month</span></p>
  <a class="plan-button" href="#">Get started</a>
</div>

فئات التعديل #

plan--{{ layout_style }} يصبح plan--boxed, plan--minimal أو plan--outlined. كل متغير هو بعد ذلك قاعدة قصيرة في لوحة CSS، ويظل HTML كما هو

.plan--boxed { background: #fff; box-shadow: 0 12px 32px rgba(29, 27, 76, .14); }
.plan--minimal { background: transparent; }
.plan--outlined { background: #fff; border: 2px solid #7c3aed; }

علامات مختلفة لكل خيار #

عندما يحتاج أحد الخيارات إلى HTML مختلف، قارن المفتاح بـ {% if %}. {% elseif %} و {% else %} اعمل ايضا. في المثال، none لا يتطابق مع أي من الشيكين، لذلك لا تتم طباعة أي شارة.

قارن دائمًا بالمفتاح. {% if badge == 'popular' %} المباريات، بينما {% if badge == 'Most Popular' %} لا يحدث أبدا ولا يعطي أي خطأ. إذا لم يتم تشغيل الشيك مطلقًا، فانظر إلى تهجئة المفتاح أولاً.

المحدد والتحكم المستجيب #

• محدد يكتب دائما color: {{VALUE}}; لهذا الحقل، ولا يوجد مربع لتغيير الخاصية. مع مفاتيح مثل boxed القاعدة لا تفعل شيئا. إنه يساعد فقط عندما تكون مفاتيحك ملونة: في اختباراتنا، مفاتيح مثل #7c3aed و #0ea5e9 مع محدد .plan-price هل لون السعر. لأي شيء آخر، اترك المحدد فارغًا واستخدم الفئات.
• التحكم المستجيب يتيح للمحررين اختيار خيار مختلف لكل جهاز. لا تصل هذه الاختيارات لكل جهاز إلى الصفحة إلا من خلال قاعدة المحدد أعلاه. يقوم الرمز المميز بطباعة اختيار سطح المكتب، لذا اترك التحكم المستجيب معطلاً عند استخدام القيمة الموجودة في القالب الخاص بك.

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

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

فيما يلي نفس بطاقة الخطة مع ثلاث مجموعات من نمط التخطيط والشارة

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

• متغيرات نمط البطاقة أو الزر أو القسم.
• شارات أو أشرطة مثل Sale أو New أو Most Popular.
• علامة العنوان أو نسبة الصورة أو اختيارات عدد الأعمدة.
• فرز الترتيب أو مصدر البيانات لعنصر واجهة المستخدم في القائمة.

نصائح للعمل مع الحقل حدد #

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

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

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

أضف حقل تحديد، واستبدل صفوف العينات بمفاتيح قصيرة وتسميات واضحة، وقم بتعيين الإعداد الافتراضي. ثم قم بطباعة المفتاح كفئة لمتغيرات النمط، أو تحقق منه {% if %} عندما يتغير الترميز. للاطلاع على خيارات قابلة للبحث أو متعددة، راجع حدد2و تحقق التسعير لما تتضمنه كل خطة.