कभी-कभी एक डिजाइन को पृष्ठ पर एक पूरी लाइन दिए बिना एक संक्षिप्त स्पष्टीकरण की आवश्यकता होती है वह एक टूलटिप का काम है: एक छोटा बुलबुला जो होवर पर दिखाई देता है, उसका टुकड़ा कहता है, और रास्ते से बाहर निकलता है टूलटिप विजेट इन एलिमेंट के लिए मास्टर ऐडऑन प्लेसमेंट, एनीमेशन, ट्रिगर और स्टाइलिंग पर नियंत्रण के साथ उस बुलबुले को एक आइकन, टेक्स्ट के टुकड़े या एक छवि से जोड़ता है।
यह गाइड विजेट के माध्यम से पहले ड्रैग से लाइव पेज पर स्टाइल टूलटिप तक चलता है।
टूलटिप विजेट क्या करता है #
विजेट आपके पृष्ठ, एक आइकन, टेक्स्ट या छवि पर एक छोटा लक्ष्य तत्व रखता है, और एक टूलटिप बबल को बांधता है जब आगंतुक होवर करते हैं या लक्ष्य पर क्लिक करते हैं, तो बुलबुला आपके संदेश के साथ दिखाई देता है प्लेसमेंट, एनीमेशन, समय, और ऑफसेट सभी कॉन्फ़िगर करने योग्य हैं, और स्टाइल टैब लक्ष्य और बबल दोनों को कवर करता है।
यह एक स्टैंडअलोन विजेट है: लक्ष्य और इसकी टूलटिप पूरे बिंदु हैं यदि आप पृष्ठ पर पहले से मौजूद विजेट में टूलटिप्स जोड़ना चाहते हैं, तो मास्टर एडॉन्स एक टूलटिप एक्सटेंशन भी शिप करता है जो किसी भी एलिमेंटर तत्व से जुड़ा होता है विजेट सही पिक है जब टूलटिप लक्ष्य अपना छोटा डिज़ाइन तत्व होता है, जैसे कि कीमत के बगल में एक जानकारी आइकन या नाम बुलबुले के साथ एक टीम अवतार।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
- बेसिक विजेट के अंतर्गत मास्टर ऐडऑन विकल्प पैनल में टूलटिप विजेट सक्षम किया गया है।
टूलटिप विजेट कैसे जोड़ें #
एलिमेंट संपादक में, खोजें तत्वों लिए पैनल टूलटिप और विजेट को अपने पृष्ठ पर खींचें यह डिफ़ॉल्ट लक्ष्य के रूप में एक सूचना आइकन के साथ लोड होता है और एक प्लेसहोल्डर टूलटिप पहले से ही वायर्ड होता है, इसलिए कैनवास पर आइकन को मँडराते हुए बुलबुला तुरंत दिखाता है।
सामग्री प्रकार चुनें: आइकन, टेक्स्ट या छवि #
खुला सामग्री सेटिंग्स सामग्री टैब में। द सामग्री प्रकार शीर्ष पर स्विचर तीन लक्ष्य प्रदान करता हैः
- चिह्न: एलिमेंटर लाइब्रेरी से कोई भी आइकन चुनें क्लासिक जानकारी सर्कल डिफ़ॉल्ट है।
- पाठ: एक शब्द या वाक्यांश टाइप करें, जैसे “Hover Me!”, और टूलटिप इससे जुड़ जाता है।
- छवि: मीडिया लाइब्रेरी से एक छवि चुनें, जो अवतार और उत्पाद थंबनेल के लिए उपयोगी हो।
प्रत्येक प्रकार पर दो नियंत्रण लागू होते हैं। संरेखण लक्ष्य को बाएँ, मध्य या दाएँ रखता है। एचटीएमएल टैग आपके द्वारा चुने गए मार्कअप में लक्ष्य को लपेटता है: H1 से H6, div, स्पैन, p, बटन, या a। सादे टूलटिप्स के लिए p या स्पैन के साथ चिपकाएँ; जब लक्ष्य पहुंच के लिए नियंत्रण की तरह कार्य करना चाहिए तो बटन का उपयोग करें।
साथ पाठ चयनित, एक सामग्री फ़ील्ड आइकन पिकर को प्रतिस्थापित करता हैः
साथ छवि चयनित, मीडिया लाइब्रेरी खुलती है और चुनी गई छवि होवर लक्ष्य बन जाती हैः
टूलटिप लिखें और उसका व्यवहार सेट करें #
द टूलटिप विकल्प अनुभाग बुलबुले को ही नियंत्रित करता है।
- टूलटिप पाठः बुलबुले के अंदर संदेश इसे एक पंक्ति या दो पर रखें; टूलटिप्स संकेत के लिए हैं, पैराग्राफ के लिए नहीं।
- कर्सर का पालन करेंः लक्ष्य पर टिके रहने के बजाय बुलबुले को माउस का पीछा करने दें।
- प्लेसमेंटः जहां बुलबुला लक्ष्य के सापेक्ष बैठता है शीर्ष डिफ़ॉल्ट है, शीर्ष प्रारंभ, नीचे और अन्य किनारों के साथ उपलब्ध है।
- एनिमेशन: बुलबुला कैसे प्रवेश करता है, डिफ़ॉल्ट रूप से शिफ्ट-अवे।
- ट्रिगर चालू: होवर माउसओवर पर बुलबुला दिखाता है; क्लिक एक नल की प्रतीक्षा करता है, जो टच स्क्रीन पर भी बेहतर काम करता है।
- अवधि और देरी बाहरः एनीमेशन गति और कर्सर के जाने के बाद बुलबुला कितनी देर तक रहता है, दोनों डिफ़ॉल्ट रूप से 300 मिलीसेकंड। अधिकांश पृष्ठों के लिए डिफ़ॉल्ट सही लगता है; केवल उन्हें धीमा करें यदि टूलटिप कुछ ऐसा ले जाता है जिसे आगंतुकों को पढ़ने के लिए अधिक समय तक बीट की आवश्यकता होती है।
द एक्स ऑफसेट और वाई ऑफसेट स्लाइडर्स बुलबुले को अपने डिफ़ॉल्ट स्थान से दूर धकेलते हैं उपयोगी जब टूलटिप को सीमा को साफ़ करने या अजीब आकार के लक्ष्य के बगल में बैठने की आवश्यकता होती है।
लक्ष्य को स्टाइल करें #
में शैली टैब, सामान्य शैलियाँ पृष्ठ पर लक्ष्य तत्व को शामिल करता है।
- सामग्री की चौड़ाई और पैडिंगः लक्ष्य ब्लॉक का आकार डेमो अवतार कमरे देने के लिए इसे १५० से २१५ पिक्सेल तक चौड़ा करता है।
- सामान्य और होवर राज्यः प्रत्येक राज्य के लिए पृष्ठभूमि रंग, पाठ रंग, बॉक्स छाया और टाइपोग्राफी।
- सीमा प्रकार और सीमा त्रिज्याः लक्ष्य को फ्रेम करें; 4 पिक्सेल त्रिज्या कोनों को नरम रखती है।
टूलटिप बबल को स्टाइल करें #
द टूलटिप शैलियाँ अनुभाग बुलबुले को स्टाइल करता है, और कैनवास आपके काम करते समय इसका लाइव पूर्वावलोकन करता है।
- टूलटिप चौड़ाईः बुलबुले की अधिकतम चौड़ाई, डिफ़ॉल्ट रूप से २०० पिक्सेल इसके अंदर लपेटता है पाठ।
- पृष्ठभूमि रंग और पाठ रंगः डेमो सफेद पाठ के साथ डार्क नेवी जाता है, क्लासिक हाई-कंट्रास्ट टूलटिप लुक।
- टाइपोग्राफी, पैडिंग, बॉर्डरः बुलबुले का पाठ और फ्रेम।
- दूरी: बुलबुले और लक्ष्य के बीच का अंतर, डिफ़ॉल्ट रूप से 10 पिक्सेल।
- पाठ संरेखण और बॉक्स छायाः अंतिम स्पर्श एक नरम छाया बुलबुले को पृष्ठ के ऊपर तैरते हुए पढ़ने में मदद करती है।
पेज पर रिजल्ट #
लाइव पेज पर, लक्ष्य चुपचाप बैठता है जब तक कि एक आगंतुक इसे होवर नहीं करता है तब बुलबुला आपके चुने हुए प्लेसमेंट में एनिमेट करता है, कर्सर रहने के दौरान पकड़ता है, और आपके द्वारा निर्धारित देरी के बाद फीका हो जाता है।
सामान्य उपयोग के मामले #
- जानकारी प्रतीक मूल्य निर्धारण पंक्तियों के अलावा, लेबल और फीचर सूचियाँ बनाएं।
- टीम अवतारों इससे होवर पर एक नाम और भूमिका का पता चलता है।
- शब्दावली शब्द पाठ में, बुलबुले में एक संक्षिप्त परिभाषा के साथ।
- उत्पाद थंबनेल एक कल्पना या नोट के साथ जो पृष्ठ स्थान के लायक नहीं है।
- चिह्न-केवल बटन जहां टूलटिप क्रिया को नाम देता है।
बेहतर टूलटिप्स के लिए टिप्स #
- पाठ को छोटा रखें। एक या दो लाइनें यदि संदेश को अधिक की आवश्यकता है, तो यह लेआउट में है, टूलटिप नहीं।
- टच आगंतुकों के लिए क्लिक ट्रिगर का उपयोग करें। होवर फ़ोन पर मौजूद नहीं है; एक क्लिक-ट्रिगर टूलटिप हर जगह काम करता है।
- इसके विपरीत ध्यान रखें. डार्क बबल, लाइट टेक्स्ट, या रिवर्स १० पैडिंग के साथ २०० पिक्सल की डिफ़ॉल्ट चौड़ाई विशिष्ट फ़ॉन्ट आकारों पर अच्छी तरह से पढ़ती है।
- स्क्रीन किनारों के पास प्लेसमेंट की जाँच करें। किसी पृष्ठ के पहले तत्व पर एक शीर्ष टूलटिप क्लिप कर सकता है; इसे बॉटम पर स्विच करें या ऑफसेट का उपयोग करें।
- टूलटिप्स में महत्वपूर्ण जानकारी न छिपाएँ। आगंतुकों को जो कुछ भी पढ़ना चाहिए वह पृष्ठ पर है; बुलबुला अतिरिक्त के लिए है।
वीडियो ट्यूटोरियल #
यदि आप टूलटिप को क्रियान्वित होते देखना चाहते हैं, तो यह लघु वीडियो विजेट को लाइव पेज पर स्टाइल किए गए बुलबुले में खींचने से लेकर पूरे सेटअप को कवर करता है।
अक्सर पूछे जाने वाले प्रश्न #
मास्टर ऐडऑन में टूलटिप विजेट क्या है?
यह एक एलिमेंट विजेट है जो पृष्ठ पर एक आइकन, टेक्स्ट या छवि रखता है और इसमें एक टूलटिप बबल संलग्न करता है बुलबुला होवर या क्लिक पर दिखाई देता है, और आप एलिमेंट पैनल से इसके प्लेसमेंट, एनीमेशन, टाइमिंग, ऑफसेट और पूर्ण स्टाइल को नियंत्रित करते हैं।
क्या टूलटिप लक्ष्य एक छवि हो सकता है?
हाँ सामग्री सेटिंग में छवि के लिए सामग्री प्रकार सेट करें और मीडिया लाइब्रेरी से कोई भी छवि चुनें टूलटिप तब दिखाई देता है जब आगंतुक होवर करते हैं या छवि पर क्लिक करते हैं, जो टीम अवतार और उत्पाद थंबनेल के अनुरूप होता है।
क्या मैं होवर के बजाय क्लिक पर टूलटिप दिखा सकता हूं?
हाँ टूलटिप विकल्प में, होवर से क्लिक पर ट्रिगर बदलें क्लिक ट्रिगरिंग फोन और टैबलेट पर भी बेहतर व्यवहार करता है, जहां होवर मौजूद नहीं है।
मैं कैसे बदलूं जहां टूलटिप दिखाई देता है?
प्रत्येक किनारे के शीर्ष, नीचे, या एक प्रारंभ या अंत संस्करण को लेने के लिए टूलटिप विकल्पों में प्लेसमेंट ड्रॉपडाउन का उपयोग करें एक्स ऑफसेट और वाई ऑफसेट स्लाइडर्स फिर सटीक स्थिति को ठीक करते हैं, और दूरी लक्ष्य से अंतर सेट करती है।
क्या मैं टूलटिप बबल को स्टाइल कर सकता हूं?
हाँ स्टाइल टैब में टूलटिप स्टाइल्स सेक्शन बबल की चौड़ाई, बैकग्राउंड कलर, टेक्स्ट कलर, टाइपोग्राफी, पैडिंग, बॉर्डर, लक्ष्य से दूरी, टेक्स्ट अलाइनमेंट और बॉक्स शैडो को नियंत्रित करता है, एडिटर लाइव में बदलाव का पूर्वावलोकन करता है।
लपेटकर #
टूलटिप विजेट पूरे हिंट-बबल पैटर्न को एक ही स्थान पर संभालता है: एक आइकन, टेक्स्ट या छवि लक्ष्य चुनें, संदेश लिखें, ट्रिगर और प्लेसमेंट सेट करें, और एलिमेंटर पैनल से दोनों हिस्सों को स्टाइल करें, स्टाइल करें के पूरे सेट को ब्राउज़ करें मास्टर ऐडऑन विजेट और एक्सटेंशन टूलटिप एक्सटेंशन और बॉक्स में बाकी सभी चीज़ों के लिए, और देखें मूल्य निर्धारण पृष्ठ प्रो क्या जोड़ता है के लिए।
