उन्नत अकॉर्डियन
पाठ के लंबे ब्लॉक अभिभूत करते हैं, लेकिन छिपे हुए उत्तर निराश करते हैं एक अकॉर्डियन सही संतुलन पाता है ⇒ जब इसे सोच-समझकर डिज़ाइन किया जाता है मास्टर एडॉन्स एडवांस्ड अकॉर्डियन एलिमेंट आपको इस क्लासिक इंटरैक्टिव टूल पर पूर्ण नियंत्रण देता है स्वच्छ अकॉर्डियन (एक समय में एक खुला) या लचीला टॉगल (एकाधिक खुला) व्यवहार के बीच चुनें आइटम को टेक्स्ट, छवियों या यहां तक कि पूरे सहेजे गए टेम्पलेट्स के साथ भरें फिर, हर एक राज्य को स्टाइल करें: सामान्य शीर्षक, होवर, सक्रिय ओपन आइटम और सामग्री क्षेत्र स्वयं यह केवल अक्सर पूछे जाने वाले प्रश्नों के लिए नहीं है; यह फीचर सूचियों, उत्पाद चश्मा, पोर्टफोलियो, या किसी भी सामग्री के लिए है जो एक स्वच्छ, प्रकट-ऑन-डिमांड प्रस्तुति से लाभान्वित होता है।
दोहरे व्यवहार मोड और गतिशील सामग्री
यह परिभाषित करके शुरू करें कि आपका अकॉर्डियन कैसे व्यवहार करता है अकॉर्डियन प्रकार चुनें: एक केंद्रित, एक-आइटम-ओपन फ्लो के लिए पारंपरिक अकॉर्डियन, या अधिक लचीली, चेकलिस्ट-शैली के लिए टॉगल करें जहां उपयोगकर्ता कई आइटम खोल सकते हैं फिर, अपने आइटम का निर्माण करें प्रत्येक टैब के लिए, एक शीर्षक सेट करें और एक सामग्री प्रकार चुनें सरल पाठ से परे जाएं समृद्ध पाठ और मीडिया के लिए सामग्री का उपयोग करें, या सामग्री के पूरे पूर्व-डिज़ाइन किए गए ब्लॉक डालने के लिए सहेजे गए अनुभाग, सहेजे गए विजेट, या सहेजे गए पृष्ठ टेम्पलेट से चुनें यह मॉड्यूलर पेज बिल्डिंग और जटिल लेआउट का पुन: उपयोग करने के लिए एक शक्तिशाली उपकरण बनाता है।
- दो इंटरेक्शन मॉडल: चरणबद्ध प्रक्रियाओं के लिए अकॉर्डियन (एकल खुला), चेकलिस्ट या सुविधाओं के लिए टॉगल (एकाधिक खुला)।
- समृद्ध सामग्री स्रोत: सरल पाठ, छवियों, या संपूर्ण सहेजे गए एलिमेंटर अनुभागों और टेम्पलेट्स के साथ अकॉर्डियन आइटम को पॉप्युलेट करें।
- डिफ़ॉल्ट सक्रिय आइटम: पृष्ठ लोड होने पर किसी भी आइटम को डिफ़ॉल्ट के रूप में सक्रिय होने के लिए सेट करें।
- आसान प्रबंधन: + आइटम जोड़ें बटन और सहज पुनरावर्तक के साथ आइटम जोड़ें, हटाएं और पुन: व्यवस्थित करें।
राज्य-आधारित शीर्षक स्टाइलिंग और संरचना
शीर्षक पट्टी वह है जो उपयोगकर्ता क्लिक करते हैं ऒन प्रत्येक दृश्य स्थिति को जानबूझकर बनाते हैं शीर्षक को उसके सामान्य, होवर और सक्रिय (खुले) राज्यों के लिए अलग से स्टाइल करें प्रत्येक राज्य के लिए, एक अद्वितीय पृष्ठभूमि प्रकार (रंग, ढाल), पाठ रंग, और टाइपोग्राफी को नियंत्रित करें शीर्षक संरेखित करें, पैडिंग, सीमा, सीमा त्रिज्या, और एक बॉक्स छाया जोड़ें विस्तार का यह स्तर आपको एक स्पष्ट दृश्य यात्रा बनाने देता है: एक तटस्थ डिफ़ॉल्ट, एक आमंत्रित होवर, और एक अलग “open” राज्य जो उपयोगकर्ता की कार्रवाई की पुष्टि करता है।
- ट्रिपल-स्टेट डिज़ाइन: सामान्य, होवर और सक्रिय शीर्षक बार पर अलग-अलग शैलियाँ लागू करें।
- उन्नत पृष्ठभूमि: गहराई बनाने के लिए विभिन्न राज्यों के लिए ठोस रंगों या ग्रेडिएंट्स का उपयोग करें।
- पूर्ण बॉक्स नियंत्रण: प्रत्येक शीर्षक पट्टी को डिज़ाइन किया गया घटक बनाने के लिए पैडिंग, बॉर्डर्स और बॉक्स शैडो को समायोजित करें।
दोहरी राज्यों के साथ अनुकूलन टॉगल आइकन
जेनेरिक त्रिकोण आइकन से आगे बढ़ें विस्तार (बंद राज्य) और पतन (खुली स्थिति) क्रियाओं दोनों के लिए लाइब्रेरी से किसी भी आइकन को चुनने के लिए कस्टम आइकन सक्षम करें आइकन को बाएं या दाएं रखें फिर, इन आइकन को सामान्य, होवर और सक्रिय राज्यों के लिए स्वतंत्र रूप से स्टाइल करें, उनके रंग, आकार और पृष्ठभूमि को सही संरेखण के लिए आइकन के चारों ओर आइकन रिक्ति और पैडिंग समायोजित करें यह एक कार्यात्मक संकेतक को आपकी डिजाइन भाषा के एक सामंजस्यपूर्ण हिस्से में बदल देता है।
- दोहरे चिह्न: “plus” (विस्तार) और “minus” (पतन) स्थितियों के लिए अलग-अलग चिह्न सेट करें।
- राज्य-विशिष्ट चिह्न स्टाइलिंग: आइटम को मँडराया या सक्रिय होने पर आइकन का रंग और पृष्ठभूमि बदलें।
- ठीक से संरेखण: शीर्षक पाठ के सापेक्ष आइकन संरेखण, स्थिति और रिक्ति को नियंत्रित करें।
सामग्री क्षेत्र और कंटेनर स्टाइलिंग
नीचे स्लाइड करने वाली सामग्री अपने स्वयं के डिजाइन विचार के योग्य है अपने स्वयं के पृष्ठभूमि रंग, पाठ रंग, टाइपोग्राफी और आंतरिक पैडिंग के साथ सामग्री क्षेत्र को स्टाइल करें यदि आवश्यक हो तो पठनीयता के लिए एक पाठ छाया जोड़ें फिर, समग्र आइटम कंटेनर को स्टाइल करें जो सभी अकॉर्डियन वर्गों को रखता है: सेट करें वस्तुओं के बीच की दूरी, एक वैश्विक सीमा, सीमा त्रिज्या, और बॉक्स छाया यह सुनिश्चित करता है कि संपूर्ण विजेट एक एकीकृत, पॉलिश घटक की तरह महसूस करता है, और खुली सामग्री पढ़ने में आसान और सुखद है।
- सामग्री क्षेत्र डिज़ाइन: इष्टतम पठनीयता के लिए ड्रॉप-डाउन सामग्री की पृष्ठभूमि और पाठ को स्टाइल करें।
- कंटेनर-स्तर पोलिश: पूरे अकॉर्डियन समूह पर बॉर्डर रेडियस और बॉक्स शैडो लागू करें।
- आइटम रिक्ति: एक साफ, अलग देखो के लिए प्रत्येक अकॉर्डियन आइटम के बीच रिक्ति (मार्जिन) को नियंत्रित करें।
उन्नत सहमति के लिए अक्सर पूछे जाने वाले प्रश्न
“Accordion” और “Toggle” प्रकार के बीच व्यावहारिक अंतर क्या है?
अकॉर्डियन: एक समय में केवल एक आइटम खुला हो सकता है एक नया आइटम खोलना स्वचालित रूप से पिछले एक को बंद कर देता है अक्सर पूछे जाने वाले प्रश्न पृष्ठों या अनुक्रमिक निर्देशों के लिए सर्वश्रेष्ठ जहां आप स्क्रॉलिंग को कम करना चाहते हैं और ध्यान केंद्रित करना चाहते हैं।
टॉगल करें: कई आइटम एक साथ खुले हो सकते हैं उपयोगकर्ता तुलना करने या जानकारी इकट्ठा करने के लिए कई वस्तुओं का विस्तार कर सकते हैं सुविधा चेकलिस्ट, उत्पाद विनिर्देश सूचियों, या सामग्री के लिए सर्वश्रेष्ठ जहां उपयोगकर्ताओं को एक साथ कई अनुभाग देखने की आवश्यकता होती है।
क्या मैं पेज लोड होने पर एक आइटम को खोलना शुरू कर सकता हूं?
हाँ सामग्री टैब में एक व्यक्तिगत आइटम संपादित करते समय, आपको डिफ़ॉल्ट विकल्प के रूप में एक सक्रिय मिलेगा इसे उस आइटम के लिए हाँ पर सेट करें जिसे आप पूर्व-खोलना चाहते हैं केवल एक आइटम में संघर्ष से बचने के लिए एकॉर्डियन प्रकार में यह सेट होना चाहिए।
सामग्री प्रकार के रूप में "सहेजे गए अनुभाग" या "सहेजे गए पृष्ठ टेम्पलेट" क्या हैं?
ये शक्तिशाली एलिमेंटर प्रो विशेषताएं हैं यदि आपके पास एक अनुभाग (जैसे टीम प्रोफाइल) या एक संपूर्ण पृष्ठ टेम्पलेट (जैसे संपर्क फ़ॉर्म) आपके एलिमेंटर लाइब्रेरी में सहेजा गया है, तो आप इसे अकॉर्डियन आइटम के अंदर प्रदर्शित करने के लिए चुन सकते हैं यह आपको अपने अकॉर्डियन के भीतर जटिल, पूर्व-डिज़ाइन किए गए लेआउट एम्बेड करने देता है।
मोबाइल पर होवर और सक्रिय राज्य कैसे काम करते हैं?
टच डिवाइस पर, पहला टैप अक्सर होवर और एक्टिव दोनों राज्यों को त्वरित उत्तराधिकार में ट्रिगर करेगा (जैसा कि आइटम खुलता है) सक्रिय राज्य पर आप जो स्टाइल लागू करते हैं वह मोबाइल के लिए सबसे महत्वपूर्ण है, क्योंकि यह दिखाएगा कि वर्तमान में कौन सा होवर राज्य एक अलग कदम के रूप में नहीं देखा जा सकता है।
क्या मैं एनीमेशन गति को खोलने और बंद करने को नियंत्रित कर सकता हूं?
हाँ सामग्री टैब में, आपको टॉगल स्पीड (एमएस) मिलेगा मूल्य मिलीसेकंड में है (जैसे, ३००) कम संख्या (जैसे २००) इसे तेज और तेज़ बनाता है; एक उच्च संख्या (जैसे ५००) इसे धीमा और अधिक जानबूझकर बनाता है।
क्या अकॉर्डियन कीबोर्ड नेविगेशन और स्क्रीन रीडर के लिए सुलभ है?
एक उचित रूप से कोडित अकॉर्डियन विजेट सुलभ होना चाहिए सिमेंटिक टाइटल एचटीएमएल टैग (जैसे <div>, <h3>) का उपयोग सामग्री की संरचना में मदद करता है विस्तारित/संक्षिप्त राज्यों के लिए इंटरैक्टिव राज्यों और एआरआईए विशेषताओं को आमतौर पर विजेट द्वारा नियंत्रित किया जाता है ताकि यह सुनिश्चित किया जा सके कि स्क्रीन रीडर परिवर्तनों की घोषणा कर सकें।
ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।
ग्लासमोर्फिज्म
कंटेनर अतिरिक्त
पैटर्न
पोस्ट/पेज डुप्लीकेटर
