उन्नत अकॉर्डियन

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

यह मार्गदर्शिका वास्तविक FAQ अनुभाग पर विजेट के माध्यम से आइटम सूची से लेकर लाइव पेज पर स्टाइल किए गए अकॉर्डियन तक चलती है।

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

उन्नत अकॉर्डियन विजेट क्या करता है #

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

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

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

अकॉर्डियन आइटम जोड़ें और प्रबंधित करें #

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

सूची के नीचे साझा नियंत्रण बैठते हैंः

• सक्रिय/निष्क्रिय चिह्न दिखाएँ?: प्रत्येक शीर्षक के दाईं ओर विस्तार और पतन आइकन टॉगल करता है।
• आइकन का विस्तार करें और आइकन को संक्षिप्त करेंः दो टैब, एक आइकन पिकर प्रत्येक नीचे इन पर अधिक।
• टॉगल गति (एमएस): आइटम कितनी तेजी से खुलते और बंद होते हैं, डिफ़ॉल्ट रूप से ३०० मिलीसेकंड वह डिफ़ॉल्ट तेज़ लगता है; पिछले ६०० अकॉर्डियन को ऐसा लगने लगता है कि यह रुक रहा है।
• शीर्षक एचटीएमएल टैगः प्रत्येक प्रश्न के आसपास मार्कअप, डिफ़ॉल्ट रूप से डिव यदि प्रश्न पृष्ठ की शीर्षक संरचना को फीड करना चाहिए तो एच ३ चुनें।

किसी आइटम के अंदर टेक्स्ट या पूरा टेम्पलेट डालें #

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

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

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

विस्तार और पतन आइकन सेट करें #

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

मिलान जोड़े सबसे अच्छा पढ़ते हैं: कैरेट अप के साथ कैरेट डाउन, प्लस माइनस के साथ, शेवरॉन शेवरॉन के साथ डेमो कैरेट पर बसता है।

शीर्षकों को स्टाइल करें #

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

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

डेमो शीर्षकों को हल्के भूरे रंग की पृष्ठभूमि और नीला पाठ देता है, और रंग बीनने वाला खुला होने पर कैनवास लाइव अपडेट होता हैः

सामग्री क्षेत्र को स्टाइल करें #

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

टॉगल आइकन को स्टाइल करें #

द टॉगल आइकन अनुभाग पंक्ति समाप्त करता है समाप्त होता है।

• चिह्न स्थिति: शीर्षक के बाएँ, उसके दाएँ, या कोई नहीं।
• चिह्न आकार, रिक्ति, पैडिंगः डेमो 18 पिक्सेल आइकन चलाता है।
• चिह्न रंगः सामान्य, होवर और सक्रिय अवस्थाएँ, प्रत्येक पृष्ठभूमि और आइकन रंग के साथ।

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

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

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

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

एक बेहतर अकॉर्डियन के लिए टिप्स #

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

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

यदि आप कार्रवाई में उन्नत अकॉर्डियन देखना चाहते हैं, तो यह वीडियो इस बात से गुजरता है कि कोई भी कितनी आसानी से एक बना सकता है, समाप्त करना शुरू करेंः

और यह एक दिखाता है कि नेस्टेड अकॉर्डियन कैसे जोड़ा जाए, एक अकॉर्डियन को दूसरे के अंदर लोड किया गया है सहेजे गए अनुभाग सामग्री प्रकार के साथः

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

लपेटकर #

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