द सीमा क्षेत्र एक कस्टम विजेट को एक बूंद में सीमा नियंत्रण का एक पूरा सेट देता है: एक सीमा प्रकार ड्रॉपडाउन, प्रति-साइड सीमा चौड़ाई इनपुट, और एक सीमा रंग पिकर मास्टर एडॉन्स के अंदर विजेट बिल्डर, आप फ़ील्ड को एक बार जोड़ते हैं, उसका शॉर्टकोड अपने सीएसएस में रखते हैं, और एलिमेंटर में विजेट को संपादित करने वाला कोई भी व्यक्ति कोड को छुए बिना बॉर्डर को रीस्टाइल कर सकता है।
सीमा नियंत्रण समर्थन करता है शर्तों हर फ़ील्ड की तरह, यह तब तक छिपा रह सकता है जब तक कि बॉर्डर टॉगल चालू न हो जाए, और बिल्डर के पार टोकन आउटपुट प्रदान न हो जाए ट्विग-सिंटैक्स टेम्पलेट इंजन। दोनों गाइड विवरण कवर करते हैं।
फ़ील्ड सीधे सीएसएस पर मैप करता है border आशुलिपि जो भी प्रकार, चौड़ाई, और रंग उपयोगकर्ता पैनल प्रिंट में चुनता है, जहां भी आप टोकन डालते हैं, आपकी स्टाइलशीट में प्रिंट होता है।
सीमा क्षेत्र क्या करता है #
एक सीमा क्षेत्र आपके विजेट के विकल्प पैनल में एलिमेंट के परिचित सीमा समूह नियंत्रण को प्रस्तुत करता है विजेट का चयन करें और तीन संबंधित नियंत्रण दिखाई देते हैंः
- सीमा प्रकारः डिफ़ॉल्ट, कोई नहीं, ठोस, डबल, बिंदीदार, धराशायी और ग्रूव के साथ एक ड्रॉपडाउन।
- सीमा चौड़ाईः एक लिंक टॉगल के साथ ऊपर, दाएं, नीचे और बाएं इनपुट सभी चार को एक साथ सेट करने के लिए, साथ ही उत्तरदायी मानों के लिए एक डिवाइस आइकन।
- सीमा रंगः आपके वैश्विक रंगों तक पहुंच वाला एक रंग बीनने वाला।
चौड़ाई और रंग नियंत्रण तब तक छिपे रहते हैं जब तक उपयोगकर्ता डिफ़ॉल्ट या कोई नहीं के अलावा कोई बॉर्डर प्रकार नहीं चुनता है, जो किसी भी बॉर्डर के उपयोग में न होने पर पैनल को साफ रखता है। यह वही पैटर्न है पाठ फ़ील्ड और अन्य विजेट बिल्डर फ़ील्ड: फ़ील्ड छोड़ें, इसे नाम दें, टोकन का उपयोग करें यदि आप विजेट बनाने में नए हैं, तो शुरुआत करें विजेट बिल्डर अवलोकन पहले।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
- विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक के साथ एक शीर्षक विजेट है
<h2 class="border-title">इसके एचटीएमएल में।
बॉर्डर फ़ील्ड कैसे जोड़ें #
विजेट बिल्डर संपादक में, बाईं ओर फ़ील्ड पैनल को तब तक स्क्रॉल करें जब तक आपको यह न मिल जाए सीमा क्षेत्र यह पृष्ठभूमि और पाठ छाया के बीच, सूची के नीचे के पास बैठता है।
सीमा क्षेत्र को नीचे एक खंड में खींचें सामग्री, शैली, या उन्नत टैब शैली इसके लिए प्राकृतिक घर है, हालांकि यह कहीं भी काम करता है एक बार जब यह भूमि, बाईं ओर क्षेत्र के विकल्प खुले और इसका शॉर्टकोड में दिखाई देता है प्रलेखन कोड संपादक के बगल में साइडबार।
सीमा क्षेत्र विकल्पों की व्याख्या की गई #
इसकी सेटिंग्स खोलने के लिए बॉर्डर फ़ील्ड का चयन करें वे हर दूसरे विजेट बिल्डर फ़ील्ड के समान लेआउट का पालन करते हैं।
- लेबलः एलिमेंटर में नियंत्रण के ऊपर दिखाया गया पाठ, डिफ़ॉल्ट रूप से “Border”।
- नाम: क्षेत्र के लिए विशिष्ट पहचानकर्ता इसमें केवल अक्षर, संख्याएं, और अंडरस्कोर होना चाहिए एक क्षेत्र नामित
borderआपको देता है{{border}}शॉर्टकोड। - विवरण: नियंत्रण के नीचे वैकल्पिक सहायक पाठ दिखाया गया है।
- डिफ़ॉल्ट मानः उदाहरण के लिए, विजेट जिस बॉर्डर से शुरू होता है, उसे सीएसएस शॉर्टहैंड के रूप में लिखा जाता है
1px solid #333। इसे खाली छोड़ दें और विजेट बिना किसी बॉर्डर के तब तक शिप करता रहे जब तक कोई उपयोगकर्ता इसे सेट न कर दे। - लेबल दिखाएँ और लेबल ब्लॉकः मानक लेबल टॉगल करता है, साथ ही सामान्य विभाजक और शर्तें और नीचे नियंत्रण करती हैं।
फ़ील्ड को अपने CSS से कनेक्ट करें #
बॉर्डर फ़ील्ड का टोकन आपकी स्टाइलशीट में है, आपके HTML में नहीं। खोलें सीएसएस टैब करें और इसे के मान के रूप में उपयोग करें border जो भी चयनकर्ता को सीमा ले जाना चाहिए उस पर संपत्ति हमारे शीर्षक उदाहरण के साथः
- नियम पढ़ता है
border: {{border}};के अंदर.border-titleचयनक। - रेंडर समय पर, टोकन उपयोगकर्ता द्वारा चुने गए पूर्ण शॉर्टहैंड तक विस्तारित हो जाता है, जैसे
5px solid #e02b20.
क्लिक करें सेटिंग्स सहेजें जब नियम जगह में है आप विजेट में किसी भी चयनकर्ता पर एक ही टोकन छोड़ सकते हैं, इसलिए एक सीमा नियंत्रण एक कार्ड, उसकी छवि, या दोनों को रेखांकित कर सकता है।
एलिमेंट में बॉर्डर कंट्रोल का उपयोग करें #
एलिमेंटर में एक पृष्ठ पर अपना कस्टम विजेट जोड़ें, या संपादक को फिर से लोड करें यदि पृष्ठ पहले से ही खुला था विजेट का चयन करें और सीमा नियंत्रण आपके द्वारा सेट किए गए लेबल के साथ अपने पैनल में दिखाई देता है।
एक सीमा प्रकार उठाओ #
द सीमा प्रकार ड्रॉपडाउन सूची डिफ़ॉल्ट, कोई नहीं, ठोस, डबल, बिंदीदार, धराशायी, और नाली डिफ़ॉल्ट या कोई नहीं के अलावा किसी भी प्रकार को चुनें और इसके नीचे दो और नियंत्रण दिखाई देते हैं: सीमा चौड़ाई और सीमा रंग पूर्वावलोकन अपडेट जैसे ही आप चुनते हैं, इसलिए डैशड चुनना विजेट के चारों ओर एक धराशायी रूपरेखा तुरंत खींचता है।
सीमा की चौड़ाई निर्धारित करें #
द सीमा चौड़ाई नियंत्रण अलग-अलग शीर्ष, दाएं, नीचे और बाएं मान लेता है सभी चार पक्षों को एक साथ बदलने के लिए लिंक आइकन रखें, या असमान सीमाओं के लिए इसे अनलिंक करें, जैसे पतली पक्षों के साथ एक मोटी शीर्ष और नीचे लेबल के बगल में डिवाइस आइकन आपको ब्रेकपॉइंट प्रति अलग चौड़ाई सेट करने देता है।
बॉर्डर का रंग चुनें #
द सीमा रंग नियंत्रण एलिमेंट के रंग पिकर को खोलता है अपने वैश्विक रंगों से खींचने के लिए ग्लोब आइकन का उपयोग करें, या पिकर और हेक्स, आरजीबीए, या एचएसएलए इनपुट के साथ एक कस्टम मान चुनें।
पूर्वावलोकन में हर परिवर्तन भूमि रहते हैं हमारे उदाहरण में शीर्षक एक ठोस लाल सीमा के साथ समाप्त होता है, ऊपर और नीचे ५ पिक्सेल और पक्षों पर ३ पिक्सेल।
सामान्य उपयोग के मामले #
- कार्ड और बॉक्स की रूपरेखा जहां प्रत्येक साइट को अपने स्वयं के सीमा वजन और रंग की आवश्यकता होती है।
- सुर्खियों इस उदाहरण में बॉक्स शीर्षक की तरह।
- छवि फ्रेम्स टीम, पोर्टफोलियो या उत्पाद विजेट पर।
- बटन शैलियाँ जहां एक रूपरेखा संस्करण को उपयोगकर्ता-संपादन योग्य सीमा की आवश्यकता होती है।
- कॉलआउट और नोटिस बॉक्स वह ठोस और धराशायी शैलियों के बीच स्विच।
सीमा क्षेत्र के साथ काम करने के लिए युक्तियाँ #
- टोकन को सीएसएस में रखें, एचटीएमएल में नहीं। शॉर्टकोड सीएसएस मान तक विस्तारित होता है, इसलिए यह केवल संपत्ति मान के रूप में समझ में आता है
border: {{border}};. - शॉर्टहैंड फॉर्म में डिफ़ॉल्ट मान सेट करें। कुछ इस तरह
1px solid #333किसी को भी पैनल खोलने से पहले विजेट को समाप्त दिखता है। - इसे सीमा-त्रिज्या के साथ जोड़ें। क्षेत्र प्रकार, चौड़ाई, और रंग को शामिल किया गया एक आयाम क्षेत्र या एक निश्चित जोड़ें
border-radiusगोल कोनों के लिए नियम। - याद रखें कोई भी वास्तविक विकल्प नहीं है। उपयोगकर्ता पैनल से बॉर्डर को बंद कर सकते हैं, इसलिए लेआउट को एक साथ रखने के लिए बॉर्डर पर निर्भर न रहें।
- टोकन का पुन: उपयोग करें जहां यह मदद करता है। वही
{{border}}मान कई चयनकर्ताओं को स्टाइल कर सकता है, और वे सभी एक नियंत्रण का पालन करते हैं।
अक्सर पूछे जाने वाले प्रश्न #
मास्टर एडॉन्स विजेट बिल्डर में बॉर्डर फ़ील्ड क्या है?
बॉर्डर फ़ील्ड एलिमेंटर के बॉर्डर ग्रुप कंट्रोल को एक कस्टम विजेट में जोड़ता है: एक बॉर्डर टाइप ड्रॉपडाउन, प्रति-साइड बॉर्डर चौड़ाई इनपुट, और एक बॉर्डर कलर पिकर इसका शॉर्टकोड आपके विजेट की स्टाइलशीट में परिणामी सीएसएस बॉर्डर शॉर्टहैंड को प्रिंट करता है।
मैं बॉर्डर शॉर्टकोड कहां रखूं?
विजेट बिल्डर के सीएसएस टैब में, सीमा संपत्ति के मूल्य के रूप में सीमा नाम के एक क्षेत्र का उपयोग सीमा के रूप में किया जाता है: {{सीमा}}; चयनकर्ता पर जिसे सीमा ले जानी चाहिए यह HTML संपादक में नहीं है।
नियंत्रण किस सीमा प्रकार का समर्थन करता है?
बॉर्डर टाइप ड्रॉपडाउन डिफ़ॉल्ट, कोई नहीं, ठोस, डबल, बिंदीदार, धराशायी और नाली प्रदान करता है डिफ़ॉल्ट या कोई नहीं को छोड़कर किसी भी प्रकार का चयन करने से ड्रॉपडाउन के नीचे बॉर्डर चौड़ाई और बॉर्डर कलर नियंत्रण का पता चलता है।
क्या उपयोगकर्ता प्रत्येक तरफ एक अलग सीमा चौड़ाई निर्धारित कर सकते हैं?
हाँ। बॉर्डर चौड़ाई नियंत्रण में अलग-अलग शीर्ष, दाएं, नीचे और बाएं इनपुट हैं। लिंक टॉगल चारों को एक साथ बदलता है; असमान मान सेट करने के लिए इसे अनलिंक करें, जैसे ऊपर और नीचे 5 पिक्सेल और किनारों पर 3 पिक्सेल।
मुझे पैनल में बॉर्डर चौड़ाई और रंग क्यों नहीं दिखता?
वे नियंत्रण छिपे रहते हैं जबकि सीमा प्रकार डिफ़ॉल्ट या कोई नहीं है ठोस, धराशायी, या किसी अन्य दृश्यमान प्रकार को चुनें और दोनों नियंत्रण दिखाई देते हैं यदि संपूर्ण सीमा नियंत्रण गायब है, तो एलिमेंट संपादक को फिर से लोड करें ताकि यह सहेजे गए विजेट को उठा सके।
लपेटकर #
विजेट बिल्डर बॉर्डर फ़ील्ड एक सीमा प्रकार ड्रॉपडाउन, उत्तरदायी प्रति-साइड चौड़ाई, और एक एकल ड्रैग और ड्रॉप में एक रंग पिकर पैक करता है फ़ील्ड का नाम दें, सेट करें border: {{border}}; आपके सीएसएस में, और सीमा निर्णय आपकी स्टाइलशीट से बाहर निकलते हैं और एलिमेंटर पैनल में जाते हैं जहां संपादक उन्हें संभाल सकते हैं इसे इसके साथ मिलाएं पाठ फ़ील्ड और ए विभाजक एक विजेट पैनल बनाने के लिए जो एक ही स्थान पर सामग्री और शैली को कवर करता है बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।
