छवि हिंडोला

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

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

पहले देखना पसंद करते हैं? यह लघु ट्यूटोरियल गैलरी से स्टाइलिंग तक छवि हिंडोला को कवर करता हैः

इमेज कैरोसेल विजेट क्या करता है #

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

यह स्विपर इंजन पर चलता है, इसलिए स्लाइडर शुरू से ही स्पर्श अनुकूल और उत्तरदायी है एक फोन पर एक ही हिंडोला कम कॉलम में फिर से बहता है, और यदि आप रास्ते में आते हैं तो आप मोबाइल पर तीर छिपा सकते हैं।

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

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

इमेज कैरोसेल विजेट कैसे जोड़ें #

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

अपनी छवियों को जोड़ें और ऑर्डर करें #

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

पैनल में वापस, छवियाँ अनुभाग आपको तीन और नियंत्रण देता हैः

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

नेविगेशन सेट करें #

द नेविगेशन अनुभाग नियंत्रित करता है कि लोग स्लाइडों के माध्यम से कैसे आगे बढ़ते हैं। से शुरू करें नेविगेशन ड्रॉपडाउन, जो नियंत्रण शैली निर्धारित करता है: तीर और बिंदु, तीर और अंश, तीर, बिंदु, प्रगति, या कोई नहीं।

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

हिंडोला व्यवहार को ट्यून करें #

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

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

३ डी प्रभाव के लिए कवरफ्लो लेआउट का उपयोग करें #

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

हिंडोला स्टाइल करें #

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

हिंडोला आइटम #

यह खंड छवि स्लाइड्स को स्टाइल करता है इसमें सामान्य, होवर और सक्रिय राज्य हैं, इसलिए आप केंद्रित स्लाइड को बाकी हिस्सों से बाहर खड़ा कर सकते हैं।

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

लाइटबॉक्स, ओवरले और कैप्शन #

द लाइटबॉक्स अनुभाग पूर्वावलोकन आइकन को स्टाइल करता है जो प्रत्येक छवि पर बैठता है और उसके पीछे ओवरले, साथ ही कैप्शन टेक्स्ट भी।

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

नेविगेशन तीर #

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

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

पेज पर रिजल्ट #

प्रकाशित करें या पूर्वावलोकन करें और हिंडोला लाइव चलता है: यह छवियों के माध्यम से ऑटोप्ले करता है, लूप्स यदि आपने इसे चालू किया है, और क्लिक पर लाइटबॉक्स में प्रत्येक को खोलता है आपकी स्टाइलिंग के माध्यम से, गोल सीमा वाले स्लाइड से कस्टम तीर बटन तक।

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

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

छवि हिंडोला के साथ काम करने के लिए युक्तियाँ #

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

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

लपेटकर #

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