الاختيار البصري

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

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

ما يفعله مجال الاختيار المرئي #

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

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

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية لـ Elementor وMaster Addons Pro، وكلاهما نشط. ال دليل التثبيت إعداد الأغطية.
• صورة صغيرة لكل خيار. رسومات خطية بسيطة تبلغ حوالي 240 في 160 بكسل، محفوظة كـ PNG بخلفية شفافة، تبدو نظيفة على لوحة Elementor الداكنة.
• عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Team Showcase” بثلاثة تخطيطات: الشبكة والقائمة وتسليط الضوء.

كيفية إضافة حقل الاختيار المرئي #

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

شرح خيارات حقل الاختيار المرئي #

• ملصق هو النص الموجود أعلى البطاقات في Elementor، على سبيل المثال “Layout”.
• اسم هل المعرف الفريد للحقل ورمز القالب الخاص به، إذن team_layout يصبح {{team_layout}}. الحروف والأرقام والتسطير فقط.
• وصف يظهر تحت البطاقات في Elementor.
• خيارات يحمل صفًا واحدًا لكل بطاقة. مفتاح هي القيمة التي يحصل عليها القالب الخاص بك (احتفظ به قصيرًا وصغيرًا، مثل grid). عنوان أسماء البطاقة. انقر على صورة مربع لفتح نافذة تحديد صورة، أو تحميل ملف أو اختيار ملف من مكتبة الوسائط، ثم انقر فوق استخدم هذه الصورة. تضيف أيقونة الزائد صفًا ويزيل الصليب الأحمر صفًا.
• الأعمدة يضبط عدد البطاقات المناسبة في صف واحد، من 1 إلى 6. اكتب الرقم حتى لو كان المربع يظهر بالفعل 2. لا يتم حفظ الرقم الموضح حتى تقوم بتغييره، وبدون القيمة المحفوظة يضع Elementor بطاقة واحدة في كل صف.
• تبديل تم إدراجه في اللوحة، ولكن في اختباراتنا لم يحدث أي فرق. يمكن للمحررين دائمًا النقر فوق البطاقة المحددة مرة أخرى لمسحها.

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

انقر حفظ الإعدادات بعد إضافة الخيارات.

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

{{team_layout}} طباعة مفتاح البطاقة المحددة. أبسط طريقة لاستخدامها هي فئة المعدل:

<div class="ts-team ts-team--{{team_layout}}">
  ...
</div>

مع تحديد الشبكة، يتم عرض ذلك ts-team--grid. عندما يحتاج التخطيط إلى علامات مختلفة، تحقق من المفتاح باستخدام {% if %}. يوضح المثال سيرة ذاتية قصيرة فقط في تخطيط القائمة:

{% if team_layout == 'list' %}
  <p class="ts-bio">Leads brand and product design across every client project.</p>
{% endif %}

ثم اكتب مجموعة واحدة من قواعد CSS لكل مفتاح:

.ts-team--grid { grid-template-columns: repeat(3, 1fr); }
.ts-team--list { grid-template-columns: 1fr; }
.ts-team--spotlight { grid-template-columns: 1.4fr 1fr; }

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

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

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

يؤدي النقر فوق "قائمة" إلى تحويل الفريق إلى صفوف، و {% if %} يضيف Block السير:

تسليط الضوء يجعل العضو الأول أكبر:

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

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

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

نصائح للعمل مع مجال الاختيار المرئي #

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

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

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

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