एलिमेंटर में एक छवि हिंडोला कैसे बनाएं

विशेष रुप से प्रदर्शित छवि: एक बड़े पूर्वावलोकन, लाइटबॉक्स नियंत्रण और थंबनेल पट्टी के साथ एलिमेंटर छवि हिंडोला

ड्रॉप द छवि हिंडोला विजेट पृष्ठ पर, मीडिया लाइब्रेरी से अपनी छवियों को चुनें, प्रत्येक डिवाइस के लिए स्लाइड-प्रति-दृश्य सेट करें, और ऑटोप्ले चालू करें चार चरण, लगभग दो मिनट, और लाइसेंस की जरूरत नहीं.

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

आपको क्या चाहिए

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

चरण १: विजेट जोड़ें

एलिमेंटर में पेज खोलें और “image कैरोसेल।” के लिए विजेट पैनल खोजें, इसे एक कंटेनर में खींचें।

मास्टर एडॉन्स विजेट पैनल में एलिमेंटर इमेज कैरोसेल विजेट

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

चरण २: अपनी छवियां जोड़ें

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

एलिमेंटर छवि हिंडोला के लिए छवियों का चयन करने के लिए गैलरी का संपादन

सामग्री सेटिंग्स के अंतर्गत आपको छवि आकार, कैप्शन स्रोत और लिंक व्यवहार मिलेगा।

एलिमेंटर छवि हिंडोला के लिए छवि सामग्री सेटिंग्स आकार, कैप्शन और लिंक विकल्प दिखा रही हैं

छवि का आकार वह सेटिंग है जिसे लोग पूर्ण और खेद पर छोड़ देते हैं। पूर्ण का अर्थ है मूल अपलोड: एक 4000px कैमरा निर्यात 400px स्लाइड में परोसा गया। वर्डप्रेस ने पहले से ही छोटे संस्करण तैयार किए हैं; चुनना medium_large या large और आप हिंडोले के वजन को बिना किसी स्पष्ट अंतर के अधिकांश भाग से काट देंगे।

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

चरण ३: नेविगेशन

तीर, बिंदु और अंश विकल्पों के साथ एलिमेंटर छवि हिंडोला के लिए नेविगेशन सेटिंग्स

तीर, डॉट्स, अंश, या एक स्क्रॉलबार आपके पास कितनी स्लाइड्स के आधार पर चुनेंः

  • ८ स्लाइड के तहतः डॉट्स लोग एक नज़र में पूरे सेट को देख सकते हैं और चारों ओर कूद सकते हैं।
  • 8 से 20: तीर केवल बीस डॉट्स एक धब्बा है, नियंत्रण नहीं है।
  • 20 से अधिक: तीर प्लस अंश (“०४/३२”) संख्या ही एकमात्र ऐसी चीज है जो किसी को बताती है कि वे कहां हैं।

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

चरण 4: हिंडोला व्यवहार

प्रति दृश्य स्लाइड, ऑटोप्ले, लूप और गति के साथ एलिमेंटर छवि हिंडोला सेटिंग्स पैनल

यह पैनल है जो तय करता है कि हिंडोला सही लगता है या नहीं।

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

स्क्रॉल करने के लिए स्लाइड। निरंतर ब्राउज़िंग अनुभव के लिए इसे १ पर सेट करें, या पृष्ठ-शैली पेजिंग के लिए स्लाइड-प्रति-दृश्य से मेल करें जब स्लाइड समूह बनाते हैं तो मिलान बेहतर होता है; १ लंबे समय तक अविभाज्य सेट के लिए बेहतर है।

ऑटोप्ले। सजावटी दीर्घाओं के लिए इसे चालू करें यदि स्लाइड क्लिक करने योग्य हैं तो इसे बंद करें, क्योंकि कोई व्यक्ति एक छवि के लिए पहुंच जाएगा और इसे प्रतिस्थापित करने वाले पर क्लिक करेगा पॉज़-ऑन-होवर डेस्कटॉप को कवर करता है लेकिन स्पर्श पर कोई होवर नहीं है।

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

गति। ३०० से ५०० एमएमएस २०० से नीचे यह एक संक्रमण के बजाय एक कट की तरह दिखता है ८०० से ऊपर लोग दो बार क्लिक करना शुरू करते हैं।

कवरफ्लो लेआउट

एलिमेंटर इमेज कैरोसेल विजेट सेटिंग्स में कवरफ्लो लेआउट विकल्प

मानक से कवरफ्लो में लेआउट स्विच करें और साइड स्लाइड ३ डी में दूर घूमती है, मंद और पीछे हटती है, जिससे केंद्र स्लाइड एकमात्र पठनीय के रूप में रह जाती है।

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

दाएं जाने के लिए दो सेटिंग्स: 30 और 40 डिग्री के बीच घुमाएं (पिछले 50 और साइड स्लाइड अपठनीय स्लिवर बन जाते हैं), और केंद्रित स्लाइड, या सक्रिय छवि बाईं ओर फ्लश बैठती है और संरचना ढह जाती है।

कवरफ्लो चार गहराई-आधारित शैलियों में से एक है फ्लिप, चाप और कक्षा अन्य तीन हैं, और एलिमेंटर ३ डी हिंडोला गाइड कवर करता है कि प्रत्येक व्यक्ति किसके लिए अच्छा है।

स्लाइडों को स्टाइल करना

रिक्ति, सीमा त्रिज्या और होवर नियंत्रण के साथ एलिमेंटर हिंडोला आइटम के लिए स्टाइल टैब

स्टाइल टैब स्लाइड, बॉर्डर रेडियस, शैडो और होवर स्टेट्स के बीच की दूरी को संभालता है।

एक दूसरे विचार के लायक सेटिंग है गैपशून्य अंतराल हिंडोला को एक सतत छवि पट्टी के रूप में पढ़ता है, जो पैनोरमा के लिए सही है और अलग-अलग वस्तुओं के लिए गलत है। 16 से 24px वह सीमा है जहां स्लाइड अलग-अलग कार्ड के रूप में पढ़ती हैं, पंक्ति विरल नहीं दिखती।

होवर प्रभाव (स्केल, ओवरले, कैप्शन प्रकट) पूरे सेट पर लागू होते हैं, प्रति स्लाइड नहीं। पैमाने को 1.05 से नीचे रखें। एक स्लाइड जो होवर पर 15% बढ़ती है वह अपने पड़ोसियों को धकेलती है और एक लेआउट बग की तरह दिखती है।

लाइटबॉक्स और कैप्शन

एलिमेंटर छवि हिंडोला के लिए लाइटबॉक्स और कैप्शन शैली सेटिंग्स

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

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

एक सावधानी: लाइटबॉक्स पूर्ण आकार की छवि परोसता है, थंबनेल नहीं। यदि आप छवि का आकार निर्धारित करते हैं medium_large हिंडोला और आपके मूल ८ एमबी कैमरा फाइलें हैं, लाइटबॉक्स अभी भी ८ एमबी संस्करण लाएगा अपलोड पर मूल को संपीड़ित करें, न केवल प्रदर्शन आकार।

यदि आप थंबनेल नेविगेशन चाहते हैं

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

विट्रिन प्लेट गैलरी एकल प्लेट, थंबनेल स्ट्रिप और फ्रेम-डेटा टेबल के साथ एलिमेंटर थंबनेल गैलरी

लाइव डेमो

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

तीर स्टाइलिंग

एलिमेंटर छवि हिंडोला के लिए नेविगेशन तीर शैली सेटिंग्स

आकार, रंग, पृष्ठभूमि, सीमा त्रिज्या और स्थिति: हिंडोला के अंदर, इसके बाहर, या किनारों को ओवरलैप करना।

हिंडोला के बाहर स्थित तीर क्षैतिज कमरे की जरूरत है, और एक पूर्ण चौड़ाई वाले कंटेनर पर कोई भी नहीं है वे क्लिप करेंगे या तो कंटेनर को व्यूपोर्ट से संकीर्ण रखें या अंदर तीर रखें।

परिणाम

एलिमेंटर में निर्मित तैयार प्रतिक्रियाशील छवि हिंडोला सामने के छोर पर प्रस्तुत किया गया है

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

दो गलतियाँ जो हिंडोला को धीमा कर देती हैं

पूर्ण आकार की छवियों की सेवा। ऊपर कवर किया गया है, और यह बड़ा है एक फोटोग्राफी साइट पर पूर्ण आकार में एक दस-स्लाइड हिंडोला २० एमबी हो सकता है एक ही हिंडोला पर large 2MB से कम है और कोई नहीं बता सकता।

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

लोगो तस्वीरों से अलग काम है वे बेमेल आकार और रंगों में बदल जाते हैं और एक पंक्ति में बैठने से पहले शाम को बाहर की जरूरत होती है, जो लोगो हिंडोला वॉकथ्रू से होकर जाता है।

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

क्या एलिमेंटर के पास एक मुफ्त छवि हिंडोला है?

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

मैं एक एलिमेंट छवि हिंडोला को उत्तरदायी कैसे बना सकता हूं?

सभी स्क्रीन के लिए एक मान छोड़ने के बजाय सेटिंग के शीर्ष पर डिवाइस आइकन का उपयोग करके प्रत्येक ब्रेकपॉइंट पर स्लाइड-प्रति-दृश्य अलग से सेट करें डेस्कटॉप पर चार, टैबलेट पर दो, मोबाइल पर एक अधिकांश दीर्घाओं के लिए काम करता है मोबाइल पर भी तीर का आकार जांचें, क्योंकि डिफ़ॉल्ट अक्सर ४४ पीएक्स सुलभ टैप लक्ष्य से नीचे होता है।

मैं एलिमेंटर छवि हिंडोला में कैप्शन कैसे जोड़ूं?

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

क्या मैं हिंडोला में प्रत्येक छवि को एक अलग यूआरएल से लिंक कर सकता हूं?

हाँ। सामग्री सेटिंग्स में लिंक व्यवहार को कस्टम यूआरएल पर सेट करें और प्रत्येक स्लाइड मीडिया आइटम के लिंक फ़ील्ड से अपना गंतव्य लेती है। जब लोग कई कस्टम यूआरएल के साथ एक छवि हिंडोला खोजते हैं तो वे यही करते हैं।

मेरी छवि हिंडोला क्यों कूदता है जब यह लूप करता है?

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

कैशिंग सक्षम करने के बाद मेरी छवि हिंडोला क्यों नहीं दिख रहा है?

init कोड चलने से पहले जावास्क्रिप्ट संयोजन या स्थगित करने से स्विपर लोड हो रहा है। बहिष्कृत करना swiper, elementor-frontend और jquery-core अपने कैश प्लगइन में जेएस अनुकूलन से, और लाइटस्पीड पर उन्हें अतिथि मोड बहिष्करण फ़ील्ड में भी जोड़ें पूर्ण वॉकथ्रूः एलिमेंटर स्विपर स्लाइडर समस्या निवारण.

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

40% सब कुछ बंद

प्रत्येक मास्टर एडॉन्स प्रो योजना, वार्षिक और जीवनकाल एक कोड, आठ दिन।

00दिनों
00घंटे
00मिन
00सेकंड

सोमवार 14 सितंबर, 23:59 ईटी को समाप्त होता है

  • व्यक्तिगत1 साइट $129$77
  • व्यापार5 साइटें $199$119
  • डेवलपरअसीमित साइटेंएजेंसियों के लिए सर्वश्रेष्ठ $599$359

एक बार भुगतान करें कोई नवीनीकरण नहीं, कभी भी।

कूपन कोड MALIFE40
अब ४०% की छूट प्राप्त करें
  • 30,000+ सक्रिय इंस्टाल
  • 212 समीक्षाओं में से 4.5/5
  • 14 दिन का पैसा वापस