अपनी साइट को विज़िटर्स के लिए आकर्षक कैसे बनाएं? यह सवाल इंटरनेट संसाधनों के लगभग सभी मालिकों को चिंतित करता है: व्यापारी, ब्लॉगर, छोटे और बड़े व्यवसायों के मालिक, यात्री और केवल रचनात्मक लोग जिनके पास दुनिया को बताने के लिए कुछ है।
एक वेबसाइट सुंदर और कार्यात्मक क्यों होनी चाहिए?
विज़िट्स की संख्या साइट के विषय और उसके लक्षित दर्शकों, किसी विशेष उत्पाद में लोगों की रुचि, निवेश, प्रचार, सामग्री और कई अन्य कारकों पर निर्भर करती है। लेकिन इस बात से इनकार नहीं किया जा सकता है कि साइट "कपड़ों द्वारा अभिवादन" है। यह संसाधन का पहला और मुख्य पृष्ठ है जो उसका चेहरा है, कॉलिंग कार्ड, जिसके द्वारा आगंतुक को यह समझना चाहिए कि क्या वह सामग्री को और अधिक देखने पर अपना समय बिताना चाहता है।
और गलती की कोई गुंजाइश नहीं है! संयुक्त राज्य अमेरिका में तकनीकी विश्वविद्यालयों में से एक के शोध के अनुसार, आगंतुक को साइट का पहला प्रभाव एक सेकंड से भी कम समय में मिल जाता है। औसतन, एक व्यक्ति किसी साइट को 3 सेकंड में "स्कैन" करता है। बिजली की गति, है ना?!
संसाधन की सफलता का 70% तक मुख्य पृष्ठ कैसा दिखता है, इस पर निर्भर करता है। पहली बात जो लोग नोटिस करते हैं वह हैलोगो, लेकिन दूसरा नेविगेशन है। और अगर लोगो के साथ सब कुछ कमोबेश स्पष्ट है, तो यह साइट के एर्गोनॉमिक्स के नेविगेशन, मेनू और सुविधा पर अपना सिर तोड़ने लायक है। एक वाजिब सवाल उठता है: "अपनी साइट को कैसे सजाएं, इसे यथासंभव कार्यात्मक और सुविधाजनक बनाएं, लेकिन साथ ही साथ सुंदर भी?" पेश करने के लिए कई असामान्य विचार हैं, लेकिन सबसे दिलचस्प में से एक है टूलटिप्स।
टूलटिप्स क्या हैं? साइट की कार्यक्षमता में सुधार के लिए एक महान तंत्र होने के अलावा, टूलटिप्स एक उपकरण है जो उपयोगकर्ता को किसी आइकन, शब्द या चित्र पर मँडराते समय किसी विशेष छवि के लिए स्पष्टीकरण देखने की अनुमति देता है।
टूलटिप्स के साथ काम करने के लिए टूल
बूटस्ट्रैप टूलटिप्स बनाने का सबसे अच्छा टूल है। यह HTML, CSS, Sass, और JavaScript में लिखे गए ऐप्स और वेबसाइट बनाने के लिए टेम्प्लेट का एक आसान-से-सीखने वाला सेट है।
विशिष्ट होने के लिए, टूलटिप्स बूटस्ट्रैप टेम्पलेट के ग्राफिकल तत्वों में से एक का उपयोग करते हैं - टूलटिप।
बूटस्ट्रैप फ्रेमवर्क "ट्विटर" के लिए बनाया गया था और इसे मूल रूप से "ट्विटर ब्लूप्रिंट" कहा जाता था। 2012 में कुछ बदलावों के बाद, इसे 12-कॉलम ग्रिड प्राप्त हुआ, अनुकूली बन गया और परिचित नाम - टूलटिप प्राप्त कर लिया। टूलटिप एक ऐसा तत्व है जो मॉनिटर स्क्रीन पर किसी विशिष्ट तत्व पर होवर करने पर पॉप अप होता है।
एक संकेत बनाना
आप विशेषताओं का उपयोग करके बूटस्ट्रैप टूलटिप बना सकते हैंडेटा, साथ ही साथ "जावा स्क्रिप्ट" तत्वों को सक्रिय करके। HTML बूटस्ट्रैप टूलटिप बनाने के दो मुख्य तरीके हैं। पहले का सार विशेषता और विशेषता शीर्षक (शीर्षक) को लागू करना है, जिसमें संकेत पाठ होगा। टूलटिप सबसे ऊपर (डिफ़ॉल्ट सेटिंग) पॉप अप होगा। यह याद रखने योग्य है कि टूलटिप को इनिशियलाइज़ करने की आवश्यकता है, क्योंकि प्रदर्शन कारणों से "ट्विटर बूटस्ट्रैप" में स्वचालित इनिशियलाइज़ेशन को हटा दिया गया है।
टूलटिप्स को इनिशियलाइज़ करने के लिए, विशेष जावास्क्रिप्ट का उपयोग किया जाता है, जिसमें टूलटिप विधि को उन सभी तत्वों के लिए पुनर्स्थापित किया जाता है जिनमें एक विशेषता होती है। दूसरी विधि का सार "जावास्क्रिप्ट" कोड का उपयोग करके टूलटिप को सक्रिय करने के लिए एक टूल क्लास लिखकर jQuery लाइब्रेरी की भागीदारी के साथ सक्रिय करना है जिसमें टूलटिप शामिल है। तत्व चयन विधि को छोड़कर, विधि पहले वाले के समान है। आप नीचे दिखाए गए तरीके से "जावा स्क्रिप्ट" में संकेत सक्षम कर सकते हैं।
बूटस्ट्रैप टूलटिप उदाहरण
उपकरण युक्तियों की स्थिति के लिए चार मुख्य विकल्प हैं: बाएँ और दाएँ किनारों पर, और तत्व के ऊपर और नीचे।
ऊपर से संकेत
संकेत सही
नीचे संकेत
संकेत बाकी
टूलटिप्स का उपयोग करना
बूटस्ट्रैप टूलटिप के कई उपयोग हैं। आप टूलटिप्स सम्मिलित कर सकते हैं ताकि उपयोगकर्ता टेक्स्ट में किसी विदेशी भाषा से टेक्स्ट के अनुवाद को समझ सके। टूलटिप्स का उपयोग टूल के रूप में भी किया जा सकता है ताकि उपयोगकर्ता पैनल के बटनों पर मँडराते समय उनके अर्थ को समझ सकें। बूटस्ट्रैप टूलटिप टेम्प्लेट का उपयोग अक्सर कंपनी समाचार की सदस्यता बनाने के लिए विभिन्न संगठनों की वेबसाइटों पर किया जाता है। यह ग्राहकों को अद्यतित रखता है और आगंतुकों को नई जानकारी प्राप्त करने की अनुमति भी देता है, जैसे कि छूट की दरें, ऑफ़र, कंपनी के भीतर परिवर्तन।
एक उदाहरण पर विचार करें जहां एक उपयोगकर्ता को न्यूज़लेटर की सदस्यता लेने के लिए अपना ईमेल पता दर्ज करने की आवश्यकता होती है। यह सुनिश्चित करने का कार्य कि क्लाइंट ऑडियंस समाचार की सदस्यता लेती है, HTML5 और आवश्यक विशेषता का उपयोग करके सबसे आसानी से प्राप्त किया जाता है। उपयोगकर्ता को क्रियाओं के क्रम को समझने के लिए इस मामले में टूलटिप संकेत की आवश्यकता है। उदाहरण के लिए, ईमेल पता दर्ज करने के बाद, मैंने बॉक्स चेक किया: "मैं अपने ईमेल पते पर कंपनी समाचार प्राप्त करने के लिए सहमत हूं।" नीचे प्रपत्र कोड का एक उदाहरण दिया गया है।
इस कोड को HTML बूटस्ट्रैप टूलटिप में स्थापित करना आसान है। लेकिन लाभ महत्वपूर्ण हैं। अब उपभोक्ताओं को कंपनी की सभी खबरें पता हैं। यह एक तरह का मुफ़्त विज्ञापन है।
पॉपअप बनाते समय मुख्य गलतियाँसंकेत
अगर बूटस्ट्रैप टूलटिप काम न करे तो क्या करें? पहली और मुख्य गलती जहां टूलटिप विशेषता काम नहीं करेगी यदि टूलटिप सक्षम नहीं है। इसे सक्रिय करने के लिए, आपको एक विशेष कोड का उपयोग करना होगा।
यह विधि आपको वेब पेज पर पूरी तरह से सभी टूलटिप्स को इनिशियलाइज़ करने की अनुमति देती है।
दूसरी आम गलती हैडर में jQuery का न होना।
लिंक के सही ढंग से काम करने के लिए एक आवश्यक शर्त है - "जावा स्क्रिप्ट" जैसे डेटा प्रोसेसिंग फ़ंक्शन को निर्दिष्ट किया जाना चाहिए।
टूलटिप गुण
इसके मूल में, टूलटिप घटक को टूलटिप्स प्रदर्शित करने के लिए डिज़ाइन किया गया है जब आप माउस पॉइंटर को पृष्ठ के एक या दूसरे भाग पर ले जाते हैं। लेकिन, टूलटिप की सहायता से दाएं, बाएं और ऊपर टूलटिप के स्थान के अलावा, टूलटिप में निम्नलिखित गुण हैं:
- सक्रिय। बूटस्ट्रैप टूलटिप में ट्रू प्रॉपर्टी का उपयोग करने से टूलटिप्स को प्रदर्शित करने की अनुमति मिलती है, जबकि उसी प्रॉपर्टी को असत्य पर सेट करने का मतलब कोई टूलटिप प्रदर्शित नहीं किया जा सकता है।
- AutoPopDelay वह समय है जब युक्तियाँ प्रदर्शित होती हैं।
- ऑटोपॉपदेरी। यह दर्शाता है कि टूलटिप के प्रकट होने के लिए माउस कर्सर को किसी तत्व पर मँडराना चाहिए।
- इसबालून। यदि HTML बूटस्ट्रैप टूलटिप टूलटिप का मान सत्य है, तो टूलटिप क्लाउड में बदल जाएगा।
- ToolTipIcon. विंडो में प्रदर्शित होने वाले चरित्र का प्रतिनिधित्व करता हैसंकेत।
टूलटिपस्टर
सुंदर टूलटिप्स बनाने के लिए, उदाहरण के लिए, Wordpress पर बनाई गई साइट पर, वेब डेवलपर्स की भाषा को अच्छी तरह से जानना आवश्यक नहीं है। टूलटिपस्टर जैसे प्लगइन (एक्सटेंशन) के अस्तित्व के बारे में जानना पर्याप्त है। नाम से यह स्पष्ट है कि यह प्लगइन टूलटिप पर आधारित है और आश्चर्यजनक रूप से इसके गुणों और उद्देश्य के समान है। यह प्लगइन किस लिए है? यह आपको टूलटिप के अंदर आवश्यक HTML मार्कअप बनाने की अनुमति देता है।
प्लगइन का कार्य पेज पर शॉर्टकट डालने पर आधारित है। सभी मूल HTML बूटस्ट्रैप टूलटिप विशेषताएँ शामिल हैं: सामग्री (डेटा-टूलटिप-सामग्री), शीर्षक, स्थिति, ट्रिगर, आदि। यह आपको थीम, फ़ॉन्ट, टूलटिप आकार, रंग, एक छवि सम्मिलित करने, और बहुत कुछ बदलने की अनुमति देता है।
