छवि हॉटस्पॉट विजेट सेटिंग्स

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

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

इमेज हॉटस्पॉट विजेट क्या करता है #

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

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

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

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

इमेज हॉटस्पॉट विजेट कैसे जोड़ें #

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

छवि चुनें #

को खोलें सामग्री टैब। द छवि अनुभाग वह है जहां आप आधार चित्र लोड करते हैं जिस पर हॉटस्पॉट बैठते हैं।

• छवि चुनेंः मीडिया लाइब्रेरी से चित्र चुनें।
• छवि संकल्पः आकार परोसा गया, जैसे बड़ा या पूर्ण।
• संरेखण: इसके स्तंभ के भीतर बाएँ, मध्य या दाएँ।

हॉटस्पॉट जोड़ें #

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

• आइटम जोड़ेंः छवि की आवश्यकता के अनुसार उतने हॉटस्पॉट जोड़ें।
• पल्स प्रभाव अक्षम करेंः मार्करों पर स्पंदन एनीमेशन बंद करें।
• स्थिति टैबः प्रत्येक मार्कर के लिए क्षैतिज और ऊर्ध्वाधर स्थिति प्रतिशत में।

प्रत्येक हॉटस्पॉट सेट करें #

इसकी सेटिंग्स खोलने के लिए हॉटस्पॉट पर क्लिक करें सामग्री टैब मार्कर प्रकार, उसका टूलटिप टेक्स्ट और एक वैकल्पिक लिंक सेट करता है।

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

प्रत्येक हॉटस्पॉट को स्टाइल करें #

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

• डिफ़ॉल्ट रंग और पृष्ठभूमिः मार्कर आराम की स्थिति में।
• होवर रंग और पृष्ठभूमिः होवर पर यह कैसे बदलता है।
• अपारदर्शिता: मार्कर कितना ठोस दिखता है।

टूलटिप्स को नियंत्रित करें #

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

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

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

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

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

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

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

इमेज हॉटस्पॉट विजेट के साथ काम करने के लिए टिप्स #

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

वीडियो ट्यूटोरियल देखें #

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

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

लपेटकर #

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