الوجبات السريعة الرئيسية
- جميع الأمثلة الستة عبارة عن صفحات تجريبية مباشرة تم إنشاؤها باستخدام نفس الأداة، لذا يمكنك فتح كل واحدة منها والنقر فوق علامات التبويب بنفسك.
- يستخدم كل واحد أربع فئات بالإضافة إلى علامة التبويب "كل شيء"، والتي تحافظ على الشريط في سطر واحد على جهاز الكمبيوتر المحمول.
- تتم إعادة تسمية علامة التبويب "كل شيء" في كل تصميم: “All listings”، و“Full menu”، و“All Work”، و“All project”، و“Shop all”، و“Every Destination”.
- تتراوح أعداد الأعمدة من اثنين لدراسات الحالة الداخلية إلى أربعة لقائمة المطاعم وشبكة المتاجر.
- يستخدم اثنان من الأزرار الستة الموجودة على كل بطاقة، ويستخدم اثنان أيقونة التمرير التي تفتح الصورة، بينما لا يستخدم اثنان أيًا منهما.
يبدو المعرض القابل للتصفية مختلفًا اعتمادًا على ما يحمله. تريد قائمة المطعم بطاقات كثيفة مكونة من أربعة أعمدة مع الأسعار، ويريد استوديو التصميمات الداخلية عمودين كبيرين ورابط دراسة الحالة، ويريد المصور أن تحمل الصور كل شيء.
التصميمات الستة أدناه عبارة عن صفحات تجريبية مباشرة يمكنك النقر فوقها. يشير كل إدخال إلى الفئات وعدد الأعمدة والإعدادات التي تمنحه طابعه، حتى تتمكن من نسخ الشكل الذي يطابق المحتوى الخاص بك.
جدول المحتويات
الأمثلة الستة في لمحة
| مثال | الفئات | عناصر | الأعمدة | روابط البطاقة |
|---|---|---|---|---|
| قوائم الممتلكات | الشقق والفيلات والمنازل والمكاتب | 8 | 3 | زرين |
| قائمة المطاعم | أطباق صغيرة، رئيسية، حلويات، كوكتيلات | 8 | 4 | أيقونة التحويم |
| تصوير الزفاف | الحفل، الصور، الاستقبال، التفاصيل | 9 | 3 | أيقونة التحويم |
| المشاريع الداخلية | سكني، ضيافة، بيع بالتجزئة، مكان عمل | 8 | 2 | زر واحد |
| كتالوج المنتجات | الحقائب والأحذية والساعات والملابس الخارجية | 8 | 4 | زرين |
| وجهات السفر | أوروبا وآسيا والأمريكتين وأفريقيا | 8 | 3 | أيقونة التحويم |
أمثلة المعرض القابلة للتصفية
1. قوائم العقارات
ثماني قوائم عبر أربع فئات، مع إعادة تسمية علامة التبويب All إلى “All listings”. تحمل كل بطاقة اسم الخاصية كعنوان وخط المواصفات كعنوان فرعي، لذا يوجد سرير “2 وحمام واحد ومساحة قدم مربع و2450 دولارًا أمريكيًا/موكروفيك أسفل الصورة. أزرار لكل بطاقة تتعامل مع الشيئين اللذين يريدهما الزائر: التفاصيل والعرض.
التفاصيل التي تستحق النسخ هي الشريط: شارة زاوية مكتوب عليها جديد أو سعر. إن إسقاط اثنتين من البطاقات الثمانية يجذب العين دون لمس التخطيط.
2. قائمة المطاعم
أربعة أعمدة على خلفية داكنة، مع علامة التبويب "كل" تقرأ قائمة “Full”. اسم الطبق هو العنوان والسعر هو العنوان الفرعي، وهو هيكل القائمة بالكامل في حقلين. تصبح الدورات مرشحا، لذلك الزائر الذي يريد الحلوى فقط يصل إلى هناك بنقرة واحدة.
أربعة أعمدة تعمل هنا لأن الصور عبارة عن محاصيل ضيقة من أطباق فردية. سيكون التصوير الفوتوغرافي للمشهد الواسع في أربعة أعمدة غير قابل للقراءة.
3. تصوير حفلات الزفاف
تسعة إطارات، وأربعة أجزاء من اليوم، ولا يوجد نص تقريبًا. تشير علامة التبويب "كل شيء" إلى أن “All يعمل على تحديد الاتجاه وتستخدم البطاقات رمز التمرير بدلاً من الأزرار، لذا فإن النقر يفتح الصورة بدلاً من التنقل بعيدًا. هذا هو التصميم الذي يجب نسخه عندما تكون الصور الفوتوغرافية هي المنتج.
ما يجعلها تعمل هو ما تتجاهله: لا أشرطة ولا أزرار ولا ترجمات تتنافس مع الصور.
4. المشاريع الداخلية
عمودان، بحيث يحصل كل مشروع على مساحة حقيقية، مع ضبط التراكب على العرض في جميع الأوقات بدلاً من التمرير. زر واحد لكل بطاقة، يقرأ “عرض دراسة الحالة”. تتم محاذاة شريط التصفية إلى اليسار بدلاً من المنتصف، وهو ما يناسب الشعور التحريري.
عمودان هو الاختيار الذي يستحق النسخ للعمل الذي يستحق نظرة ثانية. ثمانية مشاريع في عمودين لا تزال مناسبة في شاشة تمرير واحدة.
5. كتالوج المنتجات
أربعة أعمدة، اسم المنتج كعنوان، والسعر كعنوان فرعي، وزرين يقرأان “عرض سريع” و“Add to Bag”. علامة التبويب الكل تقول “Shop all”. تبدو وكأنها صفحة متجر دون أن تكون واحدة: البطاقات عبارة عن صور تحتوي على روابط وليست منتجات، لذلك لا شيء يدخل في عربة التسوق. بالنسبة لكتاب البحث الذي يشير إلى المتجر، فهذا يكفي.
نمط الزرين هو الجزء المفيد: عمل ناعم، وواحد ثابت.
6. وجهات السفر
القارات كمرشح، مع إعادة تسمية علامة التبويب "All" إلى “Every Destination”. تم تعيين مقياس التمرير أعلى من العروض التوضيحية الأخرى، لذلك يتم رفع البطاقات بشكل ملحوظ أسفل المؤشر. تقوم العناوين بتسمية المكان وتضيف الترجمات التفاصيل.
تقوم علامة التبويب "كل" التي أعيدت تسميتها بعمل حقيقي هنا. “كل وجهة” تخبر الزائر ما هي المجموعة؛ “All” لا يخبرهم بأي شيء.
ما هو مشترك بين الستة
- أربع فئات في جميع التصاميم الستة. أربع علامات تبويب بالإضافة إلى الكل يناسب سطرًا واحدًا على الكمبيوتر المحمول ويلتف على سطرين على الهاتف.
- تتم إعادة تسمية علامة التبويب "كل شيء" في كل مرة، مع ستة تسميات مختلفة ولم يتبق أي منها في الوضع الافتراضي.
- العنوان في الأعلى، والتفاصيل في الأسفل، في كل تصميم يستخدم النص على الإطلاق.
- يتبع عدد الأعمدة التصوير الفوتوغرافي: تأخذ المحاصيل الضيقة أربعة أعمدة، والمشاهد والغرف تأخذ عمودين أو ثلاثة.
- سلوك النقرة الواحدة لكل بطاقة، سواء الأزرار أو أيقونة الصندوق الضوئي، لا كليهما أبدًا.
بناء واحدة من هذه
كل تصميم هو نفس الأداة مع إعدادات مختلفة. البناء هو: إضافة عنصر لكل صورة، وكتابة تسمية تصفية على كل صورة لإنشاء علامات التبويب، وتعيين الأعمدة، ثم تحديد ما إذا كانت البطاقات ستنتقل إلى ارتفاع موحد مع نسبة عرض إلى ارتفاع الصورة أو الاحتفاظ بنسبها الخاصة. العناوين والترجمات وسلوك التراكب موجودة في قسم إعداد التراكب، ويوجد الزران على كل عنصر.
الإرشادات الكاملة موجودة كيفية إنشاء معرض قابل للتصفية في Elementor، والعنصر نفسه هو معرض الصور القابلة للتصفية.
الأسئلة المتداولة
هل يمكنني استيراد هذه الأمثلة كقوالب؟
إنها صفحات تجريبية وليست مجموعات قابلة للاستيراد. تستغرق إعادة بناء واحدة حوالي عشر دقائق، نظرًا لأن الهيكل عبارة عن عدد قليل من الإعدادات والصور الخاصة بك.
كم عدد الفئات التي يجب أن يحتوي عليها شريط التصفية؟
أربعة هو النمط في جميع التصاميم الستة. بعد السادسة، يلتف الشريط على جهاز كمبيوتر محمول ويبدأ في القراءة كقائمة ثانية.
هل يمكن أن تظهر صورة واحدة تحت علامتي تبويب؟
نعم. ضع اسمي الفئتين في حقل تسمية التصفية، مفصولة بفاصلة.
هل تستخدم العروض التوضيحية البناء؟
لا. جميع بطاقات المحاصيل الستة ذات ارتفاع موحد، ولهذا السبب تبدو الشبكات مرتبة. الماسونية عبارة عن مفتاح منفصل للمجموعات ذات التوجهات المختلطة.
هل يمكن لمثال المتجر أن يأخذ المدفوعات؟
رقم إنه معرض به أزرار، لذا ترتبط البطاقات أينما تشير إليها. الخروج ينتمي إلى WooCommerce.
الأفكار النهائية
ستة تصميمات، وعنصر واجهة مستخدم واحد، وأربعة قرارات فيما بينها: عدد الأعمدة، وما إذا كانت البطاقات تظهر، وماذا تفعل الأزرار، وما تسمى علامة التبويب الكل. ابدأ من المثال الأقرب إلى المحتوى الخاص بك وقم بتغيير تلك الأربعة.
القراءة ذات الصلة
