وسائط

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

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

ماذا يفعل مجال الإعلام #

• فهو يضيف مربع صورة Elementor إلى لوحة عنصر واجهة المستخدم الخاص بك، باستخدام زر اختيار الصورة.
• يفتح "اختيار صورة" نافذة وسائط WordPress، حيث يقوم المحررون بتحميل ملف أو اختيار ملف من مكتبة الوسائط أو إدراج ملف من عنوان URL.
• يقوم الحقل بتخزين الصورة url, id و alt النص، والقالب الخاص بك يطبع أي شيء يحتاجه.
• وهو يعمل في علامة تبويب HTML وعلامة تبويب CSS، على سبيل المثال كصورة خلفية.

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

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية للعنصر مثبتة ونشطة. ال دليل التثبيت إعداد الأغطية.
• عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Profile Card” مع حقل وسائط مسمى profile_photo وحقل نصي للاسم.

كيفية إضافة حقل الوسائط #

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

شرح خيارات مجال الوسائط #

• ملصق هو النص الموجود أعلى مربع الصورة في Elementor، على سبيل المثال “Profile Photo”.
• اسم هل المعرف الفريد للحقل وبداية الرموز المميزة الخاصة به، إذن profile_photo يعطي {{ profile_photo.url }}. الحروف والأرقام والتسطير فقط.
• وصف يظهر أسفل مربع الصورة في Elementor.
• أنواع الوسائط يسرد الصور (الافتراضية)، والفيديو، والصوت، وPDF، وSVG، وجداول البيانات، والمستندات، والعروض التقديمية، والأرشيف. في اختباراتنا، لم يصل هذا الإعداد إلى Elementor. لا يزال الحقل الذي تم تعيينه على الفيديو يظهر كمنتقي صور عادي، لذا تعامل مع حقل الوسائط كحقل صورة.

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

اطبع الصورة في القالب الخاص بك #

يحتوي الحقل على عدة قيم، ويمكنك طباعة كل واحدة منها بنقطة

• {{ profile_photo.url }} هو عنوان URL لملف الصورة. {{ profile_photo }} يطبع من تلقاء نفسه نفس عنوان URL.
• {{ profile_photo.id }} هو معرف مكتبة الوسائط الخاصة بالصورة.
• {{ profile_photo.alt }} هو النص البديل الذي كانت الصورة موجودة في مكتبة الوسائط عندما اختارها المحرر.

التفاف <img> ضع علامة في الشيك، حتى لا يتم طباعة أي شيء بينما يكون الحقل فارغًا

{% if profile_photo.url %}
  <img class="profile-photo" src="{{ profile_photo.url }}" alt="{{ profile_photo.alt }}">
{% endif %}

يعمل الرمز المميز في علامة التبويب CSS أيضًا، على سبيل المثال لصورة الخلفية:

.profile-card {
  background-image: url('{{ profile_photo }}');
}

إذا لم يتم تطبيق أنماط الصور الخاصة بك، فاجعل المحدد أكثر تحديدًا. لدى Elementor قواعده الخاصة للصور الموجودة داخل عناصر واجهة المستخدم وفي اختباراتنا .profile-photo وحده لم ينتصر عليهم، بينما .profile-card .profile-photo فعل.

انقر حفظ الإعدادات عندما تنتهي.

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

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

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

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

• صور الملف الشخصي وبطاقات أعضاء الفريق.
• الشعارات في الرؤوس والتذييلات وقوائم العملاء.
• صور البطل واللافتة، ك <img> علامة أو خلفية CSS.
• صور المنتج أو الميزة داخل البطاقات.

نصائح للعمل في مجال الإعلام #

• حراسة دائما <img> علامة مع {% if profile_photo.url %} لذا فإن الحقل الفارغ لا يترك صورة مكسورة.
• يطبع {{ profile_photo.alt }} في السمة alt، وأضف نص alt في مكتبة الوسائط قبل اختيار الصورة.
• يستخدم object-fit: cover بعرض وارتفاع ثابتين عندما تحتاج الصور ذات الأشكال المختلفة إلى الاصطفاف.
• إعطاء قواعد الصورة فئتين، مثل .profile-card .profile-photo، لذا فإن أنماط الصور الخاصة بـ Elementor لا تتجاوزها.
• لعدة صور، استخدم مجال المعرض. بالنسبة للأيقونات أو رموز SVG، استخدم مجال الأيقونات.

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

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

أضف حقل الوسائط، واطبعه {{ field_name.url }} و {{ field_name.alt }} داخل {% if %} تحقق من أنماط الصور الخاصة بك وأعطها محددًا محددًا. يقوم المحررون بعد ذلك بالتقاط الصور أو تحميلها مباشرة من Elementor. للحصول على رابط يتماشى مع الصورة، أضف أ حقل URLو تحقق التسعير لما تتضمنه كل خطة.