صالة عرض

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

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

ماذا يفعل حقل المعرض #

• يضيف مربع معرض إلى لوحة عنصر واجهة المستخدم الخاص بك في Elementor. يختار المحررون عدة صور من مكتبة الوسائط دفعة واحدة.
• يتم تخزين الصور كقائمة، بالترتيب الذي رتبها المحرر. كل صورة لديها id و أ url.
• يقوم القالب الخاص بك بطباعة القائمة باستخدام أ {% for %} حلقة.
• التخطيط متروك لـ CSS الخاص بك. تقوم الحلقة بطباعة العناصر وتقوم شبكة أو حاوية مرنة بترتيبها.

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

قبل أن تبدأ #

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

كيفية إضافة حقل المعرض #

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

تم شرح خيارات حقل المعرض #

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

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

تعمل الإعدادات الشائعة بشكل أكبر كما تفعل في المجالات الأخرى.

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

المعرض هو قائمة، لذلك {{ photos }} لا شيء مفيد في مطبوعاتها الخاصة. قم بالتكرار فوقها وطباعة كل صورة داخل الحلقة

{% if photos %}
<div class="photo-grid">
  {% for img in photos %}
    {% if img.url %}
      <figure class="photo-cell">
        <img src="{{ img.url }}" alt="">
      </figure>
    {% endif %}
  {% endfor %}
</div>
{% endif %}

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

ترتيب العناصر في علامة التبويب CSS. تقوم هذه الشبكة بإنشاء ثلاثة أعمدة متساوية وتحذف كل صورة بنفس الشكل

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.photo-cell { margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

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

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

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

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

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

• شبكات الصور والمحفظة.
• جدران الشعار للعملاء أو الشركاء.
• أشرطة تمرير الصور، مع طباعة الحلقة شريحة واحدة لكل صورة.
• قبل وبعد أو مجموعات صور المنتج داخل البطاقة.

نصائح للعمل مع حقل المعرض #

• قم دائمًا بلف العلامات {% if img.url %} داخل الحلقة، لذلك لا تعرض الأداة الجديدة مربعات الصور الفارغة.
• يستخدم aspect-ratio و object-fit: cover لذلك تصطف الصور بأحجام مختلفة.
• دع CSS يقرر الأعمدة. تقوم الشبكة بتغليف أي عدد من الصور دون تغيير القالب.
• أضف alt سمة. تمنحك الحلقة معرف الصورة إذا كنت بحاجة إلى طباعة تعليق أو نص بديل من حقل آخر.
• للحصول على صورة واحدة، استخدم المجال الإعلامي. بالنسبة للصور التي يحتاج كل منها إلى نص أو رابط خاص به، استخدم مجال المكرر.

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

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

أضف حقل المعرض، وقم بالتكرار فوقه {% for %}، تخطي العناصر الفارغة مع {% if img.url %}، ودع شبكة CSS تتعامل مع التخطيط. يقوم المحررون بعد ذلك بإضافة الصور وإزالتها وإعادة ترتيبها من Elementor. انظر دليل بناء جملة غصين لمزيد من الحلقات والشيكات، و التسعير لما تتضمنه كل خطة.