एक सादा छवि ग्रिड आगंतुकों को विषय के आधार पर ब्राउज़ करने का कोई तरीका नहीं देता है फ़िल्टर करने योग्य छवि गैलरी विजेट इन एलिमेंट के लिए मास्टर ऐडऑन उसे ठीक करता है यह एक मानक गैलरी में श्रेणी फिल्टर, होवर ओवरले, रिबन और लाइटबॉक्स लिंक जोड़ता है, ताकि आप बिना किसी कोड को लिखे एक फ़िल्टर करने योग्य पोर्टफोलियो या उत्पाद शोकेस बना सकें।
यहां बताया गया है कि प्रत्येक टैब और सेटिंग कैसे काम करती है, इसलिए आप एक सेट अप कर सकते हैं एलिमेंट फिल्टर करने योग्य गैलरी बिना यह अनुमान लगाए कि टॉगल क्या करते हैं।
यह पृष्ठ सेटिंग्स संदर्भ है लाइव उदाहरणों और विजेट क्या कर सकता है, इसके अवलोकन के लिए, पर जाएं एलिमेंट फिल्टर करने योग्य गैलरी विजेट पेज।
फ़िल्टर करने योग्य छवि गैलरी विजेट क्या करता है #
विजेट छवियों का एक ग्रिड प्रदर्शित करता है और आगंतुकों को श्रेणी के अनुसार फ़िल्टर करने देता है प्रत्येक गैलरी आइटम एक शीर्षक, उपशीर्षक, रिबन, होवर आइकन और दो एक्शन बटन का समर्थन करता है लेआउट, रिक्ति, ओवरले एनीमेशन, और टाइपोग्राफी सभी एलिमेंट पैनल से नियंत्रित होते हैं, इसलिए वही विजेट पोर्टफोलियो, ई-कॉमर्स लुकबुक, यात्रा गैलरी और टीम फोटो दीवारों के लिए काम करता है।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय। मदद चाहिए? देखना स्थापना गाइड.
- छवियों को उन श्रेणियों में समूहीकृत किया गया है जिन्हें आप चाहते हैं कि आगंतुक फ़िल्टर करें।
एलिमेंटर फ़िल्टर करने योग्य गैलरी विजेट कैसे जोड़ें #
एलिमेंट संपादक खोलें और खोजें फिल्टर करने योग्य गैलरी एलिमेंट्स पैनल में, या मास्टर एडॉन्स सेक्शन में नीचे स्क्रॉल करें विजेट को अपने पेज पर खींचें यह प्लेसहोल्डर गैलरी आइटम के साथ लोड होता है, इसलिए आपके पास तुरंत काम करने के लिए स्क्रीन पर कुछ है।
सामग्री टैब में अपनी गैलरी बनाएं #
द सामग्री टैब वह जगह है जहां आप चित्र जोड़ते हैं, फ़िल्टर श्रेणियां निर्दिष्ट करते हैं, और रिबन और लिंक सेट करते हैं।
गैलरी सामग्री #
द गैलरी सामग्री अनुभाग एक पुनरावर्तक है प्रत्येक आइटम एक छवि कार्ड का प्रतिनिधित्व करता है क्लिक करें आइटम जोड़ें अधिक कार्ड बनाने के लिए, या डुप्लिकेट का उपयोग करें और उन्हें प्रबंधित करने के लिए आइकन हटा दें।
प्रत्येक आइटम में समान फ़ील्ड हैंः
- फ़िल्टर लेबलः श्रेणी आगंतुकों फिल्टर करने के लिए उपयोग उदाहरण: प्रौद्योगिकी, प्रकृति, वास्तुकला।
- छवियाँ: मीडिया पिकर खोलने के लिए क्लिक करें और इस कार्ड के लिए छवियों का चयन करें आप एक साथ कई का चयन कर सकते हैं।
- शीर्षक: छवि के नीचे या ऊपर दिखाया गया मुख्य शीर्षक।
- उपशीर्षक: शीर्षक के नीचे एक छोटी सी रेखा।
- रिबन दिखाएँ?: एक कोने या इनलाइन बैज जोड़ने के लिए टॉगल करें।
- रिबन: बैज टेक्स्ट, जैसे लोकप्रिय या नया।
- पॉपअप या लिंक?: चुनें कि कार्ड लाइटबॉक्स पॉपअप खोलता है या यूआरएल से लिंक करता है।
- बटन एक पाठ/यूआरएलः पहले एक्शन बटन के लिए लेबल और गंतव्य।
- बटन दो पाठ/यूआरएलः दूसरे एक्शन बटन के लिए लेबल और गंतव्य।
छवि संकल्प और कॉलम #
पुनरावर्तक के नीचे, सेट करें छवि संकल्प वर्डप्रेस को सेवा करनी चाहिए और की संख्या कॉलमछह कॉलम आपको छोटे थंबनेल देते हैं, जब आप पठनीय शीर्षक के साथ बड़े कार्ड चाहते हैं तो तीन तक ड्रॉप करें वास्तविक प्रदर्शन आकार के करीब एक संकल्प चुनें, अन्यथा आप छोटे कार्डों में पूर्ण आकार की छवियों को लोड कर रहे हैं और पृष्ठ इसके लिए भुगतान करता है।
सेटिंग्स #
द सेटिंग्स अनुभाग समग्र गैलरी व्यवहार को नियंत्रित करता है।
- फ़िल्टर Nav दिखाएँ?: ग्रिड के ऊपर श्रेणी फ़िल्टर बटन प्रदर्शित करता है।
- “All” फ़िल्टर टैब दिखाएँ: एक ऑल बटन जोड़ता है ताकि विज़िटर फ़िल्टर को रीसेट कर सकें।
- सभी श्रेणियाँ पाठः रीसेट बटन के लिए लेबल, आमतौर पर सभी।
- टूलटिप दिखाएँ?: फ़िल्टर बटन पर टूलटिप्स सक्षम करता है।
- छवि पहलू अनुपातः प्रत्येक छवि पर एक सुसंगत अनुपात लागू करता है।
- गटर: ग्रिड आइटम के बीच का स्थान।
- चिनाई: असमान छवि ऊंचाई के लिए ग्रिड को चिनाई लेआउट में स्विच करता है।
- होवर स्केलः होवर पर छवि को थोड़ा ज़ूम करता है।
- स्केल मानः छवि कितनी ज़ूम करती है, जैसे कि १.१।
- झुकाव प्रभावः कर्सर का अनुसरण करने वाला ३D झुकाव जोड़ता है।
ओवरले सेटिंग #
द ओवरले सेटिंग अनुभाग यह तय करता है कि जब कोई आगंतुक किसी वस्तु पर मंडराता है तो क्या दिखाई देता है।
- शीर्षक दिखाएँ?: होवर पर आइटम शीर्षक प्रदर्शित करें।
- उपशीर्षक दिखाएँ?: होवर पर उपशीर्षक प्रदर्शित करें।
- श्रेणी दिखाएँ?: फ़िल्टर श्रेणी लेबल दिखाएँ।
- होवर आइकन?: एक आइकन जोड़ें जो होवर पर दिखाई देता है, जैसे आवर्धक ग्लास या लिंक प्रतीक।
- ओवरले प्रकारः ओवरले दिखाई देने पर चुनें होवर पर सबसे आम है।
- कैप्शनः छवि के नीचे कैप्शन क्षेत्र टॉगल करें।
- होवर दिशाः दिशात्मक होवर प्रभाव सक्षम करता है।
स्टाइल टैब में गैलरी को स्टाइल करें #
द शैली टैब कार्ड कंटेनर, छवि, ओवरले और बटन को कवर करता है।
आइटम शैली #
आइटम शैली कार्ड रैपर को नियंत्रित करता है पैडिंग, मार्जिन, सीमा प्रकार, सीमा चौड़ाई, सीमा रंग, और सीमा त्रिज्या यहां सेट करें एक छोटे त्रिज्या के साथ एक पतली सीमा एक प्रकाश पृष्ठभूमि से कार्ड को अलग करने का एक त्वरित तरीका है।
छवि शैली #
छवि शैली चित्र को स्वयं और उसकी मँडराती स्थिति को स्टाइल करता है।
- छवि शैलीः डिफ़ॉल्ट या होवर ओवरले लुक चुनें।
- होवर ओवरले रंगः टिंट जो छवि को होवर पर कवर करता है।
- शीर्षक शैलीः आइटम शीर्षक के लिए रंग और टाइपोग्राफी।
- कैप्शन उपशीर्षक शैलीः उपशीर्षक के लिए रंग और टाइपोग्राफी।
- चिह्न शैलीः होवर आइकन के लिए आइकन का आकार और रंग।
ओवरले #
द ओवरले अनुभाग होवर एनीमेशन चुनता है विकल्पों में शामिल हैं फीका, बाएं से स्लाइड, ऊपर से स्लाइड, नीचे से मास्क, घुमाएं, ज़ूम इन और स्केल अप करें फीका इन सुरक्षित डिफ़ॉल्ट है; स्लाइड और रोटेट वेरिएंट स्वयं पर अधिक ध्यान आकर्षित करते हैं, जो आप पोर्टफोलियो पर चाहते हैं या नहीं भी चाहते हैं।
बटन एक और दो शैली #
एक्शन बटन को अलग से स्टाइल करें प्रत्येक बटन में टाइपोग्राफी, पैडिंग, टेक्स्ट रंग, पृष्ठभूमि रंग, सीमा, सीमा त्रिज्या और बॉक्स छाया के लिए नियंत्रण के साथ सामान्य और होवर राज्य हैं।
देखें लाइव रिजल्ट #
अंतिम गैलरी देखने के लिए पृष्ठ प्रकाशित या पूर्वावलोकन करें आगंतुक ओवरले, शीर्षक और आइकन देखने के लिए किसी आइटम पर होवर कर सकते हैं, या लाइटबॉक्स या लिंक खोलने के लिए क्लिक कर सकते हैं यदि आपने फ़िल्टर नेविगेशन सक्षम किया है, तो वे केवल मिलान करने वाली छवियों को दिखाने के लिए श्रेणी बटन भी क्लिक कर सकते हैं।
एक बात की जांच करें: यदि फ़िल्टर बटन लाइव पेज पर प्रतिक्रिया नहीं देते हैं, लेकिन संपादक में ठीक काम करते हैं, तो आपका कैशिंग या ऑप्टिमाइज़ेशन प्लगइन शायद गैलरी के जावास्क्रिप्ट को स्थगित या संयोजित कर रहा है जेएस ऑप्टिमाइज़ेशन से मास्टर एडॉन्स स्क्रिप्ट को बाहर करें और कैश को साफ़ करें।
सामान्य उपयोग के मामले #
- पोर्टफोलियो पेजः ग्राहकों को ब्रांडिंग, वेब डिज़ाइन या फ़ोटोग्राफ़ी द्वारा फ़िल्टर करने दें।
- उत्पाद सूचीः श्रेणी, रंग या संग्रह के आधार पर वस्तुओं को समूहित करें।
- यात्रा या रियल एस्टेट गैलरीः स्थान या संपत्ति के प्रकार के अनुसार फ़िल्टर करें।
- टीम या इवेंट एल्बमः विभाग या सत्र द्वारा फ़ोटो व्यवस्थित करें।
बेहतर फ़िल्टर करने योग्य गैलरी के लिए युक्तियाँ #
- लगातार छवि आकार का उपयोग करें। यह ग्रिड को साफ रखता है, खासकर जब चिनाई बंद हो।
- फ़िल्टर लेबल को छोटा रखें। एक या दो शब्द फ़िल्टर बार में सबसे उपयुक्त होते हैं।
- छवि पहलू अनुपात सक्षम करें यदि आपके स्रोत छवियों के विभिन्न आयाम हैं।
- एक मजबूत होवर प्रभाव चुनें स्टैकिंग स्केल, झुकाव और एक व्यस्त ओवरले के बजाय।
- अपलोड करने से पहले छवियों को संपीड़ित करें। असम्पीडित तस्वीरों से भरी गैलरी धीमे पृष्ठ के सबसे आम कारणों में से एक है।
वीडियो ट्यूटोरियल #
यदि आप फ़िल्टर करने योग्य गैलरी विजेट को कार्रवाई में देखना चाहते हैं, तो यह वीडियो लाइव पेज पर फ़िल्टर किए गए ग्रिड में गैलरी आइटम जोड़ने से, पूर्ण सेटअप के माध्यम से चलता हैः
अक्सर पूछे जाने वाले प्रश्न #
मैं एलिमेंटर में फ़िल्टर करने योग्य गैलरी कैसे बना सकता हूं?
एलिमेंटर के लिए मास्टर एडॉन्स इंस्टॉल करें, फ़िल्टर करने योग्य गैलरी विजेट जोड़ें, गैलरी आइटम बनाएं, प्रत्येक आइटम के लिए एक फ़िल्टर लेबल असाइन करें, और सेटिंग्स अनुभाग में फ़िल्टर नव दिखाएं सक्षम करें विज़िटर तब ग्रिड को फ़िल्टर करने के लिए श्रेणी बटन पर क्लिक कर सकते हैं।
क्या मास्टर ऐडऑन फ़िल्टर करने योग्य गैलरी मुफ़्त है?
हाँ। फ़िल्टर करने योग्य छवि गैलरी मुफ़्त मास्टर ऐडऑन प्लगइन का हिस्सा है, इसलिए आपको इसका उपयोग करने के लिए प्रो लाइसेंस की आवश्यकता नहीं है।
क्या मैं गैलरी छवियों में एक लाइटबॉक्स जोड़ सकता हूँ?
हाँ प्रत्येक गैलरी आइटम के लिए पॉपअप या लिंक विकल्प को पॉपअप पर सेट करें आगंतुक तब एक छवि को लाइटबॉक्स में खोलने के लिए क्लिक कर सकते हैं।
क्या विजेट चिनाई लेआउट का समर्थन करता है?
हाँ। असमान ऊंचाई वाले Pinterest-शैली लेआउट में छवियों को प्रदर्शित करने के लिए सेटिंग्स अनुभाग में चिनाई टॉगल चालू करें।
क्या मैं गैलरी आइटम में रिबन या बैज जोड़ सकता हूँ?
हाँ गैलरी आइटम में शो रिबन चालू करें और रिबन टेक्स्ट दर्ज करें, जैसे लोकप्रिय या बिक्री रिबन छवि कार्ड पर दिखाई देता है।
लपेटकर #
मास्टर एडॉन्स फ़िल्टर करने योग्य छवि गैलरी विजेट एक स्थिर छवि ग्रिड को एक श्रेणी-आधारित गैलरी में बदल देता है आगंतुक वास्तव में ब्राउज़ कर सकते हैं फ़िल्टर नेविगेशन, होवर ओवरले, रिबन और लाइटबॉक्स समर्थन सभी में निर्मित होते हैं, इसलिए आपको अधिकांश परियोजनाओं के लिए एक अलग गैलरी प्लगइन पर काम करते हुए देख सकते हैं फ़िल्टर करने योग्य छवि गैलरी विजेट पृष्ठ.
अधिक छवि टूल के लिए, अन्वेषण करें उन्नत छवि विजेट, छवि हिंडोला, और गैलरी स्लाइडरके हमारे राउंडअप को भी पढ़ सकते हैं एलिमेंटर फिल्टर करने योग्य गैलरी प्लगइन्स या पूरा ब्राउज़ करें मास्टर ऐडऑन विजेट और एक्सटेंशन संग्रह।
