टैब

टैब एक लंबे पृष्ठ को भारी महसूस करने से रोकने के सबसे आसान तरीकों में से एक हैं सब कुछ लंबवत रूप से ढेर करने के बजाय, आप सामग्री को क्लिक करने योग्य वर्गों में विभाजित करते हैं जो आगंतुक अपनी गति से खोज सकते हैं।

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

नीचे, मैं आपको डेमो वीडियो में दिखाए गए समान लेआउट विकल्पों का उपयोग करके इसे स्क्रैच से कैसे सेट अप करने के बारे में बताऊंगा।

एलिमेंटर एडवांस्ड टैब्स विजेट क्या करता है #

इसके मूल में, यह विजेट टैब लेबल का एक सेट और एक सामग्री क्षेत्र बनाता है जब कोई लेबल पर क्लिक करता है, तो मिलान पैनल दिखाई देता है।

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

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

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

उन्नत टैब विजेट जोड़ें #

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

एक पूर्व निर्धारित लेआउट चुनें #

लुक बदलने का सबसे तेज़ तरीका है स्टाइल प्रीसेट सामग्री टैब में ड्रॉपडाउन आपके पास चार विकल्प हैंः

• क्षैतिज टैब: लेबल नीचे सामग्री के साथ शीर्ष पर चलते हैं यह डिफ़ॉल्ट है।
• लंबवत टैबः लेबल बाईं ओर ढेर हो जाते हैं और सामग्री दाईं ओर दिखाई देती है।
• वाम सक्रिय सीमाः ऊर्ध्वाधर टैब के समान, लेकिन सक्रिय टैब को बाईं ओर एक रंगीन बॉर्डर मिलता है।
• सारणीबद्ध सामग्रीः सामग्री पैनल के ऊपर लेबल बड़े कार्ड-शैली बटन बन जाते हैं।

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

टैब और सामग्री कॉन्फ़िगर करें #

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

प्रति-टैब सेटिंग्स #

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

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

दूसरे टैब के लिए, डेमो एक आइकन पर स्विच करता है आइकन प्रकार चुनें और लेबल से मेल खाने वाली कुछ चुनें इस मामले में, एक स्पीडोमीटर-शैली आइकन “बेहतर प्रदर्शन।” के लिए अच्छी तरह से काम करता है

एक टैब के अंदर सहेजे गए अनुभाग को लोड करें #

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

टैब और सामग्री को स्टाइल करें #

की ओर बढ़ें शैली रंग, टाइपोग्राफी, रिक्ति, और सीमाओं को बदलने के लिए टैब नियंत्रण दो मुख्य वर्गों में समूहीकृत हैंः

• टैब: शीर्षक रंग, शीर्षक टाइपोग्राफी, पृष्ठभूमि रंग, सामग्री रंग, सामग्री टाइपोग्राफी, सामग्री संरेखण, सीमा त्रिज्या, बॉक्स छाया, पैडिंग और मार्जिन सहित टैब लेबल को कवर करता है।
• सामग्री: उस पैनल को स्टाइल करता है जो दिखाता है कि टैब कब सक्रिय है।

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

उन्नत सेटिंग्स #

द उन्नत टैब में सामान्य एलिमेंटर नियंत्रण होते हैं जिनकी आप अपेक्षा करते हैं: मार्जिन, पैडिंग, प्रवेश एनीमेशन, उत्तरदायी दृश्यता, कस्टम सीएसएस और विशेषताएं विशिष्ट स्क्रीन आकारों पर स्थिति को समायोजित करने या टैब को छिपाने के लिए इनका उपयोग करें।

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

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

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

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

बेहतर टैब के लिए टिप्स #

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

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

लपेटकर #

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

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