एलिमेंटर के लिए 10 सामग्री टॉगल उदाहरण (डेमो के साथ)

स्टैक्ड कार्ड के रूप में दिखाए गए तीन सामग्री टॉगल डिज़ाइन

कुंजी तकिए

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

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

सभी दस का निर्माण किया गया था सामग्री टॉगल करें, मास्टर एडॉन्स प्रो में सामग्री टॉगल विजेट स्वयं स्विच करने का प्रयास करने के लिए किसी भी डेमो लिंक पर क्लिक करें।

क्या एक अच्छी सामग्री टॉगल बनाता है

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

पैटर्नबायाँ विकल्पसही विकल्पनीचे उदाहरण
बिलिंग अवधिमासिकवार्षिक1, 2
इकाइयोंमीट्रिकइम्पीरियलचार
डेटा स्कोपस्वयं के संचालनआपूर्ति श्रृंखला5
दर्शकोंएक टीम के रूप मेंअपने दम पर7
समयावधिQ3Q46
प्रक्रियाऑर्डर करने के लिए बनाया गयास्टॉक में8
श्रेणीआवासीयसिविकनौ
दिन का समयदोपहर का भोजनडिनर10
योजना गुंजाइशसिंगलअसीमिततीन

मूल्य निर्धारण टॉगल उदाहरण

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

१ बिलिंग स्विच मूल्य निर्धारण कार्ड

बिलिंग स्विच मूल्य निर्धारण कार्ड सामग्री तीन डार्क प्लान कार्ड के ऊपर मासिक और वार्षिक स्विच के साथ उदाहरण को टॉगल करें
तीन प्लान कार्ड पर मासिक और वार्षिक मूल्य।

एक मासिक और वार्षिक स्विच स्टार्टर, टीम और स्केल कार्ड के ऊपर बैठता है वार्षिक पर, प्रत्येक कार्ड कम मासिक दर और वार्षिक कुल और बचत के साथ एक रेखा दिखाता है मध्य योजना दोनों तरफ सबसे चुना लेबल रखती है।

इसके लिए उपयोग करेंः सास और सदस्यता मूल्य निर्धारण। बिलिंग स्विच डेमो खोलें.

२ मूल्य निर्धारण के साथ सामग्री टॉगल करें

व्यक्तिगत और स्टार्टअप योजनाओं के ऊपर बिल किए गए मासिक और बिल किए गए वार्षिक स्विच के साथ मूल्य निर्धारण उदाहरण के साथ सामग्री को टॉगल करें
बिल किए गए मासिक और बिल किए गए वार्षिक प्लान सहेजे गए टेम्पलेट्स से लोड किए गए।

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

इसके लिए उपयोग करेंः मूल्य निर्धारण पृष्ठ से निर्मित मूल्य निर्धारण तालिका विजेट. मूल्य निर्धारण डेमो खोलें.

३ टॉगल सामग्री गोल

एकल योजना और असीमित योजना के बीच एक गोल स्विच के साथ सामग्री पूर्ण उदाहरण टॉगल करें
सिंगल और अनलिमिटेड के बीच एक राउंड स्विच।

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

इसके लिए उपयोग करेंः ऐसी योजनाएं जो दायरे से भिन्न होती हैं, जैसे एकल और असीमित। गोल डेमो खोलें.

तालिका और डेटा टॉगल उदाहरण

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

४ यूनिट स्विच स्पेक टेबल

यूनिट स्विच स्पेक टेबल सामग्री टॉगल उदाहरण मेट्रिक और इंपीरियल के बीच एक बाइक ज्यामिति तालिका स्विचिंग
मीट्रिक और शाही इकाइयों में एक विशिष्ट तालिका।

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

इसके लिए उपयोग करेंः उत्पाद चश्मा, आकार चार्ट और व्यंजनों। यूनिट स्विच डेमो खोलें.

५ डेटा स्विच बेंचमार्क टेबल

डेटा स्विच बेंचमार्क तालिका उदाहरण स्वयं के संचालन और आपूर्ति श्रृंखला के बीच उत्सर्जन तालिका को स्विच करना
एक ही तालिका में दो डेटा सेट।

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

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

६ क्वार्टर स्विच मेट्रिक्स बेंटो

क्वार्टर स्विच मेट्रिक्स बेंटो उदाहरण Q3 और Q4 के बीच परिणामों की ग्रिड को स्विच करना
बेंटो ग्रिड में त्रैमासिक परिणाम।

क्यू ३ और क्यू ४ के बीच परिणामों का एक बेंटो ग्रिड स्विच करता है राजस्व, विकास और प्रत्येक आंकड़े के तहत नोट सभी एक साथ बदलते हैं यह एक डैशबोर्ड की तरह पढ़ता है और एक का स्थान लेता है।

इसके लिए उपयोग करेंः निवेशक अपडेट, वार्षिक रिपोर्ट और मासिक आँकड़े। क्वार्टर स्विच डेमो खोलें.

सभी दस एक ही स्थान पर चाहते हैं? द सामग्री विजेट पृष्ठ टॉगल करें एक दर्शक है जो हर डेमो लोड करता है, साथ ही विजेट की पूरी सेटिंग्स भी।

दर्शक और श्रेणी टॉगल उदाहरण

अंतिम समूह संदेश स्विच करता है प्रत्येक पक्ष एक अलग पाठक के लिए लिखा गया है या एक अलग श्रेणी को कवर करता है।

७ दर्शकों स्विच फ़ीचर पैनल

एक टीम के रूप में और एक पाठ्यक्रम पृष्ठ पर अपने स्वयं के स्विच के साथ ऑडियंस स्विच फ़ीचर पैनल उदाहरण
एक खंड दो दर्शकों के लिए लिखा गया।

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

इसके लिए उपयोग करेंः कंपनियों और व्यक्तियों दोनों को बेचे जाने वाले उत्पाद। ऑडियंस स्विच डेमो खोलें.

८ मार्ग कदम समयरेखा आदेश

ऑर्डर रूट चरण समयरेखा उदाहरण मेड टू ऑर्डर और स्टॉक के बीच ऑर्डर चरणों को स्विच करना
दो ऑर्डर रूट, एक चरण सूची।

ऑर्डर पर और स्टॉक में किए गए के बीच एक क्रमांकित चरण सूची स्विच होती है प्रत्येक मार्ग पर चरण और प्रतीक्षा अलग-अलग होती है, और लेआउट समान रहता है यह उत्तर देता है “मैं ऑर्डर करने के बाद क्या होता है?दोनों प्रकार के खरीदार के लिए हेम।

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

९ परियोजना स्विच ओवरले कार्ड

प्रोजेक्ट स्विच ओवरले कार्ड उदाहरण आवासीय और नागरिक परियोजनाओं के बीच एक पोर्टफोलियो कार्ड स्विच करना
एक स्विच के पीछे आवासीय और नागरिक परियोजनाएं।

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

इसके लिए उपयोग करेंः कार्य की दो पंक्तियों के साथ पोर्टफोलियो। प्रोजेक्ट स्विच डेमो खोलें.

१० सेवा स्विच मेनू सूची

सेवा स्विच मेनू उदाहरण दोपहर के भोजन और रात के खाने के बीच एक रेस्तरां मेनू स्विचिंग
दोपहर का भोजन और रात का खाना मेनू।

एक रेस्तरां मेनू दोपहर के भोजन और रात के खाने के बीच स्विच करता है घंटों की सेवा स्विच के नीचे बैठती है, और व्यंजन और कीमतें इसके साथ बदलती हैं मेहमानों को भोजन के लिए मेनू देखें जो वे योजना बना रहे हैं।

इसके लिए उपयोग करेंः रेस्तरां, सैलून और दो सेवा सूचियों के साथ कोई भी व्यवसाय। सेवा स्विच डेमो खोलें.

इन उदाहरणों में से एक का निर्माण कैसे करें

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

  1. खींचना सामग्री टॉगल करें पृष्ठ पर और दो वस्तुओं के नाम बताएं तत्वों सूची।
  2. छोटी सामग्री के लिए, छोड़ दें प्रकार सामग्री पर और संपादक में लिखें।
  3. एक पूर्ण लेआउट के लिए, सेट करें प्रकार प्रत्येक आइटम के लिए टेम्पलेट और सहेजा गया टेम्पलेट चुनें।
  4. सेट सक्रिय सूचकांक टॉगल सेटिंग्स में पहले दिखाने वाले विकल्प को चुनने के लिए।
  5. स्टाइल टैब के टॉगलर, संकेतक और लेबल अनुभागों में स्विच को स्टाइल करें।

मूल्य निर्धारण संस्करण में कुछ अतिरिक्त चरण हैं, जिन्हें हम कवर करते हैं एलिमेंटर में मासिक और वार्षिक मूल्य निर्धारण टॉगल कैसे जोड़ें। सेटिंग्स की पूरी सूची में है सामग्री दस्तावेज़ीकरण टॉगल करें.

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

एलिमेंटर में कंटेंट टॉगल क्या है?

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

मैं सामग्री टॉगल के अंदर क्या डाल सकता हूं?

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

क्या सामग्री टॉगल में तीन विकल्प हो सकते हैं?

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

क्या ये सामग्री टॉगल डेमो टेम्पलेट के रूप में उपलब्ध हैं?

डेमो टॉगल सामग्री विजेट पृष्ठ पर टेम्पलेट दर्शक में दिखाए जाते हैं, जहां आप प्रत्येक को खोल सकते हैं वे टॉगल सामग्री विजेट के साथ बनाए गए थे, जो मास्टर एडॉन्स प्रो का हिस्सा है।

अंतिम विचार

ऊपर दिए गए दस सामग्री टॉगल उदाहरण तीन नौकरियों को कवर करते हैं: एक मूल्य स्विच करना, संख्याओं का एक सेट स्विच करना और एक संदेश स्विच करना हर एक में, लेआउट अभी भी रखता है और केवल विवरण चलते हैं, इसलिए स्विच का पालन करना आसान है।

उन्हें आज़माएं सामग्री विजेट पृष्ठ टॉगल करें, फिर आपके पास पहले से मौजूद अनुभाग के दो संस्करणों के साथ अपना स्वयं का निर्माण करें।

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

एक उत्तर छोड़ें

आपका ईमेल पता प्रकाशित नहीं किया जाएगा। आवश्यक फ़ील्ड चिह्नित हैं *