कुंजी तकिए
- सभी छह उदाहरण एक ही विजेट के साथ निर्मित लाइव डेमो पेज हैं, ताकि आप प्रत्येक को खोल सकें और टैब पर स्वयं क्लिक कर सकें।
- हर कोई चार श्रेणियों और एक ऑल टैब का उपयोग करता है, जो लैपटॉप पर बार को एक ही लाइन पर रखता है।
- प्रत्येक डिज़ाइन में ऑल टैब का नाम बदल दिया गया है: “All लिस्टिंग”, “Full मेनू”, “All वर्क”, “All प्रोजेक्ट”, “Shop all” और “Avery डेस्टिनेशन”।
- आंतरिक मामलों के अध्ययन के लिए कॉलम की संख्या दो से लेकर रेस्तरां मेनू और दुकान ग्रिड के लिए चार तक होती है।
- प्रत्येक कार्ड पर छह में से दो बटन लगाते हैं, दो एक होवर आइकन का उपयोग करते हैं जो छवि खोलता है, और दो किसी का भी उपयोग नहीं करते हैं।
एक फ़िल्टर करने योग्य गैलरी अलग दिखती है जो यह रखती है एक रेस्तरां मेनू कीमतों के साथ घने चार कॉलम कार्ड चाहता है, एक अंदरूनी स्टूडियो दो बड़े कॉलम और एक केस स्टडी लिंक चाहता है, और एक फोटोग्राफर चाहता है कि चित्र सब कुछ ले जाएं।
नीचे दिए गए छह डिज़ाइन लाइव डेमो पेज हैं जिन पर आप क्लिक कर सकते हैं प्रत्येक प्रविष्टि श्रेणियों, कॉलम गिनती और सेटिंग्स को नोट करती है जो इसे इसका चरित्र देती है, इसलिए आप अपनी सामग्री से मेल खाने वाले आकार की प्रतिलिपि बना सकते हैं।
विषय-सूची
छह उदाहरण एक नज़र में
| उदाहरण | श्रेणियाँ | आइटम | कॉलम | कार्ड लिंक |
|---|---|---|---|---|
| संपत्ति लिस्टिंग | अपार्टमेंट, विला, टाउनहाउस, कार्यालय | 8 | तीन | दो बटन |
| रेस्तरां मेनू | छोटी प्लेटें, मुख्य, मिठाइयाँ, कॉकटेल | 8 | चार | होवर आइकन |
| शादी फोटोग्राफी | समारोह, चित्र, स्वागत, विवरण | नौ | तीन | होवर आइकन |
| आंतरिक परियोजनाएं | आवासीय, आतिथ्य, खुदरा, कार्यस्थल | 8 | दो | एक बटन |
| उत्पाद सूची | बैग, जूते, घड़ियाँ, बाहरी वस्त्र | 8 | चार | दो बटन |
| यात्रा गंतव्य | यूरोप, एशिया, अमेरिका, अफ्रीका | 8 | तीन | होवर आइकन |
फ़िल्टर करने योग्य गैलरी उदाहरण
1। संपत्ति सूची
चार श्रेणियों में आठ लिस्टिंग, सभी टैब के साथ नाम बदलकर “सभी लिस्टिंग” प्रत्येक कार्ड शीर्षक के रूप में संपत्ति का नाम और उपशीर्षक के रूप में विनिर्देश रेखा रखता है, इसलिए “२ बिस्तर, १ स्नान, ९४० वर्ग फुट, $ २,४५०/मो” फोटो के नीचे बैठता है प्रति कार्ड दो बटन दो चीजों को संभालते हैं जो एक आगंतुक चाहता है: विवरण, और एक देखने।
प्रतिलिपि बनाने लायक विवरण रिबन है: आठ कार्डों में से दो पर नया या मूल्य ड्रॉप पढ़ने वाला एक कोने का बैज लेआउट को छुए बिना आंख को खींचता है।
२ रेस्तरां मेनू
एक अंधेरे पृष्ठभूमि पर चार कॉलम, सभी टैब पढ़ने के साथ “पूर्ण मेनू” पकवान का नाम शीर्षक है और कीमत उपशीर्षक है, जो दो क्षेत्रों में पूरे मेनू संरचना है पाठ्यक्रम फ़िल्टर बन जाते हैं, इसलिए एक आगंतुक जो केवल मिठाई चाहता है वह एक क्लिक में वहां पहुंच जाता है।
चार कॉलम यहां काम करते हैं क्योंकि तस्वीरें एकल व्यंजनों की तंग फसलें हैं चार कॉलम पर वाइड सीन फोटोग्राफी अपठनीय होगी।
३ शादी की फोटोग्राफी
नौ फ्रेम, दिन के चार भाग, और लगभग कोई पाठ नहीं सभी टैब कहते हैं “सभी काम करने वाले हैं” और कार्ड बटन के बजाय एक होवर आइकन का उपयोग करते हैं, इसलिए एक क्लिक दूर नेविगेट करने के बजाय तस्वीर को खोलता है यह डिज़ाइन है जब तस्वीरें उत्पाद होती हैं तो कॉपी करें।
जो चीज़ इसे काम करती है वह वही है जो यह छोड़ देती है: कोई रिबन नहीं, कोई बटन नहीं, और छवियों के साथ प्रतिस्पर्धा करने वाला कोई उपशीर्षक नहीं।
४ आंतरिक परियोजनाएं
दो कॉलम, इसलिए प्रत्येक परियोजना को वास्तविक स्थान मिलता है, ओवरले सेट के साथ होवर पर हर समय दिखाने के लिए होवर पर प्रति कार्ड एक बटन, पढ़ना “व्यू केस स्टडी” फ़िल्टर बार को केंद्रित करने के बजाय बाईं ओर संरेखित किया गया है, जो संपादकीय महसूस के अनुरूप है।
दो कॉलम काम के लिए नकल करने लायक विकल्प है जो एक दूसरे को देखने के लायक है दो कॉलम में आठ परियोजनाएं अभी भी स्क्रॉलिंग की एक स्क्रीन में फिट होती हैं।
5। उत्पाद सूची
चार कॉलम, शीर्षक के रूप में उत्पाद का नाम, उपशीर्षक के रूप में मूल्य, और दो बटन पढ़ना “त्वरित दृश्य” और “बैगमैक में जोड़ें सभी टैब कहते हैं “शॉप ऑल” यह एक होने के बिना एक दुकान पृष्ठ की तरह दिखता है: कार्ड उत्पादों के बजाय लिंक के साथ छवियां हैं, इसलिए कार्ट में कुछ भी नहीं जाता है एक लुकबुक के लिए जो एक स्टोर पर इंगित करता है, यह पर्याप्त है।
दो बटन पैटर्न उपयोगी हिस्सा है: एक नरम कार्रवाई, एक फर्म एक।
६ यात्रा स्थलों
फ़िल्टर के रूप में महाद्वीप, सभी टैब का नाम बदलकर “हर गंतव्य” होवर स्केल अन्य डेमो की तुलना में अधिक सेट है, इसलिए कार्ड कर्सर के नीचे अधिक ध्यान से उठाते हैं शीर्षक स्थान का नाम देते हैं और उपशीर्षक विवरण जोड़ते हैं।
बदला हुआ ऑल टैब यहां वास्तविक काम करता है। “प्रत्येक गंतव्य” एक आगंतुक को बताता है कि सेट क्या है; “All” उन्हें कुछ नहीं बताता।
छह में क्या समानता है
- सभी छह डिजाइनों में चार श्रेणियां चार टैब प्लस सभी एक लैपटॉप पर एक लाइन पर फिट होते हैं और एक फोन पर दो को लपेटते हैं।
- हर बार ऑल टैब का नाम बदल दिया जाता है, जिसमें छह अलग-अलग लेबल होते हैं और कोई भी डिफ़ॉल्ट पर नहीं बचता है।
- शीर्ष पर शीर्षक, नीचे विवरण, प्रत्येक डिज़ाइन में जो पाठ का उपयोग करता है।
- कॉलम गिनती फोटोग्राफी का अनुसरण करती है: तंग फसलें चार कॉलम लेती हैं, दृश्य और कमरे दो या तीन लेते हैं।
- प्रति कार्ड एक क्लिक व्यवहार, या तो बटन या लाइटबॉक्स आइकन, दोनों कभी नहीं।
इनमें से एक का निर्माण
प्रत्येक डिजाइन अलग-अलग सेटिंग्स के साथ एक ही विजेट है निर्माण है: प्रति छवि एक आइटम जोड़ें, टैब बनाने के लिए प्रत्येक पर एक फ़िल्टर लेबल टाइप करें, कॉलम सेट करें, फिर तय करें कि कार्ड छवि पहलू अनुपात के साथ एक समान ऊंचाई पर फसल करते हैं या अपने स्वयं के अनुपात शीर्षक, उपशीर्षक और ओवरले व्यवहार ओवरले सेटिंग अनुभाग में रहते हैं, और दो बटन प्रत्येक आइटम पर बैठते हैं।
पूरा वॉकथ्रू अंदर है एलिमेंटर में फ़िल्टर करने योग्य गैलरी कैसे बनाएं, और विजेट ही है फ़िल्टर करने योग्य छवि गैलरी.
अक्सर पूछे जाने वाले प्रश्न
क्या मैं इन उदाहरणों को टेम्प्लेट के रूप में आयात कर सकता हूँ?
वे आयात करने योग्य किट के बजाय डेमो पेज हैं पुनर्निर्माण एक के बारे में दस मिनट लगते हैं, क्योंकि संरचना मुट्ठी भर सेटिंग्स और आपकी अपनी छवियां हैं।
फ़िल्टर बार में कितनी श्रेणियां होनी चाहिए?
चार सभी छह डिजाइनों में पैटर्न है पिछले छह बार एक लैपटॉप पर लपेटता है और दूसरे मेनू की तरह पढ़ना शुरू करता है।
क्या एक छवि दो टैब के नीचे दिखाई दे सकती है?
हाँ। दोनों श्रेणी के नामों को अल्पविराम से अलग करके फ़िल्टर लेबल फ़ील्ड में रखें।
क्या डेमो चिनाई का उपयोग करते हैं?
नहीं, सभी छह फसल कार्ड एक समान ऊंचाई पर, यही कारण है कि ग्रिड साफ दिखते हैं चिनाई मिश्रित अभिविन्यास वाले सेट के लिए एक अलग स्विच है।
क्या दुकान का उदाहरण भुगतान ले सकता है?
नहीं, यह बटन के साथ एक गैलरी है, इसलिए कार्ड लिंक जहां भी आप उन्हें इंगित करते हैं चेकआउट वूकॉमर्स से संबंधित है।
अंतिम विचार
छह डिजाइन, एक विजेट, और उनके बीच चार निर्णय: कितने कॉलम, चाहे कार्ड फसल, बटन क्या करते हैं, और क्या सभी टैब कहा जाता है अपनी सामग्री के निकटतम उदाहरण से शुरू करें और उन चार को बदलें।
संबंधित पढ़ने
