काउंटर अप

संख्याएं वाक्यों की तुलना में तेजी से विश्वास दिलाती हैं: ५.५ के सूचनाएं वितरित की गईं, १२० एम वीडियो दृश्य काउंटर अप विजेट इन एलिमेंट के लिए मास्टर ऐडऑन उन आँकड़ों को कार्डों की एक पंक्ति में रखता है जो आगंतुकों के स्क्रॉल करने पर शून्य से गिने जाते हैं, प्रत्येक में एक आइकन, K+ या M+ जैसा प्रत्यय और अपनी स्वयं की स्टाइल होती है।

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

काउंटर अप विजेट क्या करता है #

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

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

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
• बेसिक विजेट के अंतर्गत मास्टर ऐडऑन विकल्प पैनल में काउंटर अप विजेट सक्षम किया गया है।
• आपकी वास्तविक संख्याएं आविष्कृत आंकड़ों के साथ एक आँकड़े अनुभाग सभी पर कोई आँकड़े नहीं होने से अधिक नुकसान करता है।

काउंटर अप विजेट कैसे जोड़ें #

एलिमेंट संपादक में, खोजें तत्वों लिए पैनल काउंटर अप और इसे पृष्ठ पर खींचें यह पहले से ही कैनवास पर गिनती नमूना वस्तुओं के साथ लोड होता है, इसलिए एनीमेशन पहले सेकंड से दिखाई देता है।

प्रत्येक काउंटर आइटम सेट करें #

खुला काउंटर अप सामग्री और सूची में एक आइटम पर क्लिक करें प्रत्येक व्यक्ति प्रति-स्टेट नियंत्रण का पूरा सेट वहन करता हैः

• प्रकार: स्टेट के शीर्ष पर कोई नहीं, आइकन या छवि नहीं। आइकन एलिमेंटर लाइब्रेरी खोलता है; छवि मीडिया लाइब्रेरी खोलती है।
• शीर्षक: संख्या के अंतर्गत लेबल, जैसे “Notifications Delived”।
• संख्या उपसर्ग और प्रत्ययः संख्या के चारों ओर पाठ एक “$” उपसर्ग या एक “K+” प्रत्यय 5.5 को $5.5 या 5.5K+ में बदल देता है।
• नंबर: काउंटर जिस मूल्य पर चढ़ता है दशमलव काम करते हैं, इसलिए के + प्रत्यय के साथ ५.५ ५.५ के + पढ़ता है।
• पृष्ठभूमि: एक प्रति-आइटम कार्ड का रंग, जब एक स्टेट बाहर खड़ा होना चाहिए।

प्रत्यय ट्रिक बड़ी संख्याओं को छोटा रखती है: 120,000,000 तक एनिमेट करने के बजाय, एम+ प्रत्यय के साथ डेमो 120 तक गिना जाता है। तेज़ एनीमेशन, क्लीनर कार्ड, और कोई भी जाँचने के लिए शून्य नहीं गिनता।

प्रति-आइटम पृष्ठभूमि रंग सिर्फ उस कार्ड को एक हेडलाइन स्टेट को हाइलाइट करने के लिए उपयोगी है, या इसे छोड़ दें और साझा बॉक्स शैली को सभी चार को संभालने देंः

कॉलम और सामग्री स्थिति चुनें #

आइटम सूची के नीचे, कॉलम सेट करता है कि कितने काउंटर एक पंक्ति साझा करते हैं, प्रति डिवाइस एक उत्तरदायी टॉगल के साथ। सामग्री स्थिति संख्या के सापेक्ष शीर्षक रखता है: ऊपर, बाएं, दाएं, या नीचे डेमो साइड-बाय-साइड नंबर और शीर्षक के साथ २ कॉलम की कोशिश करता है, फिर स्टैक्ड ४ कॉलम पर वापस बस जाता है।

आइकनों को ट्यून करें #

द चिह्न सेटिंग्स अनुभाग प्रत्येक कार्ड पर आइकन ब्लॉक को नियंत्रित करता हैः चिह्न/छवि स्थिति (स्टेट के बाएँ, ऊपर या दाएँ), चिह्न आकार, और चिह्न वृत्त या छवि आकार ग्लिफ़ के पीछे रंगीन डिस्क के लिए डेमो ८६ पिक्सेल सर्कल पर ३० पिक्सेल आइकन चलाता है।

कार्ड स्टाइल करें #

में शैली टैब, काउंटर अप बॉक्स शैली साझा कार्ड लुक को कवर करता हैः पृष्ठभूमि रंग, पैडिंग, मार्जिन, सीमा प्रकार, सीमा त्रिज्या, और बॉक्स छाया। डेमो 20 पिक्सेल पैडिंग और मार्जिन के साथ नरम गुलाबी कार्ड पर आता है, जो हार्ड बॉर्डर के बिना चार आँकड़ों को अलग करता है।

संख्याओं, शीर्षकों और चिह्नों को स्टाइल करें #

द सामग्री शैली अनुभाग चार समूहों में विभाजित होता है, कार्ड पर प्रति तत्व एकः

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

पेज पर रिजल्ट #

लाइव पेज पर संख्या शून्य से स्पिन होती है क्योंकि अनुभाग दृश्य में स्क्रॉल करता है, फिर अंतिम मूल्यों पर व्यवस्थित होता है यहां समाप्त बैंड हैः

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

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

बेहतर काउंटरों के लिए टिप्स #

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

वीडियो ट्यूटोरियल #

यदि आप काउंटर अप विजेट को एक्शन में देखना चाहते हैं, तो यह वीडियो पहले आइटम से लाइव पेज पर एनिमेटेड स्टैट्स बैंड तक, पूर्ण सेटअप के माध्यम से चलता हैः

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

लपेटकर #

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