टाइपोग्राफी

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

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

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

टाइपोग्राफी क्षेत्र क्या करता है #

एक टाइपोग्राफी फ़ील्ड आपके विजेट के विकल्प पैनल में एलिमेंट के टाइपोग्राफी समूह नियंत्रण को प्रस्तुत करता है जब कोई विजेट का चयन करता है और फ़ील्ड के लेबल के बगल में पेंसिल आइकन पर क्लिक करता है, तो एक पॉपओवर टेक्स्ट नियंत्रण के पूर्ण सेट के साथ खुलता हैः

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

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

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

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
• विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक रेस्तरां हीरो विजेट है <h1 class="bfh-title"> हेडिंग और ए <p class="bfh-lede"> इसके एचटीएमएल में इंट्रो पैराग्राफ।

टाइपोग्राफी फ़ील्ड कैसे जोड़ें #

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

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

टाइपोग्राफी क्षेत्र विकल्पों की व्याख्या की गई #

इसकी सेटिंग्स खोलने के लिए टाइपोग्राफी फ़ील्ड का चयन करें।

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

अपने चयनकर्ता पर फ़ील्ड इंगित करें #

यहां वह हिस्सा है जो लोगों को ऊपर ले जाता है यदि वे अन्य क्षेत्रों के लिए उपयोग किए जाते हैंः टाइपोग्राफी फ़ील्ड में कोई नहीं है {{shortcode}} अपने सीएसएस के लिए। एक टाइपोग्राफी मूल्य गुणों का एक पूरा बंडल है, एक भी मूल्य नहीं है, इसलिए यह एक सीएसएस घोषणा में प्रिंट नहीं कर सकता है इसके बजाय, आप भरें चयनकर्ता विकल्प और एलिमेंटर आपके लिए शैलियाँ उत्पन्न करता है।

नायक के परिचय पैराग्राफ के लिए, चयनकर्ता हैः

{{WRAPPER}} .bfh-lede

• {{WRAPPER}} विजेट के अपने कंटेनर के लिए खड़ा है, इसलिए शैलियों ने केवल कभी भी इस विजेट को मारा और कभी भी बाकी पृष्ठ पर लीक नहीं किया हमेशा इसके साथ चयनकर्ता शुरू करें।
• .bfh-lede क्या आपके विजेट HTML के अंदर वह तत्व है जिसे नियंत्रण को स्टाइल करना चाहिए।
• एक नियंत्रण के साथ कई तत्वों को चलाने के लिए, अल्पविराम के साथ चयनकर्ताओं को अलग करें और प्रत्येक को अपना स्वयं का दें {{WRAPPER}}: {{WRAPPER}} .bfh-title, {{WRAPPER}} .bfh-lede.

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

सीएसएस टैब में आपकी स्टाइलशीट विजेट के शुरुआती लुक के रूप में काम करती रहती है। जो भी हो font-family या font-size आपने लिखा है कि जब तक कोई उपयोगकर्ता पैनल में कुछ नहीं चुनता तब तक वह अपनी जगह पर बना रहता है; फिर नियंत्रण के मान इसे ओवरराइड कर देते हैं।

एलिमेंटर में टाइपोग्राफी नियंत्रण का उपयोग करें #

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

एक फ़ॉन्ट परिवार और आकार चुनें #

टाइपोग्राफी पॉपओवर खोलने के लिए पेंसिल आइकन पर क्लिक करें। द परिवार ड्रॉपडाउन सर्च सिस्टम फोंट और पूर्ण गूगल फोंट लाइब्रेरी जैसा कि आप टाइप करते हैं इसके नीचे, आकार px, em, rem, या vw में एक मान लेता है, और डिवाइस आइकन आपको प्रति ब्रेकपॉइंट एक अलग आकार सेट करने देता है, जिससे 96px डेस्कटॉप हेडलाइन एक ही नियंत्रण से फोन पर 48px तक गिर सकती है।

वजन, रिक्ति, और बाकी सेट करें #

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

या साइट के ग्लोबल फ़ॉन्ट्स का पालन करें #

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

हमारे उदाहरण में शीर्षक 98px पर एक स्क्रिप्ट फेस पर स्वैप हो जाता है, जिसे सीधे Google फ़ॉन्ट सूची से चुना जाता है, और पूर्वावलोकन फ़ॉन्ट लोड होने के क्षण को फिर से खींचता है।

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

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

टाइपोग्राफी क्षेत्र के साथ काम करने के लिए युक्तियाँ #

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

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

लपेटकर #

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