सामग्री विजेट की एलिमेंटर तालिका, कोई प्रो की जरूरत है
एलिमेंट का अपना टेबल ऑफ कंटेंट्स विजेट एलिमेंट प्रो के साथ आता है मास्टर एडॉन्स में टेबल ऑफ कंटेंट्स विजेट प्रो के बिना एलिमेंट पर चलता है इसे पोस्ट या पेज पर ड्रॉप करें और यह वहां हेडिंग पढ़ता है, फिर हेडिंग ऑर्डर में उनसे लिंक की गई सूची बनाता है किसी भी आइटम पर क्लिक करने से रीडर उस सेक्शन में स्क्रॉल हो जाता है आप चुनते हैं कि कौन से हेडिंग टैग शामिल करने हैं और क्या सूची बुलेट या नंबर दिखाती है पाठक बॉक्स को दूर मोड़ सकते हैं, बैक टू टॉप एरो उन्हें फिर से ऊपर लाता है, और एक छोटा सीएसएस नियम बॉक्स को साइडबार में दृश्य में रखता है।
एलिमेंटर में सामग्री की एक तालिका कैसे जोड़ें
आपको एलिमेंट और मास्टर एडॉन्स की आवश्यकता है एलिमेंट प्रो की आवश्यकता नहीं है पृष्ठ को वास्तविक शीर्षक टैग (एच २, एच ३ और इतने पर) की भी आवश्यकता है, क्योंकि सूची उनसे बनाई गई है।
- स्थापित करें और सक्रिय करें वर्डप्रेस.ओआरजी से मास्टर ऐडऑन, और जांचें कि मास्टर ऐडऑन डैशबोर्ड में सामग्री तालिका सक्षम है।
- एलिमेंटर के साथ अपनी पोस्ट या पेज खोलें और विजेट पैनल खोजें विषय-सूची.
- इसे वहां खींचें जहां सूची बैठनी चाहिए, आमतौर पर पहले खंड के ऊपर या साइडबार कॉलम में।
- में सामग्री, शीर्षक सेट करें, एक सूची शैली चुनें और शामिल करने के लिए शीर्षक टैग चुनें।
- खुला बंधनेवाला और स्क्रॉल टॉगल और वापस शीर्ष तीर में जोड़ने के लिए।
- स्टाइल टैब में शीर्षक, विभाजक और लिंक को स्टाइल करें, फिर पृष्ठ का पूर्वावलोकन करें और जंप का परीक्षण करने के लिए कुछ आइटम पर क्लिक करें।
प्रत्येक सेटिंग को कवर किया गया है विषय-सूची विजेट सेटिंग्स गाइड।
एक नज़र में विषय-सूची
विजेट क्या करता है, मास्टर ऐडऑन 3.2।3 से पढ़ें।
| आइटम | विषय-सूची विजेट |
|---|---|
| जहां यह शीर्षकों को पाता है | अंदर।प्रविष्टि-सामग्री पहले, फिर ।पृष्ठ-सामग्री, फिर एलिमेंटर सामग्री क्षेत्र |
| शीर्षक स्तर | H1 से H6 में से कोई भी, H2, H3 और H4 के साथ डिफ़ॉल्ट रूप से चुना गया |
| एक शीर्षक छोड़ दें | उस शीर्षक में CSS क्लास jltma-toc-hide-heading जोड़ें |
| सूची शैली | डिफ़ॉल्ट (कोई मार्कर नहीं), गोलियाँ या संख्याएँ |
| घोंसला बनाना | हमेशा हेडिंग लेवल द्वारा नेस्टेड |
| बंधनेवाला बॉक्स | शीर्षक के आगे टॉगल करें, प्रारंभ में संक्षिप्त रखें के साथ |
| स्क्रॉल करना | चिकना स्क्रॉल जो शीर्षक से लगभग 30 px ऊपर रुकता है |
| शीर्ष पर वापस जाएँ | 250 px स्क्रॉलिंग के बाद निचले दाएं कोने में तीर |
| सक्रिय आइटम | वह आइटम जिस पर पाठक ने अंतिम बार क्लिक किया था (कोई स्क्रॉल जासूस नहीं) |
| चिपचिपा | कोई स्विच नहीं; स्थिति: कस्टम सीएसएस, या एलिमेंटर प्रो मोशन इफेक्ट्स के माध्यम से चिपचिपा |
| जरूरतें | एलिमेंट और मास्टर एडॉन्स, कोई एलिमेंट प्रो नहीं |
आपके शीर्षकों से सूची बनाता है
में स्तर चुनें शीर्षक टैगएच २, एच ३ और एच ४ डिफ़ॉल्ट रूप से चुने जाते हैं, और एच १ से एच ६ में से कोई भी जोड़ा जा सकता है जब पृष्ठ लोड होता है, तो विजेट उन शीर्षकों को ढूंढता है, प्रत्येक को एक आईडी देता है यदि उसके पास कोई नहीं है, और शीर्ष स्तर द्वारा सूची का नाम बदलें या जोड़ें और सूची इसे अगले लोड पर उठाती है, इसलिए हाथ से रखने के लिए कोई एंकर लिंक नहीं हैं।
- सूची शैलीः डिफ़ॉल्ट (कोई मार्कर नहीं), गोलियाँ या संख्याएँ।
- एक शीर्षक छोड़ेंः सीएसएस वर्ग जोड़ें
jltma-toc-hide-headingउस शीर्षक के उन्नत टैब में। - विभाजक दिखाएँः शीर्षक के अंतर्गत अपनी शैली, रंग, मोटाई और रिक्ति के साथ एक वैकल्पिक पंक्ति।
- हेडिंग आईडी हेडिंग टेक्स्ट से बनाई जाती हैं, इसलिए आप कहीं और से सीधे सेक्शन से भी लिंक कर सकते हैं।
साइडबार और मोबाइल के लिए बंधनेवाला बॉक्स
चालू करें सामग्री को संक्षिप्त बनाने योग्य बनाएं और शीर्षक के बगल में एक टॉगल आइकन दिखाई देता है पाठक सूची को खोलने या बंद करने के लिए इसे क्लिक करते हैं, और यह कूदने के बजाय स्लाइड करता है स्विच ऑन प्रारंभ में ढहे रहें यदि आप चाहते हैं कि बॉक्स केवल अपना शीर्षक दिखाते हुए लोड हो, जो लंबे कानूनी पृष्ठों और संकीर्ण साइडबार कॉलम में मदद करता है।
- टॉगल के लिए आइकन आकार और आइकन रंग नियंत्रण।
- विभाजक सूची के साथ मुड़ जाता है।
- विजेट का अपना कोई चिपचिपा स्विच नहीं है लोगों को पढ़ने के दौरान बॉक्स को देखने के लिए, नीचे सामग्री की तालिका चिपचिपा बनाएं देखें।
चिकनी छलांग और शीर्ष तीर पर वापस
किसी आइटम पर क्लिक करने से पृष्ठ आसानी से उसके शीर्षक तक स्क्रॉल हो जाता है और उसके ऊपर लगभग 30 पीएक्स रुक जाता है, इसलिए शीर्षक स्क्रीन के शीर्ष पर फ्लश नहीं बैठता है। यदि आपकी साइट पर एक लंबा फिक्स्ड हेडर है, तो नीचे दिए गए FAQ में दो-पंक्ति सीएसएस फिक्स है जो शीर्षकों को इससे दूर रखता है।
- शीर्ष पर स्क्रॉल करें निचले दाएं कोने में एक छोटा तीर जोड़ता है जो दिखाता है कि एक बार आगंतुक नीचे स्क्रॉल करता है।
- तीर पाठकों को सामग्री की तालिका में वापस ले जाता है, या उस स्थिति में ले जाता है जिसे आपने स्क्रॉल टू टॉप ऑफसेट में सेट किया है।
- तीर के लिए आकार, चिह्न रंग और पृष्ठभूमि रंग नियंत्रण।
- रीडर द्वारा क्लिक किया गया आइटम सामग्री शैली अनुभाग से सक्रिय रंग रखता है, ताकि वे देख सकें कि वे कहाँ कूदे थे।
विषय-सूची को चिपचिपा बनाएं
विजेट का अपना कोई चिपचिपा स्विच नहीं है आप विजेट को साइडबार कॉलम के अंदर चिपचिपा बनाकर पिन करते हैं, और प्रो के बिना एलिमेंटर मास्टर एडॉन्स के माध्यम से ऐसा कर सकता है कस्टम सीएसएस एक्सटेंशन.
- लेख और सामग्री की तालिका को एक पंक्ति में रखें: सामग्री के लिए एक विस्तृत स्तंभ और सामग्री की तालिका विजेट के लिए एक संकीर्ण स्तंभ संकीर्ण स्तंभ को अपनी डिफ़ॉल्ट ऊंचाई पर छोड़ दें ताकि यह पंक्ति की ऊंचाई तक फैल जाए।
- सामग्री तालिका विजेट का चयन करें, खोलें उन्नत, फिर मास्टर एडॉन्स कस्टम सीएसएस अनुभाग, और पेस्ट करें
selector { position: sticky; top: 32px; } - यदि आपकी साइट में एक निश्चित हेडर है, उदाहरण के लिए 80px हेडर के तहत 110px, तो शीर्ष मान बढ़ाएँ।
- पृष्ठ का पूर्वावलोकन करें और स्क्रॉल करें बॉक्स पंक्ति के अंत तक दृश्य में रहता है।
एलिमेंटर प्रो के साथ आप उपयोग कर सकते हैं उन्नत, गति प्रभाव, चिपचिपा: शीर्ष इसके बजाय, स्टे इन कॉलम चालू होने के साथ।
दो चीजें काम करने से चिपचिपा बंद हो जाती हैं: एक माता-पिता कंटेनर जिसमें अतिप्रवाह छिपा हुआ सेट होता है, और एक साइडबार कॉलम जो बॉक्स से लंबा नहीं होता है फोन पर साइडबार लेख के नीचे गिरता है, इसलिए चालू करें सामग्री को वहां संकुचित करें, या इस प्रतिलिपि को मोबाइल पर छिपाएं और लेख के ऊपर सामग्री की एक ढह गई तालिका रखें।
द चिपचिपा साइडबार डेमो पृष्ठ के आधे रास्ते में बॉक्स कॉलम के शीर्ष पर रहता है जबकि लेख स्क्रॉल करता है।
विजेट के मास्टर एडॉन्स कस्टम सीएसएस अनुभाग में चिपचिपा नियम।
एलिमेंटर प्रो सामग्री तालिका बनाम मास्टर ऐडऑन सामग्री तालिका
एलिमेंट की सामग्री तालिका विजेट को एलिमेंट प्रो लाइसेंस की आवश्यकता होती है, और यह आपको स्क्रॉल करते समय कौन से शीर्षक दिखाई देते हैं और सूची कैसे व्यवहार करती है, इस पर अधिक नियंत्रण देता है मास्टर एडॉन्स प्रो के बिना रोजमर्रा की नौकरी को संभालता है और शीर्ष तीर पर वापस जोड़ता है।
| फ़ीचर | एलिमेंट प्रो | मास्टर ऐडऑन |
|---|---|---|
| कीमत | एलिमेंट प्रो की जरूरत है | मास्टर ऐडऑन में शामिल, कोई एलिमेंटर प्रो नहीं |
| जो हेडिंग्स | टैग द्वारा एंकर (H1 से H6) और खोज क्षेत्र को सीमित करने के लिए एक कंटेनर चयनकर्ता | मुख्य पोस्ट या पृष्ठ सामग्री से शीर्षक टैग (H1 से H6) |
| शीर्षकों को बाहर छोड़ना | चयनकर्ता द्वारा एंकर, कोई भी सीएसएस चयनकर्ता | प्रत्येक शीर्षक पर सीएसएस वर्ग जेएलटीएमए-टीओसी-छिपा-शीर्षक |
| मार्करों | आपके द्वारा चुने गए आइकन के साथ संख्याएँ, या गोलियाँ | डिफ़ॉल्ट, बुलेट या नंबर |
| घोंसला बनाना | पदानुक्रमित दृश्य टॉगल और संक्षिप्त उपआइटम | हमेशा हेडिंग लेवल द्वारा नेस्टेड |
| संक्षिप्त करना | विस्तार और पतन आइकन के साथ बॉक्स को छोटा करें, और एक ब्रेकपॉइंट जहां यह शुरू होता है उसे कम से कम करें | सामग्री को संक्षिप्त बनाएं और प्रारंभ में संक्षिप्त रखें |
| सक्रिय आइटम | पाठक के स्क्रॉल करते ही अनुभाग का अनुसरण करता है | पाठक द्वारा क्लिक किए गए आइटम को चिह्नित करता है |
| स्क्रॉल सेटिंग्स | विजेट में कोई गति या ऑफसेट नियंत्रण नहीं | चिकना स्क्रॉल जो शीर्षक से लगभग 30 px ऊपर रुकता है |
| चिपचिपा | विजेट में कोई सेटिंग नहीं; विजेट या उसके कॉलम पर मोशन इफेक्ट्स स्टिकी का उपयोग करें | विजेट में कोई सेटिंग नहीं; स्थिति जोड़ें: कस्टम सीएसएस के साथ चिपचिपा, या प्रो के साथ मोशन इफेक्ट्स स्टिकी का उपयोग करें |
| शीर्ष तीर पर वापस जाएँ | कोई नहीं | आकार और रंग नियंत्रण के साथ शीर्ष पर स्क्रॉल करें |
यदि आप पहले से ही एलिमेंटर प्रो के लिए भुगतान करते हैं और चाहते हैं कि सूची पाठक को ट्रैक करने के लिए स्क्रॉल करें, तो इसके विजेट का उपयोग करें यदि आप एलिमेंटर प्रो के बिना सामग्री की एक तालिका चाहते हैं, एक बंधनेवाला बॉक्स और शीर्ष तीर पर वापस, इस एक का उपयोग करें।
के साथ अच्छी तरह से जोड़ेः प्रगति बार पढ़ना एक बार के लिए जो लोगों को पढ़ने के रूप में भरता है, के लिए उन्नत अकॉर्डियन और टैब लंबे खंडों को मोड़ने के लिए, ऑफ-कैनवास सामग्री (प्रो) स्लाइड-आउट मेनू के लिए, और ब्लॉग पोस्ट सूचियों के लिए वे लंबे लेख बैठते हैं।
सामग्री तालिका प्लगइन या एक एलिमेंटर विजेट?
वर्डप्रेस में सामग्री की दो प्रकार की तालिका होती है: प्लगइन्स जो पोस्ट सामग्री पर काम करते हैं, और विजेट जो आप एलिमेंट संपादक में रखते हैं सही एक इस बात पर निर्भर करता है कि पेज कैसे बनाया गया है।
| विकल्प | जहां यह काम करता है | लिए सर्वश्रेष्ठ |
|---|---|---|
| मास्टर ऐडऑन सामग्री तालिका | कहीं भी आप इसे टेम्प्लेट सहित एलिमेंटर में रखें | एलिमेंटर साइटें जो डिज़ाइन के साथ स्टाइल किए गए बॉक्स और बैक टू टॉप एरो चाहती हैं |
| एलिमेंटर प्रो सामग्री तालिका | एलिमेंट में कहीं भी, एलिमेंट प्रो लाइसेंस के साथ | प्रो पर पहले से मौजूद साइटें जो सक्रिय आइटम को स्क्रॉल का अनुसरण करना चाहती हैं |
| सामग्री की आसान तालिका, लकीडब्ल्यूपी | सामग्री पोस्ट करें, स्वचालित रूप से या शॉर्टकोड के साथ डाला गया | ब्लॉक संपादक या क्लासिक संपादक में लिखे गए ब्लॉग |
| रैंक गणित सामग्री तालिका ब्लॉक | रैंक गणित का उपयोग करने वाली साइटों पर ब्लॉक संपादक पोस्ट | गुटेनबर्ग पोस्ट जिन्हें केवल एक सादे सूची की आवश्यकता है |
हमारे वर्डप्रेस के लिए सामग्री प्लगइन्स की सर्वोत्तम तालिका का राउंडअप इंस्टॉल काउंट, शॉर्टकोड और चिपचिपे विकल्पों के साथ उनमें से आठ की तुलना करता है।
विषय-सूची उदाहरण
विजेट के साथ निर्मित चार लाइव डेमो एक खोलें, फिर नीचे दिए गए टेम्पलेट व्यूअर से एक ही लेआउट आयात करें।
- चिपचिपा साइडबार: एक संकीर्ण कॉलम में एक क्रमांकित सूची जो लेख स्क्रॉल करते समय दृश्य में रहती है, H3s उनके H2s के नीचे स्थित होते हैं, और एक शीर्षक jltma-toc-hide-heading के साथ छोड़ दिया जाता है।
- सूची शैलियों: डिफ़ॉल्ट, बुलेट और नंबर एक साथ, समान शीर्षकों से निर्मित।
- नियम और शर्तें पृष्ठ: दाएं साइडबार में बॉक्स एक लंबे कानूनी पृष्ठ के प्रत्येक अनुभाग को सूचीबद्ध करता है।
- गोपनीयता नीति पृष्ठ: बाईं ओर का बॉक्स, क्लिक किए गए आइटम के साथ सक्रिय रंग में।
एक ही शीर्षक पर तीन सूची शैलियाँ।
विषय-सूची के लिए अक्सर पूछे जाने वाले प्रश्न
क्या मुझे इस विषय-सूची के लिए एलिमेंटर प्रो की आवश्यकता है?
नहीं सामग्री विजेट की तालिका मास्टर एडॉन्स का हिस्सा है और प्रो के बिना एलिमेंटर पर चलती है इस पृष्ठ पर हर सेटिंग शामिल है एलिमेंटर की अपनी सामग्री तालिका विजेट वह है जिसे एलिमेंटर प्रो की आवश्यकता है।
मैं सामग्री तालिका से किसी शीर्षक को कैसे बाहर कर सकता हूँ?
एक पूरे स्तर को छोड़ने के लिए, उस टैग को हेडिंग टैग से हटा दें, उदाहरण के लिए H4। एक शीर्षक को छिपाने के लिए, इसे एलिमेंटर में चुनें, उन्नत टैब खोलें और जोड़ें jltma-toc-hide-heading सीएसएस क्लासेस फ़ील्ड के लिए यह पृष्ठ पर रहता है लेकिन सूची से बाहर रखा जाता है।
क्या पाठक के स्क्रॉल करने पर सक्रिय आइटम बदल जाता है?
नहीं शैली में सक्रिय रंग, सामग्री शैली आइटम एक पाठक क्लिक करता है, और जब वे किसी अन्य आइटम पर क्लिक करते हैं तो यह चलता है सूची स्क्रॉल करते समय स्क्रीन पर अनुभाग को ट्रैक नहीं करती है एलिमेंटर प्रो की सामग्री तालिका विजेट ऐसा करता है।
क्या मैं विषय-सूची को चिपचिपा बना सकता हूँ?
हां, हालांकि विजेट में स्विच से नहीं इसे साइडबार कॉलम में डालें, फिर जोड़ें selector { position: sticky; top: 32px; } उन्नत, कस्टम सीएसएस में एलिमेंटर प्रो के साथ आप मोशन इफेक्ट्स, स्टिकी का उपयोग कर सकते हैं इसके बजाय शीर्ष मान बढ़ाएं यदि एक निश्चित हेडर उस पर बैठता है।
पृष्ठ लोड होने पर मैं सामग्री की तालिका को विस्तारित या संक्षिप्त कैसे रख सकता हूँ?
सामग्री को संक्षिप्त करने योग्य बनाएं चालू करें संक्षिप्त रखें प्रारंभ में बंद होने के साथ, बॉक्स लोड खुला रहता है और पाठक इसे मोड़ सकते हैं इसके साथ, बॉक्स लोड केवल अपना शीर्षक दिखा रहा है प्रति-डिवाइस सेटिंग नहीं है, इसलिए फोन पर एक बंद बॉक्स और डेस्कटॉप पर एक खुले के लिए, दो प्रतियों का उपयोग करें और प्रत्येक को उन्नत, उत्तरदायी में छिपाएं।
क्या स्क्रॉल टू टॉप तीर प्रत्येक पृष्ठ पर दिखाई देगा?
केवल उन पृष्ठों पर जिनमें स्क्रॉल टू टॉप के साथ यह विजेट चालू है। तीर निचले दाएं कोने में बैठता है और विज़िटर द्वारा पृष्ठ को लगभग 250px नीचे स्क्रॉल करने के बाद दिखाता है।
क्या मैं सूची मार्करों के लिए कस्टम आइकन का उपयोग कर सकता हूं?
विजेट पैनल से नहीं सूची शैली डिफ़ॉल्ट, बुलेट और नंबर प्रदान करती है, और सामग्री शैली अनुभाग फ़ॉन्ट और रंग सेट करता है कस्टम मार्कर आइकन को आपके स्वयं के सीएसएस की आवश्यकता होगी एलिमेंटर प्रो के विजेट में गोलियों के लिए एक आइकन पिकर है।
मेरी विषय-सूची खाली क्यों है या गलत शीर्षकों को सूचीबद्ध क्यों कर रही है?
विजेट पहले ।एंट्री-कंटेंट, फिर ।पेज-कंटेंट, फिर एलिमेंटर कंटेंट एरिया के अंदर हेडिंग की तलाश करता है, और केवल हेडिंग टैग में चुने गए टैग के लिए एक खाली बॉक्स दिखाता है “सामग्री की तालिका उत्पन्न करना शुरू करने के लिए एक हेडर जोड़ें” और आमतौर पर इसका मतलब है कि हेडिंग एक टैग का उपयोग करते हैं जिसे आपने उस क्षेत्र के बाहर नहीं चुना या बैठाया है यदि कैशिंग प्लगइन पहले स्क्रॉल या क्लिक तक जावास्क्रिप्ट में देरी करता है, तो सूची तब तक खाली रहती है, इसलिए मास्टर ऐडऑन स्क्रिप्ट को देरी से बाहर करें।
एक निश्चित हेडर एक छलांग के बाद शीर्षक को कवर करता है मैं इसे कैसे ठीक करूं?
कूद शीर्ष के ऊपर लगभग ३० पीएक्स बंद हो जाता है, जो एक लंबे निश्चित हेडर के तहत पर्याप्त नहीं है इसे उपस्थिति, अनुकूलित, अतिरिक्त सीएसएस में जोड़ेंः .elementor-heading-title[id] { padding-top: 90px; margin-top: -90px; } प्रत्येक शीर्षक फिर ९० पीएक्स कम भूमि और पृष्ठ पर समान दिखता है अपने हेडर ऊंचाई प्लस थोड़ा कमरा का उपयोग करें।
ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।
ग्लासमोर्फिज्म
कंटेनर अतिरिक्त
पैटर्न
![एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
पोस्ट/पेज डुप्लीकेटर
