इसके नीचे चश्मा के एक पैराग्राफ के साथ एक उत्पाद फोटो शायद ही कभी पढ़ा जाता है पक्ष के लिए एक किंवदंती के साथ एक मंजिल योजना को नजरअंदाज कर दिया जाता है समस्या हमेशा एक ही होती है: छवि और जानकारी दो अलग-अलग स्थानों में रहती है, और अधिकांश आगंतुक कभी भी उन्हें कनेक्ट करने के लिए पर्याप्त स्क्रॉल नहीं करते हैं।
एक छवि हॉटस्पॉट ठीक करता है कि आप सीधे फोटो पर छोटे मार्करों को पिन करते हैं, और हर एक एक छोटे लेबल का खुलासा करता है जब कोई होवर या टैप करता है छवि हॉटस्पॉट विजेट मास्टर एडॉन्स से यह एलिमेंट संपादक के अंदर करता है एक छवि अपलोड करें, मार्करों को छोड़ दें जहां आप उन्हें चाहते हैं, प्रत्येक के लिए एक लेबल लिखें, और आप कर रहे हैं कोई सीएसएस नहीं, कोई कस्टम कोड नहीं।
एलिमेंट में इमेज हॉटस्पॉट क्या है?
एक छवि हॉटस्पॉट एक छवि पर एक विशिष्ट स्थिति में पिन किया गया एक छोटा इंटरैक्टिव मार्कर है प्रत्येक मार्कर का अपना लेबल, आइकन या लिंक होता है डेस्कटॉप पर, मार्कर पर मँडराते हुए सामग्री के साथ एक फ्लोटिंग पैनल दिखाता है मोबाइल पर, इसे टैप करना एक ही काम करता है।
एक उत्पाद फोटो में प्रत्येक सुविधा पर एक मार्कर हो सकता है एक मंजिल योजना अलग-अलग कमरों को चिह्नित कर सकती है एक स्क्रीनशॉट एक संक्षिप्त स्पष्टीकरण के साथ बटन या सेटिंग्स को इंगित कर सकता है छवि स्वयं नहीं बदलती है मार्कर केवल आगंतुकों को इसका पता लगाने का एक तरीका देते हैं।
एलिमेंटर में एक अंतर्निहित हॉटस्पॉट विजेट नहीं है मास्टर एडॉन्स संस्करण विजेट पैनल से सब कुछ संभालता है: मार्कर प्लेसमेंट, लेबल सामग्री, आइकन, एनिमेशन और स्टाइल आप पुनरावर्तक के माध्यम से प्रत्येक हॉटस्पॉट को व्यक्तिगत रूप से कॉन्फ़िगर करते हैं, और विजेट स्थिति और प्रतिक्रिया का ख्याल रखता है।
अपनी वेबसाइट पर छवि हॉटस्पॉट का उपयोग क्यों करें?
स्टेटिक छवियां आगंतुक को क्या देखती हैं और उन्हें क्या जानने की आवश्यकता है, के बीच एक अंतर पैदा करती हैं हॉटस्पॉट उस अंतर को बंद कर देते हैं।
एक उत्पाद तस्वीर पर, प्रत्येक सुविधा पर एक मार्कर पिन करें ताकि आगंतुक एक अलग सूची में स्क्रॉल किए बिना चश्मा देखें एक मंजिल योजना पर, कमरे या बूथों को चिह्नित करें ताकि प्रत्येक स्थान अपने नाम और विवरण के साथ खुल जाए एक इन्फोग्राफिक पर, दृश्य को साफ रखें और मार्करों को अतिरिक्त संदर्भ ले जाने दें स्क्रीनशॉट पर, एक ट्यूटोरियल या ऑनबोर्डिंग प्रवाह के लिए विशिष्ट बटन या सेटिंग्स को इंगित करें एक टीम फोटो पर, लोगों या विभागों को लेबल करें।
संरचना हमेशा एक ही होती है: एक छवि, कई मार्कर, प्रत्येक एक सामग्री का खुलासा करता है जब इसके साथ बातचीत की जाती है आगंतुक छवि और उसके नीचे एक पाठ ब्लॉक के बीच उछलने के बजाय छवि पर रहता है।
एलिमेंटर में इमेज हॉटस्पॉट कैसे जोड़ें (चरण-दर-चरण)
पूरे सेटअप में लगभग पाँच मिनट लगते हैं।
चरण १: मास्टर एडॉन्स स्थापित करें और प्रो सक्रिय करें
प्लगइन्स पर जाएं, अपने वर्डप्रेस डैशबोर्ड में नया जोड़ें और “Master Addons.” खोजें, निःशुल्क प्लगइन इंस्टॉल और सक्रिय करें। यदि आपके पास है प्रो लाइसेंसू ी एडन, लाइसेंस के तहत इसे दर्ज करें छवि हॉटस्पॉट विजेट केवल प्रो सक्रिय होने के बाद दिखाई देता है।
चरण २: छवि हॉटस्पॉट विजेट को अपने पृष्ठ में खींचें
एलिमेंट संपादक में कोई भी पृष्ठ खोलें बाईं ओर एलिमेंट्स पैनल में, छवि हॉटस्पॉट की खोज करें या मास्टर एडॉन्स सेक्शन में स्क्रॉल करें (विजेट्स एक बैंगनी एमए बैज ले जाते हैं) इसे पृष्ठ पर खींचें यह एक नमूना छवि और कुछ प्लेसहोल्डर मार्करों के साथ लोड करता है जिसे आप संपादित कर सकते हैं।
चरण ३: अपनी छवि अपलोड करें
सामग्री टैब में, छवि अनुभाग खोलें छवि चुनें पर क्लिक करें और मीडिया लाइब्रेरी से एक तस्वीर चुनें एक तेज रेंडर के लिए छवि संकल्प को पूर्ण या बड़े पर सेट करें संरेखण विकल्प छवि को अपने कॉलम के भीतर रखता है: बाएं, केंद्र, या दाएं।
चरण ४: छवि में हॉटस्पॉट जोड़ें
हॉटस्पॉट अनुभाग खोलें पुनरावर्तक में प्रत्येक आइटम एक मार्कर है एक नया बनाने के लिए आइटम जोड़ें पर क्लिक करें आप छवि की आवश्यकता के रूप में कई जोड़ सकते हैं छवि पर प्रत्येक मार्कर को स्थिति में खींचें, या सटीक प्लेसमेंट के लिए सटीक क्षैतिज और ऊर्ध्वाधर निर्देशांक सेट करें।
यदि आप डिफ़ॉल्ट स्पंदन एनीमेशन के बजाय स्थिर मार्कर चाहते हैं तो पल्स प्रभाव टॉगल अक्षम करें है।
चरण ५: मार्कर प्रकार और लेबल सामग्री सेट करें
अपनी सेटिंग्स खोलने के लिए हॉटस्पॉट आइटम पर क्लिक करें प्रकार के तहत, मार्कर के अंदर दिखाई देने वाली चीज़ों को चुनें: कुछ भी नहीं (सिर्फ एक डॉट), एक आइकन, या एक छोटी छवि पाठ फ़ील्ड छोटे लेबल को रखती है जो फ्लोटिंग पैनल में दिखाई देती है लिंक फ़ील्ड एक यूआरएल जोड़ता है इसलिए मार्कर भी क्लिक पर कहीं नेविगेट करता है।
टूलटिप सामग्री संपादक पूर्ण लेबल टेक्स्ट के लिए एक WYSIWYG बॉक्स है। आप वहां फ़ॉर्मेटिंग, चित्र या शॉर्टकोड का उपयोग कर सकते हैं।
चरण ६: मार्कर व्यवहार कॉन्फ़िगर करें
मुख्य सामग्री टैब में वापस, टूलटिप्स अनुभाग नियंत्रित करता है कि लेबल सभी मार्करों पर कैसे व्यवहार करते हैंः
- स्थिति दिखाएँ: मार्कर के किस तरफ लेबल खुलता है (ऊपर, नीचे, बाएँ, दाएँ)।
- तीर: मार्कर और लेबल के बीच एक पॉइंटर टॉगल करें।
- एनीमेशन: लेबल दिखाई देने पर प्रकट प्रभाव, जैसे शिफ्ट-टूवार्ड।
- क्लिक पर ट्रिगर करेंः होवर-टू-रिवील से क्लिक-टू-रिवील पर स्विच करता है यह वह है जिसे आप मोबाइल के लिए चाहते हैं, क्योंकि टचस्क्रीन में होवर नहीं है।
मार्कर स्टाइलिंग विकल्प
मार्कर की उपस्थिति के लिए प्रत्येक हॉटस्पॉट का अपना स्टाइल टैब होता हैः
- डिफ़ॉल्ट रंग और डिफ़ॉल्ट पृष्ठभूमि: आराम की स्थिति में मार्कर।
- होवर रंग और होवर पृष्ठभूमि: होवर पर यह कैसे बदलता है।
- अपारदर्शिता: मार्कर छवि के खिलाफ कितना ठोस दिखता है कम मूल्य इसे और अधिक सूक्ष्म बनाते हैं।
एक मार्कर रंग चुनें जो इसके पीछे की छवि से बाहर खड़ा है एक व्यस्त तस्वीर एक कम-विपरीत मार्कर निगल जाएगी, और आगंतुक हॉटस्पॉट को नोटिस नहीं करेंगे।
छवि और लेबल को स्टाइल करना
विजेट के मुख्य स्टाइल टैब में तीन अनुभाग हैं।
छवि पैनल
छवि को स्वयं नियंत्रित करता है: अस्पष्टता, सीमा त्रिज्या, बॉक्स छाया, और सीएसएस फिल्टर एक सीमा त्रिज्या या छाया छवि को कार्ड-शैली लेआउट के अंदर बैठने में मदद करता है सीएसएस फिल्टर आपको छवि को फिर से निर्यात किए बिना चमक, विपरीत या संतृप्ति को ट्विक करने देता है।
मार्करों पैनल
सभी मार्करों के लिए वैश्विक सेटिंग्स: आकार और डिफ़ॉल्ट रंग व्यक्तिगत हॉटस्पॉट शैलियों इन ओवरराइड।
लेबल पैनल
फ्लोटिंग पैनल को नियंत्रित करता है जो मार्कर के साथ इंटरैक्ट करने पर दिखाई देता है: पृष्ठभूमि रंग, टेक्स्ट रंग, टाइपोग्राफी, पैडिंग, बॉर्डर त्रिज्या और छाया।
मोबाइल पर उत्तरदायी व्यवहार
मार्कर प्रतिशत-आधारित स्थिति का उपयोग करते हैं, इसलिए वे स्क्रीन आकार से कोई फर्क नहीं पड़ता छवि पर एक ही स्थान पर पिन किए जाते हैं लेबल व्यूपोर्ट के भीतर रहने के लिए आकार और पुनर्स्थापन करते हैं।
टच डिवाइस में होवर नहीं होता है, इसलिए टूलटिप्स सेक्शन में क्लिक टॉगल पर ट्रिगर टैप-टू-रिवील करने के लिए पूरे विजेट को स्विच करता है विज़िटर लेबल खोलने के लिए एक मार्कर टैप करते हैं और इसे बंद करने के लिए कहीं और टैप करते हैं यदि आपके दर्शक ज्यादातर मोबाइल पर हैं, तो इसे शुरू से चालू करें।
बहुत छोटी स्क्रीन पर जहां लेबल ओवरलैप करना शुरू करते हैं, आप उन्हें एक निश्चित ब्रेकपॉइंट के नीचे अक्षम कर सकते हैं और मार्कर लिंक को इसके बजाय काम करने दें प्रत्येक मार्कर अभी भी टैप पर अपने यूआरएल पर नेविगेट करता है।
छवि हॉटस्पॉट बनाम टूलटिप विजेट: अंतर क्या है?
मास्टर एडॉन्स में दो विशेषताएं हैं जो होवर लेबल का उत्पादन करती हैं, और लोग उन्हें मिलाते हैंः
| फ़ीचर | यह क्या करता है | लिए सर्वश्रेष्ठ |
|---|---|---|
| छवि हॉटस्पॉट विजेट | एक छवि पर विशिष्ट एक्स/वाई पदों पर इंटरैक्टिव मार्कर पिन करता है प्रत्येक मार्कर होवर या क्लिक पर एक लेबल खोलता है। | एनोटेटेड तस्वीरें, उत्पाद कॉलआउट, फ़्लोर प्लान, इंटरैक्टिव मानचित्र। |
| टूलटिप विजेट और टूलटिप्स एक्सटेंशन | टूलटिप विजेट अपने स्वयं के ट्रिगर के साथ एक स्टैंडअलोन संकेत है टूलटिप्स एक्सटेंशन एक मौजूदा एलिमेंट तत्व, जैसे बटन, आइकन, टेक्स्ट ब्लॉक या अनुभाग में एक होवर लेबल संलग्न करता है। | बटन पर होवर संकेत, फार्म क्षेत्रों पर मदद पाठ, किसी भी पृष्ठ तत्व पर अतिरिक्त संदर्भ। |
छवि हॉटस्पॉट छवियों के लिए बनाया गया है और स्थिति द्वारा मार्कर रखता है यदि आपको फोटो पर मार्कर की आवश्यकता है, तो छवि हॉटस्पॉट का उपयोग करें एक बटन या टेक्स्ट ब्लॉक पर होवर लेबल के लिए जो पहले से मौजूद है, का उपयोग करें टूलटिप्स एक्सटेंशन। यदि आप इसके बजाय एक स्टैंडअलोन संकेत चाहते हैं, तो टूलटिप विजेट करता है कि।
इमेज हॉटस्पॉट और टूलटिप्स एक्सटेंशन को मास्टर एडॉन्स प्रो की आवश्यकता होती है, जबकि टूलटिप विजेट मुफ्त प्लगइन में है वे चयनकर्ताओं या ईवेंट हैंडलर को साझा नहीं करते हैं, इसलिए आप उन्हें एक ही पृष्ठ पर उपयोग कर सकते हैं।
इमेज हॉटस्पॉट के साथ काम करने के लिए टिप्स
- अंतरिक्ष मार्कर बाहर। ओवरलैपिंग मार्कर छवि का उपयोग करना कठिन बनाते हैं यदि दो हॉटस्पॉट एक साथ करीब बैठते हैं, तो उनके लेबल को विपरीत पक्षों पर धक्का दें या उनमें से एक को छोड़ दें।
- लेबल को छोटा रखें। एक पंक्ति या दो एक फ़्लोटिंग पैनल के अंदर एक पैराग्राफ से बेहतर पढ़ता है एक त्वरित सारांश के लिए लेबल का उपयोग करें और पूर्ण विवरण के लिए लिंक करें।
- मोबाइल के लिए क्लिक पर ट्रिगर चालू करें। यहां तक कि अगर होवर डेस्कटॉप पर काम करता है, तो टच उपयोगकर्ताओं को एक टैप लक्ष्य की आवश्यकता होती है विजेट एक ही समय में दोनों मोड को संभालता है।
- विभिन्न स्क्रीन पर परीक्षण करें। डेस्कटॉप पर अच्छी तरह से दूरी वाले दिखने वाले मार्कर फोन पर गुच्छा बना सकते हैं प्रकाशन से पहले एक फोन, एक टैबलेट और एक विस्तृत मॉनिटर की जांच करें।
- छवि के विरुद्ध मार्करों की तुलना करें। एक अंधेरे तस्वीर पर एक उज्ज्वल मार्कर काम करता है एक व्यस्त पृष्ठभूमि पर एक म्यूट मार्कर गायब हो जाता है जब कोई मार्कर पर ध्यान केंद्रित करता है तो जोर जोड़ने के लिए होवर राज्य का उपयोग करें।
- संरेखण मायने रखता है जब स्थिति टैब का उपयोग करें। किसी न किसी प्लेसमेंट के लिए ड्रैगिंग तेज है सटीक प्रतिशत मूल्यों के साथ स्थिति टैब बेहतर होता है जब आपको आरेख या स्क्रीनशॉट के विशिष्ट भागों के साथ लाइन करने के लिए मार्करों की आवश्यकता होती है।
नि: शुल्क बनाम प्रोः आपको क्या मिलता है
| योजना | छवि हॉटस्पॉट | अन्य विजेट |
|---|---|---|
| मुक्त | शामिल नहीं | हेडिंग, बटन, इन्फो बॉक्स, अकॉर्डियन और बहुत कुछ सहित 40+ विजेट। |
| प्रो | शामिल | सभी मुफ़्त विजेट प्लस इमेज हॉटस्पॉट, टूलटिप्स एक्सटेंशन, डिस्प्ले स्थितियाँ और बाकी 80+ विजेट और एक्सटेंशन। |
बेस प्लगइन से इंस्टॉल करना निःशुल्क है वर्डप्रेस रिपॉजिटरी। इमेज हॉटस्पॉट विजेट को विशेष रूप से एक की आवश्यकता होती है प्रो लाइसेंस.
एलिमेंटर में एक छवि हॉटस्पॉट क्या है?
एक छवि हॉटस्पॉट एक छवि के शीर्ष पर रखा गया एक छोटा इंटरैक्टिव मार्कर है जब कोई आगंतुक होवर करता है या इसे टैप करता है, तो टेक्स्ट के साथ एक लेबल दिखाई देता है, एक विवरण, या फोटो के उस विशिष्ट क्षेत्र के लिए एक लिंक एलिमेंटर में एक अंतर्निहित हॉटस्पॉट विजेट शामिल नहीं है, इसलिए आपको इस सुविधा को जोड़ने के लिए मास्टर एडॉन्स जैसे ऐडऑन की आवश्यकता है।
मैं एक छवि में कितने हॉटस्पॉट जोड़ सकता हूं?
कोई कठिन सीमा नहीं है व्यावहारिक रूप से, प्रति छवि ५ से ७ हॉटस्पॉट चीजों को पठनीय रखता है इसके अलावा, मार्कर ओवरलैपिंग शुरू करते हैं यदि आपको अधिक क्षेत्रों को एनोटेट करने की आवश्यकता है, तो सामग्री को कई छवियों में विभाजित करें।
क्या मोबाइल पर इमेज हॉटस्पॉट काम करते हैं?
हाँ स्पर्श उपकरणों पर विजेट होवर से टैप-टू-रिवील पर स्विच करता है आप क्लिक पर ट्रिगर को सक्षम कर सकते हैं ताकि मोबाइल आगंतुक अपने लेबल को खोलने के लिए एक मार्कर को टैप करें प्रतिशत-आधारित स्थिति स्क्रीन आकारों में हॉटस्पॉट को सही ढंग से पिन करती रहती है।
क्या मैं हॉटस्पॉट को दूसरे पेज से लिंक कर सकता हूं?
हाँ। प्रत्येक हॉटस्पॉट में एक लिंक फ़ील्ड होता है। लिंक क्लिक पर सक्रिय हो जाता है, इसलिए एक मार्कर अपने लेबल में जानकारी दिखा सकता है और विज़िटर को उत्पाद पृष्ठ, दस्तावेज़ीकरण अनुभाग या बाहरी यूआरएल पर नेविगेट कर सकता है।
इमेज हॉटस्पॉट विजेट फ्री है या प्रो?
इमेज हॉटस्पॉट विजेट एक प्रो सुविधा है बेस मास्टर एडॉन्स प्लगइन मुफ्त है और इसमें ४० से अधिक विजेट शामिल हैं, लेकिन हॉटस्पॉट विजेट को एक प्रो लाइसेंस.
इमेज हॉटस्पॉट विजेट और टूलटिप विजेट के बीच क्या अंतर है?
इमेज हॉटस्पॉट विजेट एक छवि पर विशिष्ट स्थानों पर इंटरैक्टिव मार्करों को पिन करता है, प्रत्येक होवर या क्लिक पर एक लेबल दिखाता है। द टूलटिप विजेट अपने स्वयं के ट्रिगर के साथ एक स्टैंडअलोन संकेत है, और टूलटिप्स एक्सटेंशन एक बटन, टेक्स्ट या आइकन जैसे मौजूदा तत्व के लिए एक होवर लेबल संलग्न करता है एनोटेटेड फ़ोटो के लिए इमेज हॉटस्पॉट और अन्य पृष्ठ तत्वों पर होवर संकेत के लिए टूलटिप विकल्प का उपयोग करें।
रैपिंग अप
इमेज हॉटस्पॉट विजेट एक फ्लैट छवि लेता है और मार्कर जोड़ता है जो होवर या क्लिक पर जानकारी प्रकट करता है छवि अपलोड करें, उन क्षेत्रों पर मार्कर छोड़ें जिन्हें स्पष्टीकरण की आवश्यकता है, प्रत्येक के लिए एक छोटा लेबल लिखें, और अपने डिजाइन से मेल खाने के लिए मार्करों को स्टाइल करें एलिमेंट संपादक के अंदर सब कुछ होता है।
एलिमेंटर में छवियों के बारे में अधिक जानकारी के लिए देखें छवि तुलना विजेट और द छवि होवर प्रभाव विजेट। यदि आपको छवियों के बजाय बटन या टेक्स्ट पर होवर लेबल की आवश्यकता है, तो टूलटिप विजेट ट्यूटोरियल उसे शामिल करता है। और की पूरी सूची मास्टर ऐडऑन विजेट और एक्सटेंशन ब्राउज़िंग के लायक है यदि आप देखना चाहते हैं कि और क्या उपलब्ध है।
मास्टर एडॉन्स प्रो प्राप्त करें एलिमेंटर के लिए इमेज हॉटस्पॉट विजेट और बाकी 80+ विजेट और एक्सटेंशन को अनलॉक करने के लिए।
