टूलटिप्स (प्रो) के साथ एलिमेंटर इमेज हॉटस्पॉट विजेट
इमेज हॉटस्पॉट एक मास्टर एडॉन्स प्रो विजेट है जो एक छवि के शीर्ष पर मार्करों को पिन करता है एक मार्कर एक सादा डॉट, एक छोटा टेक्स्ट लेबल, एक फ़ॉन्ट विस्मयकारी आइकन या एक छोटी तस्वीर हो सकती है, और प्रत्येक एक टूलटिप खोलता है जब कोई आगंतुक इसे होवर करता है, या क्लिक पर ट्रिगर पर स्विच करने के बाद इसे टैप करता है यह दुकान-द-लुक फ़ोटो, उत्पाद कॉलआउट, फ़्लोर प्लान, कैंपस मानचित्र और लेबल किए गए आरेखों के अनुरूप है यदि आप जो चाहते हैं वह एक बटन या एक शीर्षक पर होवर संकेत है, तो निःशुल्क टूलटिप विजेट या टूलटिप्स एक्सटेंशन (प्रो) है करीब फिट।
एलिमेंटर में इमेज हॉटस्पॉट कैसे जोड़ें
एलिमेंटर में एक इमेज हॉटस्पॉट जोड़ने के लिए, मास्टर एडॉन्स प्रो को सक्रिय करें, एलिमेंटर के साथ पेज को संपादित करें और इमेज हॉटस्पॉट के लिए विजेट पैनल खोजें इसे खींचें, इमेज के तहत अपनी तस्वीर चुनें, फिर हॉटस्पॉट खोलें और क्लिक करें प्रत्येक मार्कर के लिए आइटम जोड़ें प्रत्येक मार्कर का प्रकार, टूलटिप सामग्री और स्थिति सेट करें, फिर प्रकाशित करें।
“hotspot” के लिए पैनल खोजें और दो परिणाम वापस आ जाएंगे। एक बैज वाला एमए यह विजेट है। इसके बगल में पैडलॉक किया गया एक एलिमेंटर का अपना हॉटस्पॉट है, जिसे एलिमेंटर प्रो लाइसेंस की आवश्यकता होती है, इसलिए यह जांचने लायक है कि आपके पास निर्माण से पहले कौन सा है।
विजेट को अंदर छोड़ें, अपनी छवि चुनें और सेट करें छवि संकल्प पूर्ण करने के लिए यदि चित्र ठीक विस्तार करता है मार्कर प्रस्तुत छवि पर बैठते हैं, इसलिए एक डाउनस्केल्ड स्रोत हर पिन को अनुमानित दिखता है खोलें हॉटस्पॉट, आइटम जोड़ें हिट करें, और प्रति मार्कर एक बार दोहराएं प्रत्येक आइटम अपनी सामग्री, शैली और स्थिति टैब रखता है।
दो चीजें लोगों को पहले निर्माण पर ऊपर की ओर ले जाती हैं मार्कर शीर्ष-बाएँ कोने पर उतरते हैं जब तक कि आप स्थिति स्लाइडर्स को छूते नहीं हैं, इसलिए तीन ताजा आइटम एक की तरह दिखने वाले ढेर में ढेर हो जाते हैं और टूलटिप सामग्री बॉक्स एक पूर्ण संपादक है, जो इसे एक पैराग्राफ में पेस्ट करने का विरोध करने का एक कारण है, आगे नीचे कवर किया गया।
उत्पाद फ़ोटो, मानचित्र और आरेखों के साथ काम किए गए उदाहरण लाइव हैं एलिमेंटर में इमेज हॉटस्पॉट कैसे जोड़ें। प्रत्येक नियंत्रण में सूचीबद्ध है छवि हॉटस्पॉट विजेट सेटिंग्स गाइड.


एक छवि पर चार मार्कर प्रकार
द प्रकार मार्कर के कंटेंट टैब में नियंत्रण आपको चार आकार देता है, और आप एक ही छवि के अंदर चारों को मिला सकते हैं।
कोई नहीं एक नंगे रंग का बिंदु छोड़ देता है यह घने आरेखों के लिए सबसे साफ विकल्प है जहां लेबल एक दूसरे से टकराएंगे।
पाठ मार्कर के अंदर एक छोटी स्ट्रिंग प्रिंट करता है नंबर यहां अच्छी तरह से काम करते हैं, क्योंकि एक उत्पाद शॉट में ०१, ०२ और ०३ एक निर्देशित दौरे के रूप में पढ़ा जाता है जिसमें लिखने के लिए कोई किंवदंती नहीं है लंबे तार डॉट को एक गोली में बदल देते हैं, जो कि आप कुछ के लिए चाहते हैं जैसे कि “कोलोन नंबर ५”।
चिह्न लाइब्रेरी से कोई भी फ़ॉन्ट विस्मयकारी आइकन लेता है, ताकि सामग्री के लिए एक पत्ता और रेटिंग के लिए एक सितारा खड़ा हो सके।
छवि अपनी मीडिया लाइब्रेरी से एक तस्वीर के लिए मार्कर स्वैप करता है उत्पाद थंबनेल और अवतार सबसे अच्छा पढ़ते हैं; कुछ भी व्यस्त मार्कर आकार में मश में बदल जाता है।
प्रत्येक मार्कर भी स्वीकार करता है लिंकउस लिंक आग जब उपकरणटिप्स होवर पर खुला, या ब्रेकप्वाइंट पर जहां आप बंद उपकरणटिप्स स्विच किया है यह आग नहीं है, जबकि ट्रिगर पर क्लिक पर है, क्योंकि नल पहले से ही लिया गया है।
प्रत्येक मार्कर को प्रतिशत के आधार पर रखें
द स्थिति टैब दो स्लाइडर्स, क्षैतिज स्थिति और ऊर्ध्वाधर स्थिति रखता है, दोनों छवि के प्रतिशत में मापा जाता है ५० और २४ सेट करने से एक मार्कर बीच में एक चौथाई नीचे जाता है कोई ड्रैग-ऑन-कैनवास प्लेसमेंट नहीं है, इसलिए आप संख्याओं को धक्का देते हैं और पूर्वावलोकन देखते हैं।
प्रतिशत वह है जो फोन पर मार्करों को ईमानदार रखता है आधार छवि अपने कंटेनर के साथ तराजू करती है और प्रत्येक मार्कर अपने रिश्तेदार स्थान को रखता है, इसलिए बोतल कैप पर पिन किया गया लेबल अभी भी ३९० पीएक्स चौड़े बोतल कैप पर है, जहां एक पिक्सेल ऑफसेट दूर हो गया होगा।
वही टैब प्रति-मार्कर रखता है को शो, जो उस एक मार्कर के लिए वैश्विक टूलटिप पक्ष को ओवरराइड करता है। इससे मदद मिलती है जब एक मार्कर दाहिने किनारे के पास बैठता है और उसका टूलटिप छवि से दूर चला जाएगा: उस एक को बाईं ओर सेट करें और बाकी को शीर्ष पर छोड़ दें।
मार्कर डिफ़ॉल्ट रूप से पल्स करते हैं। द पल्स प्रभाव अक्षम करें हॉटस्पॉट अनुभाग के निचले भाग में स्विच एक बार में प्रत्येक मार्कर के लिए एनीमेशन को बंद कर देता है, जो आमतौर पर पंद्रह पिन वाले फ़्लोर प्लान की आवश्यकता होती है।


टूलटिप स्थिति, एनीमेशन और मोबाइल व्यवहार
द टूलटिप्स अनुभाग विजेट में प्रत्येक टूलटिप को एक साथ चलाता है: स्थिति दिखाएं (ऊपर, नीचे, बाएं या दाएं), एनीमेशन (शिफ्ट-अवे, शिफ्ट-टूवर्ड, फेड, स्केल या परिप्रेक्ष्य), एक एरो टॉगल, प्लस फाइन न्यूडिंग के लिए ऑफसेट और दूरी।
होवर पर टूलटिप्स खुले हैं फोन में कोई होवर नहीं है, जो दो ईमानदार विकल्प छोड़ता है स्विच ऑन करें क्लिक पर ट्रिगर करें और एक टैप टूलटिप खोलता है। या सेट करें पर अक्षम करें मोबाइल, या टैबलेट और मोबाइल के लिए, जो उन स्क्रीन पर टूलटिप्स छुपाता है और प्रत्येक मार्कर के लिंक को काम सौंपता है।
चारों ओर योजना बनाने के लिए एक सीमा टूलटिप सामग्री एक वाईएसआईडब्ल्यूवाईजी बॉक्स है, लेकिन विजेट मार्कअप को रेंडर करने से पहले स्ट्रिप्स करता है, इसलिए बोल्ड, लिंक, चित्र और शॉर्टकोड सभी गायब हो जाते हैं और टूलटिप सादे पाठ को दिखाता है प्रत्येक को एक छोटी लाइन में रखें जब आपको स्वरूपित टूलटिप सामग्री की आवश्यकता होती है, एलिमेंटर प्रो का हॉटस्पॉट विजेट समृद्ध पाठ को संभालता है और यह विजेट नहीं करता है।
टूलटिप को स्टाइल करना ही पूर्ण सेट है: संरेखण, पैडिंग, त्रिज्या, पृष्ठभूमि, पाठ रंग, सीमा, तीर रंग, टाइपोग्राफी और बॉक्स छाया आधार छवि को अस्पष्टता, सीमा, त्रिज्या, बॉक्स छाया और सीएसएस फिल्टर मिलता है।
डिफ़ॉल्ट और होवर के लिए स्टाइल मार्कर
मार्कर स्टाइलिंग दो स्थानों पर बैठती है, जो कि विभाजन को जानने के बाद लगने वाली आवाज़ से कहीं अधिक सरल है।
विजेट का शैली टैब एक बार में हर मार्कर को कवर करता है: टेक्स्ट पैडिंग, बॉर्डर रेडियस, टाइपोग्राफी, एक ट्रांजिशन ग्रुप, और फिर डिफ़ॉल्ट और होवर टैब जिसमें अपारदर्शिता, आकार, रंग, पृष्ठभूमि रंग, बॉर्डर प्रकार और बॉक्स छाया होती है आकार ०.५ से २ तक एक स्केल गुणक है, इसलिए होवर को १.१५ पर सेट करने से मार्कर को पृष्ठ पर कुछ और स्थानांतरित किए बिना कर्सर के नीचे एक हल्की लिफ्ट मिलती है।
एकल मार्कर के अंदर स्टाइल टैब डिफ़ॉल्ट और होवर के लिए उस मार्कर के रंग, पृष्ठभूमि और अस्पष्टता को ओवरराइड करता है। इस तरह आप एक बिक चुकी वस्तु को चिह्नित करने या हॉटस्पॉट को चिह्नित करने के लिए बैंगनी रंग की दीवार पर एक मार्कर को लाल बनाते हैं जिसे आप पहले देखना चाहते हैं।
१०० पर सीमा त्रिज्या आपको सर्कल और गोलियां देता है इसे ६ पर छोड़ दें और टेक्स्ट मार्कर स्क्वायर टैग बन जाते हैं, जो बुलबुले की एक पंक्ति की तुलना में एक वास्तुशिल्प ड्राइंग पर बेहतर पढ़ता है।

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














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

ग्लासमोर्फिज्म

कंटेनर अतिरिक्त

पैटर्न
![एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
पोस्ट/पेज डुप्लीकेटर

