عنصر واجهة المستخدم للمعرض القابل للتصفية - جعل الصور قابلة للتصفية
معرض ثابت يعرض الصور. يتيح المعرض القابل للتصفية للأشخاص العثور على ما يهتمون به. تمنح أداة معرض الصور القابلة للتصفية محفظتك أو كتالوج المنتجات أو مجموعة الصور شريط فئات في الأعلى. ينقر الزائرون على علامة تبويب، وتقوم الشبكة بالتصفية على الفور، ويمكن لكل عنصر أن يحمل عنوانًا وعنوانًا فرعيًا وزرين مصممين لـ “عرض التفاصيل” أو “Live Demo”.
الأداة مجانية في البرنامج الإضافي Master Addons وتعمل بدون Elementor Pro.
ما يمكنك فعله باستخدام أداة المعرض القابلة للتصفية
تصفية الفئة مع التحكم الكامل
قم بتمكين شريط التصفية وشاهد الزوار أزرار الفئات أعلى المعرض: “All”، و“Branding”، و“Photography”، و“Web Design”، أيًا كانت التسميات التي قمت بتعيينها. أعد تسمية علامة التبويب “All”، وقم بمحاذاة الشريط إلى اليسار أو الوسط أو اليمين، وقم بتصميم علامات التبويب النشطة بألوان وخلفيات وحدود منفصلة حتى يعرف الأشخاص دائمًا ما اختاروه.
- قم بتعيين كل صورة لفئة باستخدام حقل تسمية التصفية. فاصلة منفصلة لفئات متعددة.
- تصميم الحالة النشطة يجعل علامة التبويب المحددة متميزة عن الباقي.
- الطباعة والتباعد على شريط التصفية قابلان للتخصيص بالكامل.
تخطيط المعرض والتأثيرات ثلاثية الأبعاد
اختر عدد الأعمدة، وقم بتمكين البناء لشبكة متداخلة على طراز Pinterest، وتحكم في التباعد باستخدام إعدادات Gutter. ثم طبقة على التأثيرات التفاعلية: يقوم مقياس التمرير بتكبير العناصر عند تمرير الماوس، ويضيف تأثير الإمالة منظورًا ثلاثي الأبعاد يتبع المؤشر بوهج اختياري. إنه نوع التفاصيل التي تجعل المعرض يبدو مدروسًا بدلاً من الافتراضي.
- تخطيط البناء لارتفاعات الصورة الديناميكية وغير المتساوية.
- إمالة ثلاثية الأبعاد بمنظور وسرعة وشدة وهج قابلة للتعديل.
- تحوم مقياس مع سرعة انتقال قابلة للتكوين.
- الأعمدة المستجيبة التي يتم تكديسها بشكل نظيف على الهاتف المحمول.
تراكبات نصية منمقة وCTAs مزدوجة
يمكن لكل عنصر في المعرض أن يعرض عنوانًا وعنوانًا فرعيًا وتسمية فئة، ولكل منها طباعة ولون مستقل. عند التمرير، يتلاشى لون التراكب ويظهر زران: “Details” و“Demo” (أو أي نص تكتبه). يحتوي كلا الزرين على عناصر تحكم كاملة في الحالة العادية وحالة التمرير للخلفية ولون النص والحدود ونصف القطر والظل.
- أقسام منفصلة لنمط العنوان ونمط الترجمة ونمط الفئة.
- زرين لكل عنصر، كل منهما مصمم بشكل مستقل.
- قم بتمرير حجم الأيقونة ولونها ليتناسب مع علامتك التجارية.
- لون تراكب الصورة مع انتقال سلس.
- هل تريد المزيد من الرسوم المتحركة الحوامة على صور فردية؟ جرب تأثيرات تحوم الصورة القطعة.
أمثلة المعرض وحالات الاستخدام القابلة للتصفية
- المحافظ: دع الزوار يقومون بالتصفية حسب نوع المشروع، العلامة التجارية، الويب، التصوير الفوتوغرافي، الرسم التوضيحي.
- كتالوجات المنتجات: علامات تبويب الفئات لـ “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”). جميع العناصر التي لها نفس مجموعة الملصقات تحت زر تصفية واحد. فاصلة منفصلة لتعيين عنصر لفئات متعددة.
هل يمكن للزوار فتح الصور في صندوق ضوئي؟
نعم. يمكن ربط كل زر بنافذة منبثقة على lightbox أو عنوان URL خارجي أو صفحة على موقعك. قم بتعيين وجهة الارتباط لكل عنصر في قسم محتويات المعرض.
هل المعرض مستجيب على الهاتف المحمول؟
نعم. يتم تكديس الأعمدة تلقائيًا، وتصبح أربعة أعمدة عمودين أو عمودًا واحدًا على شاشات أصغر. يتم لف أزرار التصفية لتناسبها. استخدم وضع الاستجابة الخاص بـ Elementor لضبط أحجام Gutter والخطوط للجوال على وجه التحديد.
كيف يختلف هذا عن Image Carousel العادي أو Gallery Slider؟
يعرض الرف الدائري أو شريط التمرير صورة واحدة في كل مرة ويتنقل عبرها. يعرض المعرض القابل للتصفية كل شيء مرة واحدة ويتيح للزوار تضييق الشبكة حسب الفئة. استخدم صورة دائري لأقسام البطل وصفوف الشعار، أو معرض المنزلق (Pro) عندما تريد صورة واحدة كبيرة بها صور مصغرة. استخدم معرضًا قابلاً للتصفية للمحافظ والكتالوجات والمجموعات التي يكون التصفح فيها مهمًا.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
ناسخ البريد/الصفحة
