एलिमेंटर में छवि हॉटस्पॉट कैसे जोड़ें: किसी भी छवि पर मार्कर पिन करें

कुंजी तकिए

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

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

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

एलिमेंटर में एक छवि हॉटस्पॉट क्या है

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

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

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

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

एलिमेंटर में इमेज हॉटस्पॉट कैसे जोड़ें

चार या पांच मार्करों वाली छवि के लिए सेटअप में लगभग पांच मिनट लगते हैं।

चरण १: मास्टर एडॉन्स स्थापित करें और प्रो को सक्रिय करें

अपने वर्डप्रेस डैशबोर्ड में, प्लगइन्स पर जाएं, नया जोड़ें और “मास्टर Addons” खोजें। इसे इंस्टॉल करें और सक्रिय करें, फिर अपना दर्ज करें प्रो लाइसेंस मास्टर एडॉन्स, लाइसेंस के तहत छवि हॉटस्पॉट केवल एक बार प्रो सक्रिय होने के बाद एलिमेंट पैनल में दिखाई देता है यह मुफ्त एलिमेंट के साथ काम करता है।

चरण २: छवि हॉटस्पॉट विजेट को पृष्ठ पर खींचें

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

चरण ३: अपनी छवि चुनें

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

चरण ४: हॉटस्पॉट जोड़ें और उनकी स्थिति निर्धारित करें

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

प्रत्येक आइटम में सामग्री, शैली और स्थिति टैब हैं स्थिति टैब पर, मार्कर रखने के लिए क्षैतिज स्थिति (%) और लंबवत स्थिति (%) स्लाइडर्स को स्थानांतरित करें मान छवि का प्रतिशत हैं, इसलिए ५० और ५० मार्कर को केंद्र में नहीं खींच सकते हैं आप कैनवास पर मार्कर, और नए आइटम सभी शीर्ष-बाएँ कोने में शुरू होते हैं जब तक आप उन्हें स्थानांतरित नहीं करते हैं, इसलिए तीन ताजा आइटम एक की तरह दिख सकते हैं।

प्रत्येक स्क्रीन आकार पर एक स्थिति लागू होती है २२% भर में और ५२% नीचे एक मार्कर लैपटॉप पर और फोन पर फोटो के एक ही हिस्से पर बैठता है।

सूची के अंतर्गत, पल्स प्रभाव अक्षम करें? विजेट में प्रत्येक मार्कर के चारों ओर स्पंदन रिंग को बंद कर देता है।

चरण ५: मार्कर प्रकार चुनें और लेबल लिखें

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

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

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

चरण ६: चुनें कि मार्कर कैसे खुलते हैं

सामग्री टैब में वापस, टूलटिप्स अनुभाग विजेट में प्रत्येक मार्कर को एक साथ नियंत्रित करता है।

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

चरण ७: पूर्वावलोकन करें और प्रकाशित करें

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

मार्करों और छवि को स्टाइल करें

स्टाइलिंग दो स्थानों पर होती है: प्रत्येक मार्कर का अपना स्टाइल टैब, और विजेट का मुख्य स्टाइल टैब।

प्रति-मार्कर शैली

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

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

छवि

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

हॉटस्पॉट

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

टूलटिप्स

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

एलिमेंटर में एक इंटरैक्टिव छवि बनाएं

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

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

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

एक साधारण छवि मानचित्र के रूप में छवि हॉटस्पॉट का उपयोग करें

एक छवि मानचित्र एक तस्वीर के कुछ हिस्सों को क्लिक करने योग्य बनाता है छवि हॉटस्पॉट सामान्य मामले को कवर करता है: प्रत्येक स्थान पर एक मार्कर दूसरे पृष्ठ के लिंक के साथ, जो कि होवर पर टूलटिप्स खुलने पर पीछा किया जाता है यह केवल बिंदु मार्करों को क्लिक करने योग्य आकार नहीं खींचता है, इसलिए एक फर्श योजना जहां हर कमरे की रूपरेखा क्लिक करने योग्य होनी चाहिए, को एक समर्पित छवि मानचित्र प्लगइन की आवश्यकता होती है जैसे छवि मानचित्र प्रो, जो छवि पर वेक्टर आकृतियाँ बनाता है (नवंबर 2026 तक)।

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

फोन और टैबलेट पर छवि हॉटस्पॉट

मार्कर की स्थिति छवि का एक प्रतिशत है, इसलिए प्रत्येक मार्कर प्रत्येक स्क्रीन आकार पर फोटो के एक ही हिस्से पर रहता है टैबलेट या फोन के लिए कोई अलग स्थिति नहीं है।

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

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

छवि हॉटस्पॉट का उपयोग करने के लिए आपको क्या चाहिए

मास्टर ऐडऑन से स्थापित होता है वर्डप्रेस प्लगइन निर्देशिका. इमेज हॉटस्पॉट को एक की आवश्यकता है मास्टर एडॉन्स प्रो लाइसेंस इसके शीर्ष पर प्रत्येक नियंत्रण में सूचीबद्ध है छवि हॉटस्पॉट सेटिंग्स गाइड.

छवि हॉटस्पॉट के साथ काम करने के लिए युक्तियाँ

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

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

अंतिम विचार

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

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

मास्टर एडॉन्स प्रो प्राप्त करें एलिमेंटर में इमेज हॉटस्पॉट और बाकी 80+ विजेट और एक्सटेंशन जोड़ने के लिए।