उन्नत छवि

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

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

पहले देखना पसंद करते हैं यह छोटा ट्यूटोरियल उन्नत छवि विजेट अंत से अंत तक चलता हैः

उन्नत छवि विजेट क्या करता है #

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

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

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

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

उन्नत छवि विजेट कैसे जोड़ें #

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

छवि सेट करें #

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

एक होवर छवि जोड़ें #

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

एक रिबन जोड़ें #

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

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

सेटिंग्स: लाइटबॉक्स, झुकाव, और छाया #

द सेटिंग्स टैब वह जगह है जहां व्यवहार रहता है ये अतिरिक्त हैं जो विजेट को एक सादे छवि से अलग करते हैं।

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

छवि और रिबन को स्टाइल करें #

द शैली टैब आकार और रंगों को संभालता है। द छवि अनुभाग चित्र का स्वरूप ही निर्धारित करता है।

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

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

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

प्रकाशित करें या पूर्वावलोकन करें और छवि आपके रिबन के साथ प्रस्तुत होती है और प्रभाव लाइव होते हैं: छवियों को स्वैप करने के लिए होवर करें, झुकाव के लिए होवर करें, या लाइटबॉक्स खोलने के लिए क्लिक करें, यह इस बात पर निर्भर करता है कि आपने क्या चालू किया है।

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

• उत्पाद शॉट्स आगे से पीछे या वैकल्पिक कोण पर होवर स्वैप के साथ।
• पोर्टफोलियो थंबनेल कि लाइटबॉक्स में पूर्ण आकार खोलें।
• प्रोमो छवियां कोने में एक नया या बिक्री रिबन के साथ।
• फ़ीचर ग्राफिक्स आंदोलन के लिए एक सूक्ष्म झुकाव के साथ।
• हीरो छवियाँ गहराई के लिए रंगीन छाया का उपयोग करना।

उन्नत छवि विजेट के साथ काम करने के लिए युक्तियाँ #

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

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

लपेटकर #

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