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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

लाइव डेमो

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

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

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

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

परिणाम

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

हर छवि को एक ही ऊंचाई पर रखना

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

.same-height .swiper-slide img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

प्रत्येक स्लाइड तब 260px लंबी होती है और ब्राउज़र जो कुछ भी फिट नहीं होता है वह फसल करता है।

यदि आप एक सतत स्क्रॉल चाहते हैं

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

प्रत्येक छवि को अपना लिंक देना

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

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

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

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

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

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