عنصر واجهة المستخدم للمعرض القابل للتصفية - جعل الصور قابلة للتصفية
معرض ثابت يعرض الصور. يتيح المعرض القابل للتصفية للأشخاص العثور على ما يهتمون به. تمنح أداة معرض الصور القابلة للتصفية محفظتك أو كتالوج المنتجات أو مجموعة الصور شريط فئات في الأعلى. ينقر الزائرون على علامة تبويب، وتقوم الشبكة بالتصفية على الفور، ويمكن لكل عنصر أن يحمل عنوانًا وعنوانًا فرعيًا وزرين مصممين لـ “عرض التفاصيل” أو “Live Demo”.
الأداة مجانية في البرنامج الإضافي Master Addons وتعمل بدون Elementor Pro.
راجع علامات تبويب التصفية أثناء العمل
هذه الشبكة هي الأداة نفسها، وليست لقطة شاشة. توجد فوقها أربع فئات وعلامة تبويب الكل، والنقر فوق فئة يخفي كل عنصر لا يحمل هذا التصنيف. تعرض كل بطاقة هنا أيضًا عنوانًا وعنوانًا فرعيًا تم سحبهما من الحقول الخاصة بها.
- جميع القوائم
- شقق
- فلل
- منازل
- مكاتب
كوف ستريت لوفت
سريرين · حمام واحد · 940 قدم مربع بسعر 2450 دولارًا شهريًا
مارينا بوينت 8 ب
سرير واحد · حمام واحد · 680 قدم مربع 1890 دولارًا شهريًا
فيلا ريدجواي
4 سرير · 3 حمامات · حمام سباحة $1.24M
البيت الزجاجي على الدردار
3 أسرة · 2 حمام · 2،100 قدم مربع 580،000 دولار
صف بريكلان 12
3 سرير · 2 حمام · مرآب 520،000 دولار
ألدر كورت 4
سريرين · حمامين · حديقة مسورة 645000 دولار
أعمال الميناء، الطابق 3
4200 قدم مربع · 38 مكتبًا بسعر 6400 دولار شهريًا
استوديو الرصيف
1800 قدم مربع · 16 مكتبًا بسعر 2950 دولارًا شهريًاما يمكنك فعله باستخدام أداة المعرض القابلة للتصفية
تصفية الفئة مع التحكم الكامل
قم بتمكين شريط التصفية وشاهد الزوار أزرار الفئات أعلى المعرض: “All”، و“Branding”، و“Photography”، و“Web Design”، أيًا كانت التسميات التي قمت بتعيينها. أعد تسمية علامة التبويب “All”، وقم بمحاذاة الشريط إلى اليسار أو الوسط أو اليمين، وقم بتصميم علامات التبويب النشطة بألوان وخلفيات وحدود منفصلة حتى يعرف الأشخاص دائمًا ما اختاروه.
- قم بتعيين كل صورة لفئة باستخدام حقل تسمية التصفية. فاصلة منفصلة لفئات متعددة.
- تصميم الحالة النشطة يجعل علامة التبويب المحددة متميزة عن الباقي.
- الطباعة والتباعد على شريط التصفية قابلان للتخصيص بالكامل.
تخطيط المعرض والتأثيرات ثلاثية الأبعاد
اختر عدد الأعمدة، وقم بتمكين البناء لشبكة متداخلة على طراز Pinterest، وتحكم في التباعد باستخدام إعدادات Gutter. ثم طبقة على التأثيرات التفاعلية: يقوم مقياس التمرير بتكبير العناصر عند تمرير الماوس، ويضيف تأثير الإمالة منظورًا ثلاثي الأبعاد يتبع المؤشر بوهج اختياري. إنه نوع التفاصيل التي تجعل المعرض يبدو مدروسًا بدلاً من الافتراضي.
- تخطيط البناء لارتفاعات الصورة الديناميكية وغير المتساوية.
- إمالة ثلاثية الأبعاد بمنظور وسرعة وشدة وهج قابلة للتعديل.
- تحوم مقياس مع سرعة انتقال قابلة للتكوين.
- الأعمدة المستجيبة التي يتم تكديسها بشكل نظيف على الهاتف المحمول.
تراكبات نصية منمقة وCTAs مزدوجة
يمكن لكل عنصر في المعرض أن يعرض عنوانًا وعنوانًا فرعيًا وتسمية فئة، ولكل منها طباعة ولون مستقل. عند التمرير، يتلاشى لون التراكب ويظهر زران: “Details” و“Demo” (أو أي نص تكتبه). يحتوي كلا الزرين على عناصر تحكم كاملة في الحالة العادية وحالة التمرير للخلفية ولون النص والحدود ونصف القطر والظل.
- أقسام منفصلة لنمط العنوان ونمط الترجمة ونمط الفئة.
- زرين لكل عنصر، كل منهما مصمم بشكل مستقل.
- قم بتمرير حجم الأيقونة ولونها ليتناسب مع علامتك التجارية.
- لون تراكب الصورة مع انتقال سلس.
- هل تريد المزيد من الرسوم المتحركة الحوامة على صور فردية؟ جرب تأثيرات تحوم الصورة القطعة.
قم ببناء محفظة قابلة للتصفية في Elementor
تحتاج أداة المحفظة الخاصة بـ Elementor إلى Pro. تعمل هذه الشبكة على Master Addons، لذلك يعمل شريط التصفية على تثبيت Elementor مجانًا. يحمل كل عنصر عنوان مشروع، وعنوانًا فرعيًا للفئة أو السنة، وحقلين للأزرار، وهي الطريقة التي يمكن أن تشير بها بطاقة المحفظة إلى الموقع المباشر ودراسة الحالة في نفس الوقت. تنتقل الأزرار أدناه إلى الصفحة التجريبية.
- جميع المشاريع
- سكني
- الضيافة
- التجزئة
- مكان العمل
بيت أشجروف
إقامة خاصة · ملبورن · 2025
شقة لايم واش
تجديد كامل · لشبونة · 2025
فندق فينويك
اللوبي والصالة · ادنبره · · 2024
بيت ضيافة كيلنر
32 غرفة · فيينا · 2024
الاستوديو التاسع الرائد
تجهيزات البيع بالتجزئة · كوبنهاجن · 2025
مارلو و فولد
متجر المفاهيم · تورونتو · 2023
المقر الرئيسي لمختبرات بيكون
مكان عمل بمساحة 1400 متر مربع · برلين · 2025
الشركاء المتحمسين
جناح المكاتب والاجتماعات · دبلن · · 2024معرض قابل للتصفية في Elementor بدون Pro
معرض الصور المجاني الخاص بـ Elementor عبارة عن شبكة تحتوي على صندوق ضوئي. قائمة التحكم بأكملها عبارة عن صور وأعمدة وفجوة وتعليق ورابط وصندوق ضوئي، لذلك لا يوجد شريط تصفية ولا يوجد بناء فيه. يحتفظ Elementor بأداة المعرض الأكثر ثراءً في قائمة Pro، حيث يأتي الترخيص. تضيف هذه الأداة شريط التصفية عند تثبيت Elementor المجاني.
| ميزة | معرض صور العنصر (مجاني) | معرض الصور القابلة للتصفية للإضافات الرئيسية |
|---|---|---|
| علامات تبويب تصفية الفئة | لا | نعم، من تسمية التصفية لكل عنصر |
| علامة التبويب “All” | لا | نعم، مع التسمية الخاصة بك |
| البناء | لا | نعم |
| الأعمدة | نعم | نعم، من 1 إلى 6 |
| صندوق مضيء | نعم | نعم |
| التسميات التوضيحية | التسمية التوضيحية المرفقة | العنوان والعنوان الفرعي والفئة التي تكتبها لكل عنصر |
| أزرار على أحد العناصر | لا | اثنان، لكل منهما عنوان URL الخاص به |
| شارة الشريط | لا | نعم |
| إمالة ثلاثية الأبعاد عند التحليق | لا | نعم، مع وهج |
| يحتاج العنصر برو | لا | لا |
ما تفعله الأداة وما لا تفعله
تم تحديد كل شيء أدناه في لوحة الأدوات. النصف الثاني مهم بقدر أهمية النصف الأول: إذا كنت بحاجة إلى الترحيل أو مربع البحث، فهذا هو العنصر الخطأ ومن الأفضل أن تعرفه الآن.
| تعيين | مدعوم |
|---|---|
| علامات تبويب تصفية الفئة | نعم، تسمية تصفية واحدة لكل عنصر، وفاصلة مفصولة لأكثر من عنصر |
| علامة التبويب “All” | نعم، ويمكنك إعادة تسميته |
| البناء | نعم |
| قفل نسبة العرض إلى الارتفاع للصورة | نعم |
| الأعمدة | من 1 إلى 6، قيمة واحدة لكل حجم شاشة |
| لايت بوكس المنبثقة | نعم |
| الروابط بدلا من النافذة المنبثقة | نعم |
| أزرار لكل عنصر | اثنان، لكل منهما عنوان URL الخاص به |
| شارة الشريط | نعم، 12 إعدادًا مسبقًا بالإضافة إلى حقل الخصم |
| العنوان والعنوان الفرعي وتسمية الفئة | نعم، لكل منها الطباعة الخاصة بها |
| تلميح أداة على أحد العناصر | نعم |
| تراكب | أثناء التحليق، دائمًا، أبدًا، أو الاختباء أثناء التحليق |
| إمالة ثلاثية الأبعاد مع وهج | نعم |
| الرسوم المتحركة الدخول | نعم |
| تحميل المزيد من الزر | لا |
| ترقيم الصفحات | لا |
| مربع البحث | لا |
| عناصر الفيديو | لا |
| المشاركات أو المنتجات كمصدر | لا، المعرض عبارة عن مكرر تقوم بملئه |
عناصر واجهة المستخدم للصور الأخرى في نفس البرنامج المساعد: تأثيرات تحوم الصورة للتسميات التوضيحية التي تظهر على التمرير، صورة دائري للصف المنزلق، معرض المنزلق لمعاينة كبيرة مع شريط مصغر، نقطة اتصال الصورة للعلامات الموجودة على صورة واحدة، و صورة متقدمة لصورة واحدة مع تسمية توضيحية ورابط.
أمثلة المعرض وحالات الاستخدام القابلة للتصفية
- المحافظ: دع الزوار يقومون بالتصفية حسب نوع المشروع، العلامة التجارية، الويب، التصوير الفوتوغرافي، الرسم التوضيحي.
- كتالوجات المنتجات: علامات تبويب الفئات لـ “All”، “New Arrivals”، و“Sale”، و“Best Sellers”.
- قوائم المطاعم: قم بالتصفية بواسطة “Starters”، “Mains”، و“Desserts”، و“Drinks”.
- قوائم العقارات: “Apartments”، “Houses”، و“Commercial”، و“Land”.
- تصوير حفلات الزفاف: “Ceremony”، “Reception”، “Portraits”، و“Details”.
- دراسات حالة الوكالة: التصفية حسب صناعة العميل أو نوع الخدمة.
كيفية إنشاء معرض قابل للتصفية في Elementor
- إسقاط القطعة. في Elementor، ابحث في “Filterable Image Gallery” ضمن الإضافات الرئيسية واسحبه إلى القسم الخاص بك.
- إضافة عناصر المعرض. انقر فوق + إضافة عنصر لكل صورة. قم بتحميل الصورة، واكتب عنوانًا وعنوانًا فرعيًا، وقم بتعيين تسمية التصفية (اسم الفئة)، وأضف نص الزر والروابط إذا لزم الأمر.
- تمكين شريط التصفية. قم بتشغيل إظهار Filter Nav، واضبط عدد الأعمدة، واختر البناء أو الشبكة العادية، واضبط تباعد الحضيض. تمكين مقياس التحويم وتأثير الإمالة للتفاعل.
- نمط كل شيء. في علامة التبويب "النمط"، قم بتصميم شريط التصفية وبطاقات العناصر وتراكبات النص والأزرار وحالات التمرير. نشر عند الانتهاء.
الأسئلة المتداولة لمعرض الصور القابلة للتصفية
ما هي أداة معرض الصور القابلة للتصفية؟
أداة Elementor مستقلة تحول أي شبكة صور إلى معرض تمت تصفيته حسب الفئة. ينقر الزائرون على علامات تبويب التصفية لإظهار العناصر ذات الصلة فقط. يمكن لكل عنصر عرض عنوان وعنوان فرعي وزرين للاتصال بالإجراء.
هل أداة معرض الصور القابلة للتصفية مجانية؟
نعم. يأتي مزودًا بالمكون الإضافي Master Addons المجاني، حتى تتمكن من إنشاء معرض قابل للتصفية بدون ترخيص Elementor Pro أو Master Addons Pro. يمكنك إضافة أي عدد تحتاجه من عناصر المعرض.
كيف أقوم بتعيين العناصر لتصفية الفئات؟
في قسم محتويات المعرض لكل عنصر، ابحث عن حقل تسمية التصفية وأدخل اسم الفئة (“Technology”، “Branding”، “Photography”). جميع العناصر التي لها نفس مجموعة الملصقات تحت زر تصفية واحد. فاصلة منفصلة لتعيين عنصر لفئات متعددة.
هل لدى Elementor معرض قابل للتصفية؟
معرض الصور المجاني الخاص بـ Elementor عبارة عن شبكة عادية، لذا لا يحتوي على شريط تصفية. يأتي عنصر واجهة المستخدم الخاص بالمعرض Elementor مع Pro وهو المسار المدفوع. تضيف هذه الأداة علامات تبويب الفئات على تثبيت Elementor المجاني.
هل يمكنني بناء محفظة باستخدام هذه الأداة؟
نعم. يأخذ كل عنصر عنوان مشروع، وعنوانًا فرعيًا للفئة أو السنة، وزرين مع عناوين URL الخاصة بهما، بحيث يمكن لبطاقة واحدة الإشارة إلى الموقع المباشر وفي دراسة الحالة.
هل يمكن للزوار فتح الصور في صندوق ضوئي؟
نعم. يمكن ربط كل زر بنافذة منبثقة على lightbox أو عنوان URL خارجي أو صفحة على موقعك. قم بتعيين وجهة الارتباط لكل عنصر في قسم محتويات المعرض.
هل المعرض مستجيب على الهاتف المحمول؟
نعم. يتم تكديس الأعمدة تلقائيًا، وتصبح أربعة أعمدة عمودين أو عمودًا واحدًا على شاشات أصغر. يتم لف أزرار التصفية لتناسبها. استخدم وضع الاستجابة الخاص بـ Elementor لضبط أحجام Gutter والخطوط للجوال على وجه التحديد.
كيف يختلف هذا عن Image Carousel العادي أو Gallery Slider؟
يعرض الرف الدائري أو شريط التمرير صورة واحدة في كل مرة ويتنقل عبرها. يعرض المعرض القابل للتصفية كل شيء مرة واحدة ويتيح للزوار تضييق الشبكة حسب الفئة. استخدم صورة دائري لأقسام البطل وصفوف الشعار، أو معرض المنزلق (Pro) عندما تريد صورة واحدة كبيرة بها صور مصغرة. استخدم معرضًا قابلاً للتصفية للمحافظ والكتالوجات والمجموعات التي يكون التصفح فيها مهمًا.
هل يحتوي المعرض على تحميل أكثر أم ترقيم الصفحات؟
لا. يتم تحميل كل عنصر في المكرر بالصفحة، لذا تقوم مجموعة الصور المكونة من 40 بشحن جميع الصور الأربعين مرة واحدة. قم بتقسيم مجموعات كبيرة جدًا عبر الصفحات، أو أبقِ ملفات الصور خفيفة.
لماذا لا تظهر علامات تبويب التصفية الخاصة بي؟
ثلاثة أشياء يجب التحقق منها: يتم تشغيل إظهار Filter Nav في علامة التبويب الإعدادات، ويحتوي كل عنصر على تسمية تصفية، ويتم مسح ذاكرة التخزين المؤقت للصفحة بعد التحرير. العنصر ذو التسمية الفارغة لا ينضم أبدًا إلى فئة.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
![ملحق Master Addons Post/Page Duplicator لـ Elementor: رابط صف MA Duplicator في قائمة صفحات WordPress لإنشاء صفحة مقصودة - مسودة [مكررة #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
ناسخ البريد/الصفحة
