ال مجال الاختيار البصري يعرض مجموعة من بطاقات الصور في لوحة عنصر واجهة المستخدم الخاص بك، واحدة لكل خيار، ويختار المستخدم من خلال النقر على الصورة المصغرة. إنه عنصر التحكم في منتقي التخطيط. حيث يقدم التحديد كلمات وأيقونات الاختيار، يعرض الاختيار المرئي صورة صغيرة لما يبدو عليه كل متغير بالفعل. داخل الإضافات الرئيسية منشئ القطعةوهذا يجعله مناسبًا بشكل طبيعي لقرارات الشبكة مقابل القائمة وأي متغير تشرحه لقطة الشاشة بشكل أسرع من الاسم.
يتم توصيل قيم خيار الاختيار المرئي مباشرة شروط، السماح لعناصر التحكم الأخرى باتباع التخطيط المحدد، وفي محرك قالب بناء جملة الغصين، أين {% if style == "grid" %} تبديل العلامات للمطابقة. كلا الدليلين يغطيان التفاصيل.
يتطابق عقد القالب مع حقول الاختيار الأخرى: القيمة هي مفتاح الخيار المحدد. ما يميز Visual Choice هو نمط الأسلاك الثاني، فئة البادئة، التي تغير فئة على غلاف عنصر واجهة المستخدم حتى يتمكن CSS الخاص بك من تبديل التخطيطات دون أن يذكر القالب الحقل على الإطلاق.
ما يفعله مجال الاختيار المرئي #
- يعرض بطاقات الصور القابلة للنقر في لوحة Elementor، يتم تحديد كل خيار بواسطة مفتاح وعنوان وصورة.
- يحمل مفتاح واحد من المجموعة المحددة، البطاقة المحددة حاليًا.
- يضع البطاقات في الأعمدة، ثلاثة لكل صف بشكل افتراضي، قابلة للتعديل من خلال خيار الأعمدة.
- يغذي القوالب المفتاح المحدد لفئات المعدل و
{% if %}كتل. - اختياريًا، يتم تعيين فئة المجمع من خلال خيار فئة البادئة، حتى يتمكن CSS وحده من تبديل التخطيط.
إذا كنت جديدًا في إنشاء عناصر واجهة المستخدم، فابدأ بـ نظرة عامة على منشئ القطعة أولاً.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو أداة أعضاء الفريق مع متغيرين للتخطيط، شبكة مكونة من 3 أعمدة وقائمة مكدسة، يتم اختيارها من خلال البطاقات المصغرة.
كيفية إضافة حقل الاختيار المرئي #
يجد الاختيار البصري في لوحة الحقول الموجودة على يسار محرر Widget Builder، مجمعة مع حقول الاختيار الأخرى.
اسحبه إلى قسم أسفل محتوى أو أسلوب علامة التبويب. عادةً ما يجلس منتقي التخطيط أولاً في اللوحة، أعلى علامة تبويب المحتوى، لذلك يختار المحررون بنية قبل ملء المحتوى. بمجرد وصول الحقل، تفتح خياراته على اليسار.
شرح خيارات حقل الاختيار المرئي #
- ملصق: النص الموضح أعلاه البطاقات في Elementor، على سبيل المثال “Layout”.
- اسم: المعرف الفريد للحقل والحروف والأرقام والتسطير فقط، على سبيل المثال
team_layout. - خيارات: كل خيار عبارة عن مفتاح بالإضافة إلى عنوان وصورة. تصبح الصورة البطاقة القابلة للنقر عليها؛ العنوان يسميها. تظل المفاتيح قصيرة وآمنة لـ CSS:
grid,list. - الأعمدة: كم عدد البطاقات الموجودة في كل صف في اللوحة، 3 بشكل افتراضي. تتم قراءة بطاقتين كبيرتين بشكل أفضل في عمودين.
- فئة البادئة: يقوم عنصر جذع الفئة بإلحاق المفتاح المحدد بغلاف عنصر واجهة المستخدم ووضعه عليه. مع
team-layout-والمفتاحgrid، يحمل الغلافteam-layout-grid. - الافتراضي: المفتاح المحدد عندما تظهر الأداة لأول مرة على الصفحة.
- الوصف، إظهار التسمية، الفاصل: إعدادات العرض القياسية، بالإضافة إلى شروط عرض الحقل فقط عندما يكون لعنصر تحكم آخر قيمة معينة.
قم بتوصيل الاختيار المرئي بأداة واجهة المستخدم الخاصة بك #
نمطين من الأسلاك. اختر واحدًا لكل حقل.
النمط أ: أنماط القالب. يقوم الرمز المميز بطباعة المفتاح المحدد، لذلك كل شيء بدءًا من حدد الحقل ينطبق. فئة المعدل:
<div class="team team--{{ team_layout }}">
...
</div>أو فرع هيكلي عندما تحتاج المتغيرات إلى علامات مختلفة:
{% if team_layout == 'list' %}
<ul class="team-list"> ... </ul>
{% else %}
<div class="team-grid"> ... </div>
{% endif %}النمط ب: فئة البادئة. املأ خيار فئة البادئة، على سبيل المثال team-layout-ويكتب العنصر team-layout-grid أو team-layout-list على غلاف الأداة بينما ينقر المستخدم على البطاقات. ثم يستهدف CSS الخاص بك الفئة المدمجة
.team-layout-grid .member { /* grid card rules */ }
.team-layout-list .member { /* stacked row rules */ }لا يشير القالب أبدًا إلى الحقل على الإطلاق؛ تقوم فئة المجمع بالتبديل. يؤدي هذا إلى الاحتفاظ بـ HTML في كتلة ترميز واحدة ويدفع كل متغير إلى ورقة الأنماط. عندما يتغير العرض التقديمي فقط، يكون هذا عادةً هو القطع الأنظف.
احترس من خلط النمطين في حقل واحد. قالب مشروط يفترض grid بينما يتم تعيين فئة البادئة في وقت واحد team-layout-list هما مصدران للحقيقة، وسوف ينجرفان، عادة بعد أشهر عندما يقوم شخص ما بتحرير جانب واحد وينسى وجود الجانب الآخر. قرر ما إذا كان هذا الحقل يتحدث من خلال القالب أو من خلال فئة الغلاف، ثم التزم به.
استخدم عنصر التحكم Visual Choice في Elementor #
أضف عنصر واجهة المستخدم المخصص الخاص بك إلى صفحة في Elementor، وأعد تحميل المحرر إذا كانت الصفحة مفتوحة بالفعل. يعرض عنصر التحكم بطاقات الخيارات الخاصة بك في اللوحة، ويتم تمييز البطاقة المحددة.
انقر فوق بطاقة ويتقلب التخطيط في المعاينة، إما من خلال فئة المعدل أو من خلال فئة البادئة الموجودة على الغلاف، أيًا كانت الأسلاك التي اخترتها. نظرًا لأن كل بطاقة تعرض المتغير نفسه، يختار المحررون التخطيط الصحيح دون قراءة أي شيء.
حالات الاستخدام الشائعة #
- تخطيطات الشبكة مقابل القائمة لعناصر واجهة المستخدم الخاصة بالفريق والمحفظة والنشر.
- متغيرات نمط البطاقة حيث تُظهر الصور المصغرة التصميمات الفعلية المعبأة والمتراكبة والمقسمة.
- ترتيبات الرأس مثل متغيرات البطل أعلى الصورة، والصورة اليسرى، والنص فقط.
- المنزلق مقابل العروض التقديمية الثابتة من نفس مجموعة المحتوى.
- حزم القالب داخل عنصر واجهة مستخدم واحد، ثلاثة أشكال مصممة مسبقًا يختارها العميل حسب الصورة.
نصائح للعمل مع مجال الاختيار المرئي #
- استخدم لقطات الشاشة الحقيقية كصور اختيارية. عرض صغير لكل متغير يتفوق على أيقونة مجردة؛ البطاقة هي الوثائق.
- اختر نمط أسلاك واحد لكل حقل. أنماط القالب أو فئة البادئة، وليس كليهما، أو سيختلف الاثنان في النهاية.
- تدخل المفاتيح في أسماء الفئات، لذا احتفظ بها في شكل رخويات.
gridوlist، وليس “Grid Layout”. - إنهاء البادئة بفاصل.
team-layout-زائدgridيقرأ كماteam-layout-grid؛ بدون الواصلة التي تحصل عليهاteam-layoutgrid. - قم بمطابقة الأعمدة مع عدد بطاقاتك. خياران عبر 3 أعمدة يتركان فجوة؛ قم بتعيين الأعمدة على 2 وتملأ الصف.
- احجزه للاختلافات البصرية. إذا كانت الخيارات تختلف في السلوك بدلاً من المظهر، فإن التحديد بتسميات واضحة يخدم المحررين بشكل أفضل.
الأسئلة المتداولة #
ما هو حقل الاختيار المرئي في Master Addons Widget Builder؟
يضيف حقل الاختيار المرئي منتقي بطاقة الصورة إلى عنصر واجهة مستخدم Elementor المخصص. كل خيار عبارة عن مفتاح بعنوان وصورة مصغرة؛ ينقر المستخدم على البطاقة وتتفاعل الأداة الخاصة بك، إما من خلال المفتاح المحدد في القالب أو من خلال فئة البادئة الموضوعة على غلاف الأداة.
كيف يعمل فصل البادئة؟
قمت بتعيين أصل فئة في خيار فئة البادئة، على سبيل المثال team-layout-. يقوم العنصر بإلحاق المفتاح المحدد ويضع النتيجة، مثل team-layout-grid، على عنصر غلاف عنصر واجهة المستخدم. يستهدف CSS الخاص بك الفئة المدمجة لتبديل التخطيطات، ولا يحتاج القالب إلى رمز مميز على الإطلاق.
هل ما زلت أحصل على رمز القالب؟
نعم. {{ team_layout }} طباعة المفتاح المحدد، وبالتالي فئات المعدل و {% if team_layout == 'list' %} تعمل الشروط الشرطية تمامًا كما تفعل مع التحديد. فئة البادئة هي بديل وليست بديلاً.
كم عدد البطاقات المناسبة على التوالي؟
ثلاثة بشكل افتراضي. يغير خيار الأعمدة ذلك، بحيث يمكن وضع صورتين صغيرتين كبيرتين للتخطيط كزوج مكون من عمودين ويمكن تجميع ستة عينات صغيرة في 3 أعمدة على صفين.
متى يجب أن أستخدم Visual Choice بدلاً من التحديد أو الاختيار؟
عندما تحدد الصورة الخيار بشكل أسرع من كلمة أو أيقونة. متغيرات التخطيط والتصميم هي الحالة الكلاسيكية. بالنسبة للمجموعات المرئية القصيرة التي يغطيها رمز eicon أو محاذاته أو اتجاهه، فإن اختر الحقل أخف وزنا؛ للقوائم اللفظية أو الطويلة، استخدم التحديد.
هل تستخدم القيمة عنوان الخيار أو المفتاح؟
المفتاح، كما هو الحال مع كل حقل اختيار. توجد عناوين وصور للوحة؛ تستخدم المقارنات وفئات المعدلات ولاحقة فئة البادئة المفتاح الذي حددته.
إلتحاق بالركب #
يتيح حقل الاختيار المرئي لـ Widget Builder للمحررين اختيار التخطيط من خلال النظر إليه: بطاقات الصور في اللوحة، والمفتاح في القالب، وخيار فئة البادئة عندما تفضل تبديل التخطيطات من CSS وحده. يقترن بشكل طبيعي مع اختر الحقل. تتعامل الصور المصغرة مع اللقطات الهيكلية الكبيرة، وأزرار الأيقونات مع التعديلات الصغيرة. اكتشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.
