गैलरी स्लाइडर

एक गैलरी स्लाइडर थंबनेल के क्लिक करने योग्य सेट के साथ एक बड़ी पूर्वावलोकन छवि को जोड़ता है, इसलिए आगंतुक एक समय में एक स्लाइड के माध्यम से क्लिक करने के बजाय सीधे उस फोटो पर जा सकते हैं जो वे चाहते हैं गैलरी स्लाइडर विजेट इन एलिमेंट के लिए मास्टर ऐडऑन कुछ ही मिनटों में इस लेआउट का निर्माण करता है आप छवियों को चुनते हैं, थंबनेल ग्रिड या हिंडोला चुनते हैं, और एलिमेंट पैनल से हर हिस्से को स्टाइल करते हैं।

यह मार्गदर्शिका हर सेटिंग में चलती है, ताकि आप एक निर्माण कर सकें एलिमेंटर गैलरी स्लाइडर यह अनुमान लगाए बिना कि प्रत्येक नियंत्रण क्या करता है।

गैलरी स्लाइडर विजेट क्या करता है #

विजेट एक ग्रिड या थंबनेल के हिंडोला के बगल में एक बड़ी पूर्वावलोकन स्लाइड दिखाता है थंबनेल या तीर पर क्लिक करने से पूर्वावलोकन बदल जाता है कैप्शन, ऑटोप्ले, अनंत लूप, फीका या स्लाइड संक्रमण, और पूर्वावलोकन और थंबनेल के लिए अलग होवर राज्य सभी में निर्मित होते हैं यह पोर्टफोलियो, उत्पाद फ़ोटो, रियल एस्टेट लिस्टिंग, इवेंट एल्बम, या किसी भी पृष्ठ पर फिट बैठता है जहां आगंतुकों को छवियों के एक सेट को जल्दी से ब्राउज़ करने की आवश्यकता होती है।

इससे पहले कि आप शुरू करें #

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय। मदद चाहिए? देखना स्थापना गाइड.
• आपके मीडिया लाइब्रेरी में अपलोड की गई छवियों का एक सेट, आदर्श रूप से समान पहलू अनुपात पर।

एलिमेंटर गैलरी स्लाइडर विजेट कैसे जोड़ें #

एलिमेंट संपादक खोलें और खोजें गैलरी स्लाइडर एलिमेंट्स पैनल में, या मास्टर एडॉन्स सेक्शन में नीचे स्क्रॉल करें प्रत्येक मास्टर एडॉन्स विजेट में एक छोटा एमए बैज होता है, जो आपके पास कई एडऑन पैक स्थापित होने पर मदद करता है विजेट को अपने अनुभाग में खींचें।

सामग्री टैब में छवियाँ जोड़ें #

गैलरी #

विजेट खाली शुरू होता है। में सामग्री टैब, खोलें गैलरी अनुभाग और के तहत प्लस बटन पर क्लिक करें छवियाँ जोड़ें.

वर्डप्रेस मीडिया विंडो खुलती है गैलरी बनाएँ स्क्रीन स्लाइडर में इच्छित छवियों का चयन करें, फिर गैलरी डालने के लिए क्लिक करें प्रत्येक छवि के लिए ऑल्ट टेक्स्ट और कैप्शन भरने के लिए यहां एक मिनट का समय लें कैप्शन फ़ील्ड जितना दिखता है उससे अधिक मायने रखता है: विजेट बाद में पूर्वावलोकन छवि के तहत इसे प्रिंट कर सकता है, और यदि फ्रंटएंड पर कैप्शन गायब है, तो यह स्क्रीन जांचने के लिए पहली जगह है।

आपके द्वारा गैलरी डालने के बाद, संपादक तुरंत पूर्ण लेआउट दिखाता है: नेविगेशन तीर के साथ बाईं ओर बड़ा पूर्वावलोकन, और दाईं ओर थंबनेल ग्रिड चयनित छवियां गैलरी अनुभाग के अंदर भी दिखाई देती हैं, जहां आप उन्हें फिर से व्यवस्थित या हटा सकते हैं।

थंबनेल #

द थंबनेल अनुभाग पूर्वावलोकन के बगल में छोटी छवियों को नियंत्रित करता है।

• थंबनेल: थंबनेल क्षेत्र को पूरी तरह से दिखाएं या छिपाएं।
• हिंडोला/ग्रिड: एक स्थिर ग्रिड और एक स्क्रॉलिंग हिंडोला के बीच स्विच करें।
• छवि संकल्पः आकार वर्डप्रेस थंबनेल के लिए कार्य करता है थंबनेल (१५० x १५०) पृष्ठ प्रकाश रखता है।
• कॉलम: ग्रिड के लिए १ से १२ कॉलम चुनें २ से ३ कॉलम में जाने से ग्रिड लंबा और संकीर्ण से एक तंग ब्लॉक में बदल जाता है।
• आदेश देना: डिफ़ॉल्ट क्रम रखें या छवियों को क्रमबद्ध करने का तरीका बदलें।
• कैप्शनः थंबनेल पर एक कैप्शन दिखाएं, या इसे कोई नहीं पर छोड़ दें।

पर स्विच हिंडोला मोड ग्रिड को थंबनेल की एक पट्टी के साथ बदल देता है और सेटिंग्स का अपना समूह जोड़ता हैः ओरिएंटेशन (क्षैतिज या ऊर्ध्वाधर), प्रति दृश्य स्लाइड, एक तीर के साथ टॉगल करें तीर स्थिति ड्रॉपडाउन, प्लस ऑटोप्ले, अनंत लूप, और दिशा केवल थंबनेल पट्टी के लिए नियंत्रण ग्रिड एक दर्जन या उससे कम छवियों के लिए बेहतर काम करता है; उसके बाद, हिंडोला बहुत अधिक ऊर्ध्वाधर स्थान बचाता है।

पूर्वावलोकन #

द पूर्वावलोकन अनुभाग बड़ी स्लाइड का प्रबंधन करता है और यह कैसे व्यवहार करता है।

• छवि संकल्पः बड़ी छवि के लिए परोसा गया आकार पूर्ण सबसे अच्छा दिखता है लेकिन सबसे अधिक वजन होता है, इसलिए अपने मूल को संपीड़ित करें।
• से लिंक करेंः पूर्वावलोकन छवि को URL या मीडिया फ़ाइल से लिंक करें, या इसे कोई नहीं पर रखें।
• कैप्शनः पूर्वावलोकन के नीचे छवि कैप्शन प्रदर्शित करें।
• दिशा: बाएँ से दाएँ या दाएँ से बाएँ स्लाइड करें।
• अनंत लूपः अंतिम स्लाइड के बाद पहली स्लाइड पर लौटें।
• ऑटो ऊंचाईः स्लाइडर को प्रत्येक छवि के लिए अपनी ऊंचाई समायोजित करने दें मिश्रित अनुपात के लिए आसान है, हालांकि स्लाइड बदलने के रूप में पृष्ठ थोड़ा स्थानांतरित हो जाएगा।
• ऑटोप्ले: स्वचालित रूप से स्लाइड अग्रिम करें इसे समायोजित करने के लिए संपादन आइकन पर क्लिक करें।
• प्रभाव: स्लाइड या फ़ेड संक्रमण चुनें।
• गति (एमएस): संक्रमण कितने समय तक रहता है डिफ़ॉल्ट १००० है।
• तीर: नेविगेशन तीर दिखाएँ या छिपाएँ, और उनका चुनें स्थिति, जैसे कि टॉप लेफ्ट।

स्टाइल टैब में स्लाइडर डिज़ाइन करें #

लेआउट #

द लेआउट अनुभाग यह तय करता है कि पूर्वावलोकन थंबनेल के सापेक्ष कहाँ बैठता है। पूर्वावलोकन स्थिति ऊपर, दाएं, नीचे और बाएं प्रदान करता है ऊपर या नीचे के साथ, थंबनेल पूर्वावलोकन के नीचे या ऊपर पंक्तिबद्ध होते हैं और एक क्षैतिज संरेखित नियंत्रण a के साथ प्रकट होता है हिंडोला चौड़ाई स्लाइडर बाएं या दाएं के साथ, आपको एक पूर्वावलोकन चौड़ाई (%) स्लाइडर बजाय।

• ढेर लगाना: चुनें कि लेआउट लंबवत रूप से कब स्टैक होता है, जैसे टैबलेट और मोबाइल।
• पूर्वावलोकन चौड़ाई (%): पूर्वावलोकन कितना क्षैतिज स्थान लेता है ६० और ७० प्रतिशत के बीच कहीं तीन-स्तंभ ग्रिड के बगल में अच्छी तरह से बैठता है।
• रिक्ति: पूर्वावलोकन और थंबनेल के बीच का अंतर।

पूर्वावलोकन #

स्टाइल टैब का पूर्वावलोकन अनुभाग बड़े स्लाइड कंटेनर को स्टाइल करता है।

• कस्टम ऊंचाईः स्वचालित ऊंचाई ओवरराइड करें।
• पृष्ठभूमि रंगः छवि के पीछे का क्षेत्र भरता है।
• सीमा प्रकारः डिफ़ॉल्ट, कोई नहीं, ठोस, डबल, बिंदीदार, धराशायी, या ग्रूव, सक्रिय होने पर चौड़ाई और रंग नियंत्रण के साथ।
• सीमा त्रिज्या और बॉक्स छायाः कोनों को गोल करें और स्लाइड को पृष्ठ से हटा दें।
• तीर: के साथ एक समर्पित समूह आकार, पैडिंग, सीमा त्रिज्या, संक्रमण, और अलग चूक, होवर, और विकलांग राज्य, प्रत्येक का अपना रंग और पृष्ठभूमि रंग है।

पूर्वावलोकन कैप्शन #

यदि आपने सामग्री टैब में कैप्शन सक्षम किया है, तो यह अनुभाग उन्हें स्थिति और शैली देता है। लंबवत संरेखित कैप्शन को स्लाइड के ऊपर, मध्य या नीचे रखता है, और क्षैतिज संरेखित बाएं, केंद्र, दाएं और औचित्य प्रदान करता है आपको भी मिलता है टाइपोग्राफी, पैडिंग, मार्जिन, सीमा प्रकार, और सीमा त्रिज्या नियंत्रण।

पूर्वावलोकन होवर प्रभाव #

पूर्वावलोकन होवर प्रभाव जब आगंतुक स्लाइड पर मंडराते हैं तो कैप्शन को एनिमेट करता है। एक उठाओ प्रभाव, सेट करें संक्रमण, फिर स्टाइल करें चूक और होवर रंग, पृष्ठभूमि प्रकार, अस्पष्टता और पाठ छाया के साथ राज्य।

थंबनेल #

स्टाइल टैब का थंबनेल अनुभाग छोटी छवियों को संभालता हैः लंबवत संरेखित पूरे ब्लॉक के लिए, क्षैतिज रिक्ति और लंबवत रिक्ति थंबनेल के बीच, प्लस सीमा प्रकार और सीमा त्रिज्या.

थंबनेल होवर प्रभाव #

यह खंड तीन राज्यों में थंबनेल को स्टाइल करता हैः चूक, होवर, और सक्रिय (वर्तमान स्लाइड से मेल खाने वाला थंबनेल)। द छवियाँ समूह पृष्ठभूमि रंग को कवर करता है, अपारदर्शिता, स्केल, बॉक्स छाया, और सीएसएस फिल्टर। बॉक्स से बाहर, निष्क्रिय थंबनेल 0.65 अपारदर्शिता पर बैठते हैं इसलिए सक्रिय थंबनेल अलग दिखता है। द ओवरले समूह एक रंग या ढाल परत जोड़ता है ब्लेंड मोड, मार्जिन, अपारदर्शिताऔर सीमा नियंत्रण।

वहाँ भी है पैटर्न तैयार शैली प्रीसेट के साथ स्टाइल टैब के नीचे अनुभाग एक ही अनुभाग कई मास्टर एडॉन्स विजेट में दिखाई देता है।

देखें लाइव रिजल्ट #

पृष्ठ का पूर्वावलोकन करने के लिए आंख आइकन पर क्लिक करें आगंतुक बड़े पूर्वावलोकन के बगल में थंबनेल ग्रिड देखते हैं थंबनेल पर क्लिक करने से पूर्वावलोकन तुरंत बदल जाता है, तीर क्रम में स्लाइड के माध्यम से कदम रखते हैं, और कैप्शन प्रत्येक छवि का अनुसरण करता है।

सामान्य उपयोग के मामले #

• पोर्टफोलियो शोकेस: बाकी प्रोजेक्ट के साथ एक बड़ी हीरो छवि एक क्लिक दूर।
• उत्पाद पृष्ठः ज़ूम किए गए पूर्वावलोकन और थंबनेल पिकर के साथ क्लासिक दुकान लेआउट।
• रियल एस्टेट लिस्टिंग: खरीदारों को पृष्ठ छोड़े बिना कमरों में पलटने दें।
• घटना या शादी के एल्बमः पूरा सेट दृश्यमान रखते हुए एक फोटो हाइलाइट करें।

एक बेहतर गैलरी स्लाइडर के लिए युक्तियाँ #

• छवि पहलू अनुपात का मिलान करें। ऑटो ऊंचाई क्रॉपिंग आश्चर्य को रोकती है, लेकिन लगातार अनुपात क्लीनर दिखते हैं और लेआउट को कूदने से रोकते हैं।
• सही संकल्पों की सेवा करें। पूर्वावलोकन के लिए पूर्ण, ग्रिड के लिए थंबनेल (150 x 150)। अपलोड करने से पहले संपीड़ित करें; के लिए हमारी मार्गदर्शिका देखें सर्वश्रेष्ठ वर्डप्रेस इमेज ऑप्टिमाइज़र प्लगइन्स.
• मीडिया लाइब्रेरी में कैप्शन लिखें गैलरी डालने से पहले ताकि हर स्लाइड तैयार हो।
• ऑटोप्ले की गति को उचित रखें। आगंतुकों को वास्तव में प्रत्येक छवि देखने के लिए समय दें।
• सक्रिय स्थिति का उपयोग करें। निष्क्रिय थंबनेल पर डिफ़ॉल्ट 0.65 अपारदर्शिता पहले से ही आंख का मार्गदर्शन करती है; सक्रिय थंबनेल पर एक बॉर्डर या मामूली पैमाना इसे और भी स्पष्ट कर देता है।

वीडियो ट्यूटोरियल #

इसके बजाय सेटअप देखना पसंद करते हैं यह वीडियो पूरी प्रक्रिया को कवर करता है, विजेट को लाइव पेज पर तैयार स्लाइडर में खींचने सेः

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

मास्टर एडॉन्स गैलरी स्लाइडर विजेट पूरे पूर्वावलोकन-प्लस-थंबनेल पैटर्न को कवर करता है: ग्रिड या हिंडोला थंबनेल, किसी भी तरफ पूर्वावलोकन, कैप्शन और प्रति-राज्य स्टाइल, सभी एक पैनल से और बिना किसी कस्टम कोड के।

छवियों को प्रदर्शित करने के अधिक तरीकों के लिए, जांचें छवि हिंडोला, फिल्टर करने योग्य गैलरी, और उन्नत छवि डॉक्स, या हमारे में विकल्पों की तुलना करें एलिमेंट छवि हिंडोला गाइड। प्लगइन में बाकी सब कुछ देखने के लिए, ब्राउज़ करें मास्टर ऐडऑन विजेट और एक्सटेंशन संग्रह या मूल्य निर्धारण योजनाएं.